Flutter即时通讯插件sendbird_chat_widget的使用

发布于 1周前 作者 phonegap100 来自 Flutter

Flutter即时通讯插件sendbird_chat_widget的使用

1. 概述

sendbird_chat_widget 是一个用于 Flutter 的即时通讯插件，可以帮助开发者快速集成 Sendbird 的聊天功能。通过这个插件，你可以轻松实现用户认证、消息推送、通知中心等功能。本文将详细介绍如何使用 sendbird_chat_widget 插件，并提供一个完整的示例 Demo。

2. 准备工作

在开始编写代码之前，你需要完成以下准备工作：

  1. 创建 Sendbird 账户：前往 Sendbird Dashboard 注册一个免费试用账户。如果你已经是 Sendbird 用户，请直接登录。
  2. 创建新应用：进入 Sendbird Dashboard 后，点击右下角的“Create +”按钮，创建一个新的应用。
  3. 获取 Application ID：在“Applications”部分找到你刚刚创建的应用，记录下 Application ID，后续初始化 SDK 时会用到。
  4. 启用通知功能：进入左侧菜单栏的“Notifications”，完成通知功能的设置，包括通知类型、模板等。
  5. 创建模板：在“Notifications > Templates”中点击“Create template +”按钮，创建一个符合你需求的通知模板，并记录下 template_key。

3. 安装和配置

Step 1. 添加依赖

在 pubspec.yaml 文件中添加 sendbird_chat_sdk 和 sendbird_chat_widget 依赖：

dependencies:
  sendbird_chat_sdk: ^4.2.0
  sendbird_chat_widget: ^1.0.4
Step 2. 安装依赖包

在命令行中运行以下命令来安装依赖包：

flutter pub get
Step 3. 导入包

在 Dart 文件中导入 sendbird_chat_sdk 和 sendbird_chat_widget 包：

import 'package:sendbird_chat_sdk/sendbird_chat_sdk.dart';
import 'package:sendbird_chat_widget/sendbird_chat_widget.dart';

4. 初始化 Chat SDK

在应用程序启动时，使用你的 Sendbird 应用程序 ID 初始化 Chat SDK：

SendbirdChat.init(appId: 'YOUR_APP_ID');

5. 用户认证

为了确保用户的通知安全，Sendbird 推荐使用 sessionToken 进行用户认证。你需要在后端生成 sessionToken，并在客户端进行认证。以下是认证用户的代码示例：

class MySessionHandler extends SessionHandler {
  [@override](/user/override)
  void onAccessTokenRequired(AccessTokenRequester accessTokenRequester) async {
    // 在这里从后端获取新的 sessionToken
    String newAccessToken = await fetchNewAccessTokenFromBackend();
    await accessTokenRequester.onSuccess(newAccessToken);
  }

  [@override](/user/override)
  void onSessionClosed() {
    // 处理会话关闭的情况
  }

  [@override](/user/override)
  void onSessionRefreshed() {
    // 处理会话刷新的情况
  }

  [@override](/user/override)
  void onSessionError(SendbirdException e) {
    // 处理会话错误
  }
}

// 设置会话处理器
SendbirdChat.setSessionHandler(MySessionHandler());

// 认证用户
try {
  final user = await SendbirdChat.authenticateFeed('USER_ID', accessToken: 'SESSION_TOKEN');
  print('User authenticated successfully');
} catch (e) {
  print('Authentication failed: $e');
}

6. 加载 Feed Channel

通过 getChannel 方法获取一个 Feed Channel 实例：

final feedChannel = await FeedChannel.getChannel('CHANNEL_URL');

7. 设置通知集合

创建 NotificationCollection 来管理通知列表。你可以通过 loadPrevious 和 loadNext 方法分页加载通知消息。

final collection = NotificationCollection(
  channel: feedChannel,
  params: MessageListParams(),
  handler: MyNotificationCollectionHandler(),
);

collection.initialize();

class MyNotificationCollectionHandler extends NotificationCollectionHandler {
  [@override](/user/override)
  void onMessagesAdded(NotificationContext context, FeedChannel channel, List<NotificationMessage> messages) {
    // 处理新增的消息
  }

  [@override](/user/override)
  void onMessagesUpdated(NotificationContext context, FeedChannel channel, List<NotificationMessage> messages) {
    // 处理更新的消息
  }

  [@override](/user/override)
  void onMessagesDeleted(NotificationContext context, FeedChannel channel, List<NotificationMessage> messages) {
    // 处理删除的消息
  }

