Flutter即时通讯插件agora_chat_sdk的使用

Get Started with Agora Chat

即时通讯连接了世界各地的人们，使他们能够实时地与他人交流。Agora Chat SDK允许您在任何应用程序中嵌入实时消息传递功能，无论是在任何设备上，还是在任何地方。

本页面展示了如何使用Agora Chat SDK for Flutter将一对一的消息传递添加到应用程序中的示例代码。

Understand the tech

下图显示了客户端如何发送和接收一对一消息的工作流程。

如图所示，一对一消息传递的工作流程如下：

1. 客户端从您的应用程序服务器获取token。
2. 客户端A和客户端B登录Agora Chat。
3. 客户端A向客户端B发送消息。消息被发送到Agora Chat服务器，服务器将消息传递给客户端B。当客户端B接收到消息时，SDK会触发一个事件。客户端B监听该事件并获取消息。

Prerequisites

如果您要开发iOS平台的应用程序，您的开发环境必须满足以下要求：

• Flutter 3.3.0或更高版本
• Dart 3.3.0或更高版本
• macOS
• Xcode 12.4或更高版本，带有Xcode命令行工具
• CocoaPods
• 运行iOS 11.0或更高版本的iOS模拟器或真实iOS设备

如果您要开发Android平台的应用程序，您的开发环境必须满足以下要求：

• Flutter 3.3.0或更高版本
• Dart 3.3.0或更高版本
• Android Studio 4.0或更高版本，带有JDK 1.8或更高版本
• 运行Android SDK API级别21或更高版本的Android模拟器或真实Android设备

您可以运行flutter doctor来检查开发环境和部署环境是否正确配置。

Token generation

Register a user

为了生成用户ID，请按照以下步骤操作：

1. 在项目管理页面，单击您要使用的项目的配置。
2. 在编辑项目页面，单击聊天下的配置。
3. 在左侧导航栏中，选择运营管理 > 用户，然后单击创建用户。
4. 在创建用户对话框中，填写用户ID、昵称和密码，然后单击保存以创建用户。

Generate a user token

为了确保通信安全，Agora建议使用token来验证用户登录Agora Chat系统。

对于测试目的，Agora Console支持生成Agora聊天token。要生成Agora聊天token，请按照以下步骤操作：

1. 在项目管理页面，单击您要使用的项目的配置。
2. 在编辑项目页面，单击聊天下的配置。
3. 在应用信息页面的数据中心部分，在聊天用户临时token框中输入用户ID，然后单击生成以生成具有用户权限的token。

Project setup

1. Create a Flutter project

打开终端，进入您想要创建Flutter项目的目录，并运行以下命令以创建名为quick_start的项目文件夹：

flutter create quick_start

2. Set up the project

Android setup

1. 在quick_start/android/app/build.gradle文件中，添加以下行以设置最低Android SDK版本为21：

   android {
       defaultConfig {
           minSdkVersion 21
       }
   }
   

2. 在quick_start/android/app/proguard-rules.pro文件中，添加以下行以防止代码混淆：

   -keep class com.hyphenate.** {*;}
   -dontwarn  com.hyphenate.**
   

iOS setup

1. 在Xcode中打开quick_start/ios/Runner.xcodeproj文件，并在左侧面板中选择TARGETS > Runner。在General选项卡下的Deployment Info部分，将最低iOS版本设置为iOS 10.0。

3. Integrate the Agora Chat SDK

打开终端，进入quick_start目录，并运行以下命令以添加agora_chat_sdk依赖项：

flutter pub add agora_chat_sdk
flutter pub get

Implement peer-to-peer messaging

在quick_start/lib/main.dart文件的顶部添加以下代码以导入包：

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

class AgoraChatConfig {
  static const String appKey = "<#Your app key#>";
  static const String userId = "<#Your created user#>";
  static const String agoraToken = "<#User Token#>";
}

用以下代码替换_MyHomePageState类中的内容：

class _MyHomePageState extends State<MyHomePage> {

  ScrollController scrollController = ScrollController();
  String? _messageContent, _chatId;
  final List<String> _logText = [];

