Flutter即时通讯插件sendbird_sdk的使用

Flutter即时通讯插件sendbird_sdk的使用

通过Chat SDK for Flutter,你可以高效地将实时聊天功能集成到你的客户端应用中。在客户端实现上,你可以轻松初始化、配置并构建聊天功能。在服务器端,Sendbird确保你的应用内的聊天服务具有可靠的基础设施管理服务。本README提供了Chat SDK的结构、补充功能及安装步骤的重要信息。

目录

  1. 介绍
  2. 需求
  3. 开始使用
  4. 发送第一条消息
  5. 获取帮助
  6. 我们正在招聘

🔒 安全提示

当一个新的Sendbird应用在仪表板中创建时,默认的安全设置会设置为宽松模式,以便简化运行样本和实现你的第一个代码。

在发布之前,请务必查看仪表板中的安全选项卡(⚙️ 设置 -> 安全),并将访问令牌权限设置为只读或禁用,以防止未认证用户登录为他人。同时检查访问控制列表。大多数应用都会希望禁用“允许检索用户列表”,因为这可能会暴露使用量和其他信息。

介绍

通过Chat SDK for Flutter,你可以高效地将实时聊天功能集成到你的客户端应用中。在客户端实现上,你可以轻松初始化、配置并构建聊天功能。在服务器端,Sendbird确保你的应用内的聊天服务具有可靠的基础设施管理服务。本README提供了Chat SDK的结构、补充功能及安装步骤的重要信息。

如何工作

  1. 用户登录
  2. 用户查看频道列表
  3. 选择或创建一个开放频道或一个群组频道
  4. 使用频道事件处理器,向该频道中的其他用户发送和接收消息。

需求

Chat SDK for Flutter的最低要求包括:

  • Xcode 或 Android Studio
  • Dart 2.18.0 或以上版本
  • Flutter 3.3.0 或更高版本

开始使用

本节为你提供使用Sendbird Chat SDK for Flutter所需的入门信息。请遵循以下简单步骤来将Chat SDK集成到你的客户端应用中。

尝试示例应用

测试Sendbird Chat SDK for Flutter最快的方法是基于我们的示例应用构建你的聊天应用。要创建示例应用项目,请从我们的GitHub仓库下载应用。链接如下:

步骤1:从你的仪表板创建一个Sendbird应用

Sendbird应用包含所有聊天服务所需的一切,包括用户、消息和频道。要创建一个应用:

  1. 访问Sendbird仪表板,输入你的电子邮件和密码,创建一个新帐户。你也可以使用Google帐户注册。
  2. 在设置向导提示下,输入你的组织信息以管理Sendbird应用。
  3. 最后,在完成设置后,点击右上角的Create +按钮。

每个应用只能集成一个Sendbird应用,无论平台如何。你应用中的所有用户都可以跨所有平台进行通信。这意味着你的iOS、Android和Web客户端用户可以互相发送和接收消息,无需进一步设置。

注意:所有数据仅限于单个应用范围内,不同Sendbird应用中的用户无法相互聊天。

步骤2:安装包

如果你熟悉在项目中使用外部包或SDK,那么安装Chat SDK的过程非常简单。请按以下步骤通过pub执行安装:

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

    dependencies:
      sendbird_sdk: ^3.2.20
    
  • 在项目目录中运行flutter pub get命令。

步骤3:在Flutter中使用Chat SDK

你可以通过以下导入语句使用所有的类和方法:

import 'package:sendbird_sdk/sendbird_sdk.dart';

发送第一条消息

请按照以下逐步说明进行身份验证并发送你的第一条消息。

身份验证

为了使用Sendbird Chat SDK for Flutter的功能,你应该通过用户身份验证与Sendbird服务器建立SendbirdSdk实例。此实例基于经过身份验证的用户账户与服务器通信,使客户端应用能够使用Chat SDK的功能。

以下是使用Chat SDK发送第一条消息的步骤:

步骤1:初始化Chat SDK

初始化Chat SDK使其能够响应客户端应用中的连接和状态变化。将你的Sendbird应用的APP_ID作为参数传递给SendbirdSdk构造函数中的appId参数。SendbirdSdk构造函数创建一个实例,因此在整个客户端应用中应该只调用一次。建议将初始化代码实现在用户登录视图中。

final sendbird = SendbirdSdk(appId: APP_ID);

步骤2:连接到Sendbird服务器