  [@override](/user/override)
  void onChannelUpdated(FeedChannelContext context, FeedChannel channel) {
    // 处理频道更新
  }

  [@override](/user/override)
  void onChannelDeleted(FeedChannelContext context, String deletedChannelUrl) {
    // 处理频道删除
  }

  [@override](/user/override)
  void onHugeGapDetected() {
    // 处理大量消息丢失的情况
  }
}

8. 渲染通知气泡

使用 buildNotificationBubbleWidget 方法构建通知气泡组件。你可以根据需要处理点击事件和错误情况。

final notificationBubbleWidget = SendbirdChatWidget.buildNotificationBubbleWidget(
  message: message, // 这里的 message 是从 NotificationCollection 中获取的消息
  onClick: (message, view, action) {
    // 处理点击事件
    if (action.type == 'open_link') {
      // 打开链接
    } else if (action.type == 'reply') {
      // 回复消息
    }
  },
  themeMode: NotificationThemeMode.light, // 或 dark
  onError: (NotificationWidgetError error) {
    switch (error) {
      case NotificationWidgetError.notificationDisabledError:
        print('通知已禁用');
        break;
      case NotificationWidgetError.cacheNotFoundError:
        print('缓存未找到');
        SendbirdChatWidget.cacheNotificationInfo().then((result) {
          if (result) {
            // 刷新通知气泡组件
          }
        });
        break;
      case NotificationWidgetError.templateNotFoundError:
        print('模板未找到');
        SendbirdChatWidget.getNotificationTemplate(key: message.notificationData!.templateKey).then((template) {
          if (template != null) {
            // 刷新通知气泡组件
          }
        });
        break;
      case NotificationWidgetError.notificationDataNotFoundError:
        print('通知数据未找到');
        break;
      case NotificationWidgetError.unknownError:
        print('未知错误');
        break;
    }
  },
);

9. 清除缓存

在用户登出时，清除缓存的通知设置和模板：

await SendbirdChat.disconnect();
await SendbirdChatWidget.clearCachedNotificationInfo();

10. 完整示例 Demo

以下是一个完整的示例 Demo，展示了如何集成 sendbird_chat_widget 插件并实现基本的聊天功能：

import 'package:flutter/material.dart';
import 'package:sendbird_chat_sdk/sendbird_chat_sdk.dart';
import 'package:sendbird_chat_widget/sendbird_chat_widget.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // 1. 初始化 Sendbird Chat SDK
  await SendbirdChat.init(appId: 'YOUR_APP_ID');

  // 2. 设置会话处理器
  SendbirdChat.setSessionHandler(MySessionHandler());

  // 3. 认证用户
  try {
    final user = await SendbirdChat.authenticateFeed('USER_ID', accessToken: 'SESSION_TOKEN');
    print('User authenticated successfully');
  } catch (e) {
    print('Authentication failed: $e');
    return;
  }

  // 4. 缓存通知设置和模板
  await SendbirdChatWidget.cacheNotificationInfo();

  // 5. 获取 Feed Channel
  final feedChannel = await FeedChannel.getChannel('CHANNEL_URL');

  // 6. 创建通知集合
  final collection = NotificationCollection(
    channel: feedChannel,
    params: MessageListParams(),
    handler: MyNotificationCollectionHandler(),
  );
  collection.initialize();

  // 7. 构建通知气泡组件
  final message = NotificationMessage.fromJson({}); // 示例消息
  final notificationBubbleWidget = SendbirdChatWidget.buildNotificationBubbleWidget(
    message: message,
    onClick: (message, view, action) {
      // 处理点击事件
    },
    themeMode: NotificationThemeMode.light,
    onError: (NotificationWidgetError error) {
      // 处理错误
    },
  );

  // 8. 运行应用
  runApp(MyApp(notificationBubbleWidget: notificationBubbleWidget));
}

class MyApp extends StatelessWidget {
  final Widget notificationBubbleWidget;

  MyApp({required this.notificationBubbleWidget});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Sendbird Chat Demo')),
        body: Center(
          child: notificationBubbleWidget,
        ),
      ),
    );
  }
}

class MySessionHandler extends SessionHandler {
  [@override](/user/override)
  void onAccessTokenRequired(AccessTokenRequester accessTokenRequester) async {
    // 在这里从后端获取新的 sessionToken
    String newAccessToken = await fetchNewAccessTokenFromBackend();
    await accessTokenRequester.onSuccess(newAccessToken);
  }

  [@override](/user/override)
  void onSessionClosed() {
    // 处理会话关闭的情况
  }

  [@override](/user/override)
  void onSessionRefreshed() {
    // 处理会话刷新的情况
  }