  @override
  void initState() {
    super.initState();
    _initSDK();
    _addChatListener();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        padding: const EdgeInsets.only(left: 10, right: 10),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          mainAxisSize: MainAxisSize.max,
          children: [
            const SizedBox(height: 10),
            const Text("login userId: ${AgoraChatConfig.userId}"),
            const Text("agoraToken: ${AgoraChatConfig.agoraToken}"),
            const SizedBox(height: 10),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Expanded(
                  flex: 1,
                  child: TextButton(
                    onPressed: _signIn,
                    child: const Text("SIGN IN"),
                    style: ButtonStyle(
                      foregroundColor: MaterialStateProperty.all(Colors.white),
                      backgroundColor:
                          MaterialStateProperty.all(Colors.lightBlue),
                    ),
                  ),
                ),
                const SizedBox(width: 10),
                Expanded(
                  child: TextButton(
                    onPressed: _signOut,
                    child: const Text("SIGN OUT"),
                    style: ButtonStyle(
                      foregroundColor: MaterialStateProperty.all(Colors.white),
                      backgroundColor:
                          MaterialStateProperty.all(Colors.lightBlue),
                    ),
                  ),
                ),
              ],
            ),
            const SizedBox(height: 10),
            TextField(
              decoration: const InputDecoration(
                hintText: "Enter recipient's userId",
              ),
              onChanged: (chatId) => _chatId = chatId,
            ),
            TextField(
              decoration: const InputDecoration(
                hintText: "Enter message",
              ),
              onChanged: (msg) => _messageContent = msg,
            ),
            const SizedBox(height: 10),
            TextButton(
              onPressed: _sendMessage,
              child: const Text("SEND TEXT"),
              style: ButtonStyle(
                foregroundColor: MaterialStateProperty.all(Colors.white),
                backgroundColor: MaterialStateProperty.all(Colors.lightBlue),
              ),
            ),
            Flexible(
              child: ListView.builder(
                controller: scrollController,
                itemBuilder: (_, index) {
                  return Text(_logText[index]);
                },
                itemCount: _logText.length,
              ),
            ),
          ],
        ),
      ),
    );
  }

  void _initSDK() async {
    ChatOptions options = ChatOptions(
      appKey: AgoraChatConfig.appKey,
      autoLogin: false,
    );
    await ChatClient.getInstance.init(options);
    await ChatClient.getInstance.startCallback();
  }

  void _addChatListener() {
    ChatClient.getInstance.chatManager.addMessageEvent(
        "UNIQUE_HANDLER_ID",
        ChatMessageEvent(
          onSuccess: (msgId, msg) {
            _addLogToConsole("send message succeed");
          },
          onProgress: (msgId, progress) {
            _addLogToConsole("send message succeed");
          },
          onError: (msgId, msg, error) {
            _addLogToConsole(
              "send message failed, code: ${error.code}, desc: ${error.description}",
            );
          },
        ));

    ChatClient.getInstance.chatManager.addEventHandler(
      "UNIQUE_HANDLER_ID",
      ChatEventHandler(onMessagesReceived: onMessagesReceived),
    );
  }

  void _signIn() async {
    try {
      await ChatClient.getInstance.loginWithToken(
        AgoraChatConfig.userId,
        AgoraChatConfig.agoraToken,
      );
      _addLogToConsole("login succeed, userId: ${AgoraChatConfig.userId}");
    } on ChatError catch (e) {
      _addLogToConsole("login failed, code: ${e.code}, desc: ${e.description}");
    }
  }

  void _signOut() async {
    try {
      await ChatClient.getInstance.logout(true);
      _addLogToConsole("sign out succeed");
    } on ChatError catch (e) {
      _addLogToConsole(
          "sign out failed, code: ${e.code}, desc: ${e.description}");
    }
  }

  void _sendMessage() async {
    if (_chatId == null || _messageContent == null) {
      _addLogToConsole("single chat id or message content is null");
      return;
    }

    var msg = ChatMessage.createTxtSendMessage(
      targetId: _chatId!,
      content: _messageContent!,
    );

    ChatClient.getInstance.chatManager.sendMessage(msg);
  }

  void onMessagesReceived(List<ChatMessage> messages) {
    for (var msg in messages) {
      switch (msg.body.type) {
        case MessageType.TXT:
          {
            ChatTextMessageBody body = msg.body as ChatTextMessageBody;
            _addLogToConsole(
              "receive text message: ${body.content}, from: ${msg.from}",
            );
          }
          break;
        case MessageType.IMAGE:
          {
            _addLogToConsole(
              "receive image message, from: ${msg.from}",
            );
          }
          break;
        case MessageType.VIDEO:
          {
            _addLogToConsole(
              "receive video message, from: ${msg.from}",
            );
          }
          break;
        case MessageType.LOCATION:
          {
            _addLogToConsole(
              "receive location message, from: ${msg.from}",
            );
          }
          break;
        case MessageType.VOICE:
          {
            _addLogToConsole(
              "receive voice message, from: ${msg.from}",
            );
          }
          break;
        case MessageType.FILE:
          {
            _addLogToConsole(
              "receive image message, from: ${msg.from}",
            );
          }
          break;
        case MessageType.CUSTOM:
          {
            _addLogToConsole(
              "receive custom message, from: ${msg.from}",
            );
          }
          break;
        case MessageType.CMD:
          {}
          break;
        case MessageType.COMBINE:
          {}
          break;
      }
    }
  }

  void _addLogToConsole(String log) {
    _logText.add(_timeString + ": " + log);
    setState(() {
      scrollController.jumpTo(scrollController.position.maxScrollExtent);
    });
  }

  String get _timeString {
    return DateTime.now().toString().split(".").first;
  }
}

Run and test the project

选择要运行项目的设备，在quick_start目录中运行以下命令：

flutter run

以Android设备为例，如果样本项目运行正常，将出现以下用户界面：

在用户界面中执行以下操作以测试项目：

1. 登录：更改AgoraChatConfig中的信息为您的appKey和userId，agoraToken。点击SIGN IN按钮。
2. 发送消息：在Enter recipient's user Id框中填入接收者的userId，在Enter message框中键入要发送的消息（例如"hello"），然后点击SEND TEXT发送消息。
3. 登出：点击SIGN OUT退出应用程序。
4. 接收消息：登出后，更改AgoraChatConfig的userId和agoraToken，接收在第3步中发送的消息"hello"。

您可以检查日志以查看此示例的所有操作。

Next steps

出于演示目的，Agora Chat提供了一个应用程序服务器，使您能够快速使用本指南中给出的App Key检索token。在生产环境中，最佳实践是部署自己的token服务器，使用自己的App Key生成token，并在客户端检索token以登录Agora Chat服务。有关如何实现按需生成和提供token的服务器的信息，请参阅Generate a User Token。