Flutter即时通讯插件sendbird_chat_sdk的使用

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

Flutter即时通讯插件sendbird_chat_sdk的使用

目录

  1. 介绍
  2. 要求
  3. 开始使用
  4. 发送第一条消息

介绍

Sendbird Chat SDK for Flutter 允许您通过最小的努力在客户端应用程序中添加实时聊天功能。Sendbird 提供了一个功能丰富、可扩展且经过验证的聊天解决方案,被 Reddit、Hinge、PubG 和 Paytm 等公司所依赖。

工作原理

Chat SDK 提供了提供丰富的聊天体验所需的全部功能。实现它首先需要添加用户登录、列出可用的频道、选择或创建一个 open channelgroup channel,并通过 channel event handlers 接收消息和其他事件,并能够发送消息。一旦这些基本功能就位,恭喜你,现在你已经有了一个聊天应用!

接下来可以查看 Sendbird 支持的所有其他功能,并根据你的用户需求添加相应的功能。

文档

了解更多关于 Flutter 上的 Sendbird Chat 的信息,请访问 文档。如果有任何评论、问题或功能请求,请在 Sendbird 社区 中告诉我们。

要求

Chat SDK for Flutter 的最低要求如下:

  • Dart 2.19.0 或更高版本
  • Flutter 3.7.0 或更高版本

注意:为了支持苹果隐私清单,将 ios/Resources/PrivacyInfo.xcprivacy 文件的内容添加到项目的 PrivacyInfo.xcprivacy 中。

开始使用

最快的方式是使用 samples repo 中的一个示例应用,从 Sendbird Dashboard 创建一个应用程序,并将 App ID 复制到示例应用中,即可准备就绪。

第一步:从仪表盘创建 Sendbird 应用程序

在安装 Sendbird Chat SDK 之前,你需要在 Sendbird Dashboard 上创建一个 Sendbird 应用程序。初始化 Chat SDK 时,你需要该 Sendbird 应用程序的 App ID。

第二步:安装包

pubspec.yaml 中添加以下依赖项:

dependencies:
  sendbird_chat_sdk: ^4.2.30

然后在项目目录下运行 flutter pub get 命令。

第三步:在 Flutter 中使用 Chat SDK

你可以使用一条导入语句来使用所有类和方法,如下所示:

import 'package:sendbird_chat_sdk/sendbird_chat_sdk.dart';

发送第一条消息

现在 Chat SDK 已经导入,我们准备好开始发送消息了。

认证

为了使用 Sendbird Chat SDK for Flutter 的功能,你应该通过与 Sendbird 服务器进行用户认证来初始化 SendbirdChat 实例。此实例基于已认证的用户账户与服务器通信并交互,允许客户端应用程序使用 Chat SDK 的功能。

以下是发送第一条消息的步骤:

初始化 Chat SDK

初始化应用程序中的 Chat SDK,以允许 SDK 对 Flutter 客户端应用程序的连接状态变化做出响应。初始化需要你的 Sendbird 应用程序的应用程序 ID,可以在 Sendbird Dashboard 找到。

SendbirdChat.init(appId: 'APP_ID');

连接到 Sendbird 服务器

你需要一个用户才能向频道发送消息。你可以在我们的仪表板上创建用户,或者你可以使用尚未被任何 Sendbird 应用程序用户占用的唯一 ID。在后一种情况下,在连接之前会在你的 Sendbird 应用程序中自动创建一个新用户。

final user = await SendbirdChat.connect('USER_ID');

创建一个新的开放频道

使用以下代码创建一个开放频道。开放频道允许所有 Sendbird 应用程序用户无需邀请即可轻松参与。创建开放频道时,应将 OpenChannelCreateParams 类作为参数传递。

final openChannel = await OpenChannel.createChannel(OpenChannelCreateParams());

进入频道

进入开放频道以发送和接收消息。

final openChannel = await OpenChannel.getChannel('CHANNEL_URL');
await openChannel.enter();

向频道发送消息

最后,向频道发送消息。要了解您可以发送的消息类型,请参阅消息页面。

final message = await openChannel.sendUserMessage(UserMessageCreateParams(message: 'MESSAGE'));

接收消息

使用 addChannelHandler() 方法添加 onMessageReceived() 频道事件处理器,以便您可以接收刚刚发送到频道的消息。你也可以在仪表板上看到消息。

class MyOpenChannelHandler extends OpenChannelHandler {
  @override
  void onMessageReceived(BaseChannel channel, BaseMessage message) {
    // Received a new message.
  }
}

SendbirdChat.addChannelHandler('UNIQUE_HANDLER_ID', MyOpenChannelHandler());

完整的示例代码如下:

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