  [@override](/user/override)
  void onSessionError(SendbirdException e) {
    // 处理会话错误
  }
}

class MyNotificationCollectionHandler extends NotificationCollectionHandler {
  [@override](/user/override)
  void onMessagesAdded(NotificationContext context, FeedChannel channel, List<NotificationMessage> messages) {
    // 处理新增的消息
  }

  [@override](/user/override)
  void onMessagesUpdated(NotificationContext context, FeedChannel channel, List<NotificationMessage> messages) {
    // 处理更新的消息
  }

  [@override](/user/override)
  void onMessagesDeleted(NotificationContext context, FeedChannel channel, List<NotificationMessage> messages) {
    // 处理删除的消息
  }

  [@override](/user/override)
  void onChannelUpdated(FeedChannelContext context, FeedChannel channel) {
    // 处理频道更新
  }

  [@override](/user/override)
  void onChannelDeleted(FeedChannelContext context, String deletedChannelUrl) {
    // 处理频道删除
  }

  [@override](/user/override)
  void onHugeGapDetected() {
    // 处理大量消息丢失的情况
  }
}

Future<String> fetchNewAccessTokenFromBackend() async {
  // 模拟从后端获取 sessionToken
  await Future.delayed(Duration(seconds: 1));
  return 'NEW_SESSION_TOKEN';
}

更多关于Flutter即时通讯插件sendbird_chat_widget的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter即时通讯插件sendbird_chat_widget的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter项目中使用 sendbird_chat_widget 插件来实现即时通讯功能的代码示例。这个示例将涵盖基本的初始化、用户认证、打开聊天列表和聊天室的步骤。

前提条件

  1. Flutter环境：确保你的Flutter开发环境已经配置好。
  2. SendBird后台设置：你需要在SendBird后台创建一个应用，并获取App ID和API密钥。

步骤

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 sendbird_chat_widget 依赖：

dependencies:
  flutter:
    sdk: flutter
  sendbird_chat_widget: ^x.y.z  # 请替换为最新版本号

然后运行 flutter pub get 来安装依赖。

2. 配置SendBird

在你的Flutter项目的 main.dart 文件中，进行SendBird的初始化配置。

import 'package:flutter/material.dart';
import 'package:sendbird_chat_widget/sendbird_chat_widget.dart';
import 'package:sendbird_sdk/sendbird_sdk.dart' as SendBirdSDK;

void main() {
  // 初始化SendBird SDK
  SendBirdSDK.init(appId: 'YOUR_APP_ID');

  // 连接SendBird服务器
  SendBirdSDK.connectUser(userId: 'USER_ID', accessToken: 'ACCESS_TOKEN').then((user) {
    runApp(MyApp());
  }).catchError((error) {
    // 处理连接错误
    print('Failed to connect to SendBird: $error');
  });
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ChatScreen(),
    );
  }
}

class ChatScreen extends StatefulWidget {
  @override
  _ChatScreenState createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SendBird Chat'),
      ),
      body: SendBirdChatWidget(
        // 配置SendBird Chat Widget
        userId: 'USER_ID',
        accessToken: 'ACCESS_TOKEN',
        channelListQuery: SendBirdSDK.GroupChannel.buildMyGroupChannelListQuery(),
        onUserClicked: (userId) {
          // 用户点击事件处理
          print('User clicked: $userId');
        },
        onMessageClicked: (messageId, channel) {
          // 消息点击事件处理
          print('Message clicked: $messageId in channel: ${channel.url}');
        },
      ),
    );
  }
}

3. 处理用户认证

在实际应用中，你可能需要通过后端API获取 ACCESS_TOKEN。这里假设你已经有了用户的 ACCESS_TOKEN。

4. 运行应用

确保你已经替换了 YOUR_APP_ID、USER_ID 和 ACCESS_TOKEN 为你的实际值，然后运行你的Flutter应用。

flutter run

注意事项

  • 安全性：不要将 ACCESS_TOKEN 硬编码在客户端代码中。应该从安全的后端API获取。
  • 错误处理：添加适当的错误处理逻辑，比如用户未登录或 ACCESS_TOKEN 过期的情况。
  • 自定义：SendBirdChatWidget 提供了很多自定义选项，你可以根据需求调整UI和行为。

以上代码展示了如何在Flutter中使用 sendbird_chat_widget 插件进行基本的即时通讯功能实现。如果你需要更高级的功能，比如消息发送、接收、群组管理等，可以参考 SendBird Flutter SDK文档 获取更多信息。

回到顶部