用户可以通过唯一的用户ID或用户ID和访问令牌登录并连接到Sendbird服务器。

A. 使用唯一的用户ID

要连接到Sendbird服务器,用户需要使用唯一的ID进行登录。新用户可以用任何未被使用的用户ID进行认证,该ID将自动注册到Sendbird系统。现有ID可以直接登录。该ID必须在Sendbird应用中唯一,以便与其他用户区分开来,例如在你的服务中哈希后的电子邮件地址或电话号码。

try {
  final user = await sendbird.connect(userId: USER_ID);
} catch (e) {
  // 错误处理
}

B. 使用唯一的用户ID和访问令牌

通过使用Chat Platform API,你可以创建用户并为每个用户分配唯一的访问令牌,或者为现有用户发放访问令牌。一旦颁发了访问令牌,用户需要提供访问令牌才能登录到你的Sendbird应用。

  1. 使用Chat Platform API,创建一个Sendbird用户账户,使用用户在注册或登录你的服务时提交的信息。
  2. 将用户ID与颁发的访问令牌一起保存到你的安全持久存储中。
  3. 当用户尝试登录应用时,从存储中加载用户ID和访问令牌,并将其传递给connect()方法。
  4. 建议定期更换用户的访问令牌以提高账户安全性。
try {
  final user = await sendbird.connect(userId: USER_ID, accessToken: ACCESS_TOKEN);
} catch (e) {
  // 错误处理
}

- 安全登录提示

为了管理用户对你的Sendbird应用的访问权限,请转到仪表板中的设置 > 应用 > 安全 > 访问令牌权限设置。你可以更改设置以防止没有访问令牌的用户登录到你的应用或限制他们读写消息的能力。

出于安全原因,你还可以在用户登录Sendbird服务器时使用会话令牌代替访问令牌。了解更多关于访问令牌与会话令牌的信息。

步骤3:创建新的开放频道

创建一个开放频道。创建后,你的Sendbird应用中的所有用户都可以轻松参与该频道。

try {
  final channel = await OpenChannel.createChannel();
} catch (e) {
  // 错误处理
}

你也可以通过邀请用户作为新成员来创建一个群组频道

注意:大多数以下步骤中使用的都是异步方法。这意味着,使用异步方法,你的客户端应用必须通过awaitthen()回调从Sendbird服务器接收结果后才能继续下一步。

步骤4:进入频道

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

try {
  final channel = await OpenChannel.getChannel(CHANNEL_URL);
  await channel.enter();
} catch (e) {
  // 错误处理
}

步骤5:向频道发送消息

最后,向频道发送消息。有三种类型的消息:纯文本用户消息、二进制文件消息(如图像或PDF)以及通过仪表板Chat Platform API发送的纯文本管理员消息。

try {
  final params = UserMessageParams()
    ..message = MESSAGE
    ..data = DATA
    ..customType = CUSTOM_TYPE;

  final preMessage = openChannel.sendUserMessage(params, onCompleted: (message, error) {
    if (error != null) {
      // 错误处理
    } else {
      // 消息已成功发送
    }
  });
  // 使用preMessage提前填充你的聊天消息
} catch (e) {
  // 错误处理
}

获取帮助

查看官方的Sendbird Flutter文档和Sendbird的开发者门户以获取教程和视频。如果你需要解决任何问题或有任何疑问,请访问我们的社区论坛


我们正在招聘!

Sendbird由一群谦逊、友好且勤奋的个体组成,他们有着共同的目标,即构建下一代移动与社交技术。你可以远程加入我们的团队,或在旧金山、首尔、纽约、伦敦和新加坡的其中一个地点工作。更多信息请访问职业页面


示例代码

import 'package:sendbird_sdk/sendbird_sdk.dart';

void main(List<String> arguments) async {
  // 创建Sendbird SDK实例并传入应用ID
  final sendbird = SendbirdSdk(appId: 'YOUR-APP-ID');

  try {
    // 使用用户ID连接Sendbird服务器
    final user = await sendbird.connect('UNIQUE-USER-ID');

    // 生成群组频道参数
    final params = GroupChannelParams()
      ..userIds = [user.userId]
      ..operatorUserIds = [user.userId]
      ..name = 'YOUR_GROUP_NAME'
      ..customType = 'CUSTOM_TYPE'
      ..isPublic = true;

    // 创建群组频道
    final channel = await GroupChannel.createChannel(params);

    // 向群组频道发送用户消息
    channel.sendUserMessageWithText('Hello World', onCompleted: (message, error) {
      // 消息已成功发送
      print('${message.message} has been sent!');
    });
  } catch (e) {
    // 处理错误
  }
}

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