void main() async {
  runZonedGuarded(() async {
    // Initialize the SendbirdChat SDK with your Application ID.
    await SendbirdChat.init(appId: 'APP-ID');

    // Connect to the Sendbird server with a User ID.
    await SendbirdChat.connect('USER-ID');

    // Create a new open channel.
    final openChannel =
        await OpenChannel.createChannel(OpenChannelCreateParams());

    // Enter the channel.
    await openChannel.enter();

    // Send a message to the channel.
    final message = await openChannel.sendUserMessage(UserMessageCreateParams(message: 'MESSAGE'));
  }, (e, s) {
    // Handle error.
  });
}

这个示例展示了如何初始化 Sendbird Chat SDK、连接用户、创建并进入一个开放频道以及发送消息的基本流程。希望这对你有所帮助!


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

1 回复

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


当然,以下是一个关于如何在Flutter项目中使用sendbird_chat_sdk插件来实现即时通讯功能的代码示例。这个示例涵盖了基本的初始化、用户认证、打开聊天频道以及发送和接收消息的功能。

首先,确保你已经在pubspec.yaml文件中添加了sendbird_chat_sdk依赖:

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

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

接下来,是主要的Flutter代码示例:

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  SendBirdChatClient? _chatClient;
  User? _currentUser;

  @override
  void initState() {
    super.initState();
    _initSendBird();
  }

  Future<void> _initSendBird() async {
    // 初始化SendBird Chat SDK
    SendBirdChat.init(
      apiKey: 'YOUR_API_KEY',  // 替换为你的SendBird API Key
      appId: 'YOUR_APP_ID',    // 替换为你的SendBird App ID
    );

    // 创建或获取SendBird Chat Client实例
    _chatClient = await SendBirdChat.buildInstance();

    // 添加连接状态监听器
    _chatClient!.addConnectionStatusHandler((status) {
      print('Connection status changed: $status');
      if (status == ConnectionStatus.connected) {
        // 连接成功后,进行用户认证
        _authenticateUser();
      }
    });

    // 连接到SendBird服务器
    await _chatClient!.connectUserWithUserId('user_123');  // 使用你的用户ID进行连接
  }

  Future<void> _authenticateUser() async {
    // 在这里,你可能需要通过你的后端服务获取一个访问令牌(Access Token)
    // 然后使用SendBird的认证方法
    String accessToken = 'YOUR_ACCESS_TOKEN';  // 替换为实际的访问令牌
    try {
      _currentUser = await _chatClient!.authenticateUserWithAccessToken(accessToken);
      print('User authenticated: ${_currentUser!.userId}');
      // 打开或创建聊天频道
      _openOrCreateChannel();
    } catch (e) {
      print('Authentication failed: $e');
    }
  }

  Future<void> _openOrCreateChannel() async {
    // 打开一个已存在的Group Channel,或者创建一个新的Group Channel
    GroupChannel? channel = await _chatClient!.createGroupChannel(
      GroupChannelParams(
        name: 'My Group Channel',
        userData: '{"type":"public"}',
        memberList: [_currentUser!.userId],
      ),
    );

    // 订阅频道消息
    channel!.addMessageHandler((message) {
      print('Received message: ${message.message}');
      // 在这里更新UI以显示新消息
    });

    // 保存频道引用(实际应用中可能需要持久化这个引用)
    // _currentChannel = channel;
  }

  Future<void> _sendMessage(GroupChannel channel, String messageText) async {
    UserMessage message = UserMessage.buildFromMessageParams(
      MessageParams(
        message: messageText,
        userId: _currentUser!.userId,
        channelUrl: channel.channelUrl,
      ),
    );
    await channel.sendMessage(message);
    print('Message sent: $messageText');
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('SendBird Chat Example')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 这里可以添加显示聊天记录的UI组件
              // Text('Chat History...'),

              // 输入框和发送按钮
              TextField(
                decoration: InputDecoration(labelText: 'Message'),
                onSubmitted: (messageText) {
                  // 假设已经有一个_currentChannel引用
                  // _sendMessage(_currentChannel!, messageText);
                },
              ),
              SizedBox(height: 16),
              ElevatedButton(
                onPressed: () {
                  // 假设已经有一个_currentChannel引用,并且输入框有焦点且包含文本
                  // TextEditingController controller = ...;
                  // String messageText = controller.text;
                  // _sendMessage(_currentChannel!, messageText);
                },
                child: Text('Send'),
              ),
            ],
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    _chatClient?.disconnectUser();
    super.dispose();
  }
}

注意

  1. 示例代码中的YOUR_API_KEYYOUR_APP_IDYOUR_ACCESS_TOKEN需要替换为你自己的SendBird凭证。
  2. 示例代码中的用户ID 'user_123' 和频道逻辑只是演示用途,实际应用中需要根据你的需求进行调整。
  3. 示例代码没有实现完整的UI逻辑(如显示聊天记录、管理多个频道等),这些需要根据你的应用需求进一步开发。
  4. 示例代码中的_currentChannel变量被注释掉了,因为在完整的实现中,你需要管理当前选中的频道,这里仅作为提示。

这个示例提供了一个基本的框架,你可以在此基础上根据实际需求进行扩展和完善。

回到顶部