Flutter即时通讯插件quickblox_sdk的使用

Flutter即时通讯插件quickblox_sdk的使用

快速开始

本指南展示了如何将Quickblox Flutter SDK连接到您的项目并开始开发。

创建一个新的应用程序在管理面板中

Quickblox应用程序包括所有将消息传递直接集成到您应用程序的功能，如聊天、视频通话、用户管理、推送通知等。要创建一个QuickBlox应用程序，请按照以下步骤操作：

1. 注册一个新账户。输入您的电子邮件和密码进行登录。您也可以使用Google或Github账户登录。
2. 点击“新建应用”按钮创建应用程序。
3. 配置应用程序。在相应的字段中输入有关您组织的信息，并点击“添加”按钮。
4. 进入凭据页面。找到“凭据”组框，复制您的“Application ID”、“Authorization Key”和“Authorization Secret”。这些数据是运行您的应用程序所需的。

将Flutter SDK安装到您的应用程序中

要从头开始创建一个带有QuickBlox SDK的Flutter聊天应用程序，请按照以下步骤操作：

1. 安装Flutter（请根据您的平台选择合适的安装方式）。
2. 运行flutter create myapp创建一个新的项目。
3. 在项目的根目录下的pubspec.yaml文件中的dependencies部分添加QuickBlox SDK。

dependencies:
  quickblox_sdk: 0.16.1

发送第一条消息

初始化Quickblox SDK

使用您的应用程序凭据初始化框架。将appId、authKey、authSecret和accountKey传递给QB.settings.init方法，如下所示。结果是，您的应用程序详细信息将存储在服务器数据库中，并可以在后续识别。

const String APP_ID = "XXXXX";
const String AUTH_KEY = "XXXXXXXXXXXX";
const String AUTH_SECRET = "XXXXXXXXXXXX";
const String ACCOUNT_KEY = "XXXXXXXXXXXX";
const String API_ENDPOINT = ""; // 可选
const String CHAT_ENDPOINT = ""; // 可选

try {
  await QB.settings.init(APP_ID, AUTH_KEY, AUTH_SECRET, ACCOUNT_KEY,
      apiEndpoint: API_ENDPOINT, chatEndpoint: CHAT_ENDPOINT);
} on PlatformException catch (e) {
  // 发生了一些错误，查看异常消息以获取更多详细信息
}

用户授权

为了使用QuickBlox SDK的功能，您需要在服务器上授权您的应用程序，登录您的账户并创建会话。调用QB.auth.login方法并传递login和password参数，如下所示。

try {
  QBLoginResult result = await QB.auth.login(login, password);
  QBUser qbUser = result.qbUser;
  QBSession qbSession = result.qbSession;
} on PlatformException catch (e) {
  // 发生了一些错误，查看异常消息以获取更多详细信息
}

注意！ 在调用任何SDK方法之前，必须先初始化SDK，除了初始化QuickBlox实例的方法。如果尝试在未连接的情况下调用方法，将返回错误。

连接到聊天

要连接到聊天服务器，使用以下代码片段：

try {
  await QB.chat.connect(userId, userPassword);
} on PlatformException catch (e) {
  // 发生了一些错误，查看异常消息以获取更多详细信息
}

创建对话

QuickBlox提供了三种类型的对话：1-1对话、群组对话和公共对话。

让我们创建一个1-1对话。调用QB.chat.createDialog方法并传递QBChatDialogTypes.CHAT参数作为对话类型。QBChatDialogTypes.CHAT参数允许指定两个参与者将参与对话。

try {
  QBDialog createdDialog = await QB.chat.createDialog(occupantsIds, dialogName, dialogType: dialogType);
} on PlatformException catch (e) {
  // 发生了一些错误，查看异常消息以获取更多详细信息
}

订阅接收消息

QuickBlox提供了一个聊天事件处理器，允许客户端应用程序接收聊天中发生的事件通知。因此，当对话创建后，用户可以订阅接收新消息的通知。调用QB.chat.subscribeChatEvent方法并传递QBChatEvents.RECEIVED_NEW_MESSAGE作为事件参数，如下所示。

StreamSubscription? _someSubscription;

[@override](/user/override)
void dispose() {
  if (_someSubscription != null) {
    _someSubscription!.cancel();
    _someSubscription = null;
  }
}

...