1 回复

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


当然,以下是一个关于如何在Flutter项目中使用sendbird_sdk插件来实现即时通讯的基本代码示例。这个示例将展示如何初始化SendBird SDK、登录用户、创建并打开聊天频道等。

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

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

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

接下来,在你的Flutter项目中,你可以按照以下步骤使用SendBird SDK:

  1. 初始化SendBird SDK

在你的应用的入口文件(通常是main.dart)中,初始化SendBird SDK:

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

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

  // 初始化SendBird SDK
  await SendBird.init("YOUR_APP_ID"); // 替换为你的SendBird应用ID

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ChatScreen(),
    );
  }
}
  1. 用户登录

在登录页面或者合适的位置,实现用户登录逻辑:

class LoginScreen extends StatefulWidget {
  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  final _formKey = GlobalKey<FormState>();
  String _userId = '';
  String _nickname = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Login'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: <Widget>[
              TextFormField(
                decoration: InputDecoration(labelText: 'User ID'),
                validator: (value) {
                  if (value.isEmpty) {
                    return 'User ID is required';
                  }
                  return null;
                },
                onChanged: (value) {
                  setState(() {
                    _userId = value;
                  });
                },
              ),
              TextFormField(
                decoration: InputDecoration(labelText: 'Nickname'),
                validator: (value) {
                  if (value.isEmpty) {
                    return 'Nickname is required';
                  }
                  return null;
                },
                onChanged: (value) {
                  setState(() {
                    _nickname = value;
                  });
                },
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () async {
                  if (_formKey.currentState!.validate()) {
                    try {
                      // 用户登录
                      User user = await SendBird.connectUserWithId(_userId, nickname: _nickname);
                      // 登录成功后,跳转到聊天页面
                      Navigator.push(
                        context,
                        MaterialPageRoute(builder: (context) => ChatScreen()),
                      );
                    } catch (e) {
                      // 处理登录错误
                      print("Error connecting user: $e");
                    }
                  }
                },
                child: Text('Login'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
  1. 创建并打开聊天频道

在聊天页面,你可以创建或打开一个聊天频道:

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

class _ChatScreenState extends State<ChatScreen> {
  late GroupChannel _channel;

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

  Future<void> _createOrOpenChannel() async {
    try {
      // 假设我们使用频道名称来创建或打开频道
      String channelName = "general_chat";
      GroupChannel? channel = await GroupChannel.createChannelWithName(channelName, isDistinct: true);
      if (channel == null) {
        // 如果频道已存在,则打开它
        channel = await GroupChannel.getChannelWithUrl(await GroupChannel.generateChannelUrlWithName(channelName));
      }
      setState(() {
        _channel = channel!;
      });
    } catch (e) {
      print("Error creating or opening channel: $e");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chat'),
      ),
      body: _channel != null
          ? ChatWidget(channel: _channel)
          : Center(child: CircularProgressIndicator()),
    );
  }
}

class ChatWidget extends StatefulWidget {
  final GroupChannel channel;

  ChatWidget({required this.channel});

  @override
  _ChatWidgetState createState() => _ChatWidgetState();
}

class _ChatWidgetState extends State<ChatWidget> {
  late MessageListController _messageListController;

  @override
  void initState() {
    super.initState();
    _messageListController = MessageListController(channel: widget.channel);
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        children: <Widget>[
          Expanded(
            child: MessageListView(
              controller: _messageListController,
            ),
          ),
          MessageInputWidget(
            channel: widget.channel,
            onSendMessage: (message) async {
              try {
                await widget.channel.sendMessage(UserMessage(message: message));
              } catch (e) {
                print("Error sending message: $e");
              }
            },
          ),
        ],
      ),
    );
  }
}

注意:上述代码中的ChatWidgetMessageListViewMessageInputWidget是假设的UI组件,你需要根据实际需求实现这些组件。这些组件用于显示消息列表和输入消息。

此外,这个示例代码省略了很多错误处理和边界情况的处理,例如用户断开连接、重新连接、消息加载状态等。在实际开发中,你需要根据SendBird SDK的文档完善这些功能。

希望这个示例能帮你快速上手在Flutter项目中使用SendBird SDK实现即时通讯。如果你有任何其他问题,欢迎继续提问!

回到顶部