String event = QBChatEvents.RECEIVED_NEW_MESSAGE;

try {
  _someSubscription = await QB.chat.subscribeChatEvent(event, (data) {
    Map<dynamic, dynamic> map = Map<dynamic, dynamic>.from(data);
    Map<dynamic, dynamic> payload = Map<dynamic, dynamic>.from(map["payload"]);
    String? messageId = payload["id"];
  });
} on PlatformException catch (e) {
  // 发生了一些错误，查看异常消息以获取更多详细信息
}

发送消息

当对话创建后，用户可以发送消息。调用QB.chat.sendMessage方法并指定dialogId和body参数。如果希望此消息保存在聊天历史记录中，传递saveToHistory参数。

try {
  await QB.chat.sendMessage(dialogId, body: messageBody, saveToHistory: true);
} on PlatformException catch (e) {
  // 发生了一些错误，查看异常消息以获取更多详细信息
}

完整示例Demo

以下是一个完整的示例Demo，展示了如何使用Quickblox SDK实现基本的聊天功能。

import 'package:flutter/material.dart';
import 'package:quickblox_sdk/quickblox_sdk.dart';
import 'package:quickblox_sdk/models/qb_dialog.dart';
import 'package:quickblox_sdk/models/qb_chat_message.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(home: MainScreen());
  }
}

class MainScreen extends StatefulWidget {
  [@override](/user/override)
  _MainScreenState createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  final TextEditingController _messageController = TextEditingController();
  List<QBChatMessage> _messages = [];
  StreamSubscription? _chatSubscription;

  [@override](/user/override)
  void initState() {
    super.initState();
    _initializeQuickblox();
  }

  [@override](/user/override)
  void dispose() {
    if (_chatSubscription != null) {
      _chatSubscription!.cancel();
      _chatSubscription = null;
    }
    super.dispose();
  }

  Future<void> _initializeQuickblox() async {
    const String APP_ID = "YOUR_APP_ID";
    const String AUTH_KEY = "YOUR_AUTH_KEY";
    const String AUTH_SECRET = "YOUR_AUTH_SECRET";
    const String ACCOUNT_KEY = "YOUR_ACCOUNT_KEY";

    try {
      await QB.settings.init(APP_ID, AUTH_KEY, AUTH_SECRET, ACCOUNT_KEY);

      // 登录用户
      QBLoginResult loginResult = await QB.auth.login("your_login", "your_password");
      QBUser qbUser = loginResult.qbUser;
      QBSession qbSession = loginResult.qbSession;

      // 连接聊天
      await QB.chat.connect(qbUser.id, "your_password");

      // 创建1-1对话
      List<int> occupantsIds = [qbUser.id, 2]; // 假设另一个用户的ID为2
      QBDialog createdDialog = await QB.chat.createDialog(occupantsIds, "Test Dialog", dialogType: QBChatDialogTypes.CHAT);

      // 订阅接收新消息
      String event = QBChatEvents.RECEIVED_NEW_MESSAGE;
      _chatSubscription = await QB.chat.subscribeChatEvent(event, (data) {
        Map<dynamic, dynamic> map = Map<dynamic, dynamic>.from(data);
        Map<dynamic, dynamic> payload = Map<dynamic, dynamic>.from(map["payload"]);
        QBChatMessage message = QBChatMessage.fromMap(payload);
        setState(() {
          _messages.add(message);
        });
      });

      // 发送测试消息
      await QB.chat.sendMessage(createdDialog.id, body: "Hello, this is a test message!", saveToHistory: true);
    } on PlatformException catch (e) {
      print("Error: ${e.message}");
    }
  }

  void _sendMessage(String message) async {
    if (message.isNotEmpty) {
      try {
        await QB.chat.sendMessage("DIALOG_ID", body: message, saveToHistory: true);
        _messageController.clear();
      } on PlatformException catch (e) {
        print("Error sending message: ${e.message}");
      }
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Quickblox Chat Demo'),
        centerTitle: true,
      ),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: _messages.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(_messages[index].body),
                  subtitle: Text("From: ${_messages[index].senderId}"),
                );
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _messageController,
                    decoration: InputDecoration(hintText: "Enter message"),
                  ),
                ),
                IconButton(
                  icon: Icon(Icons.send),
                  onPressed: () => _sendMessage(_messageController.text),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}