Flutter即时通讯插件mobile_chat_flutter的使用

Flutter即时通讯插件mobile_chat_flutter的使用

mobile_chat_flutter 插件可以帮助你在Flutter应用中管理客户关系，并通过聊天功能与客户进行交流。

安装

1. 预安装

a. 确保你的应用已经集成了 Firebase Cloud Messaging。 b. 在 mobile chat integration page 中创建移动聊天渠道集成，并确保完成以下步骤：

• 添加应用包名或bundle ID。
• 填写来自Firebase控制台的服务密钥（项目设置 -> 服务账号 -> 生成新的私有密钥）。

2. 安装 Mobile Chat Flutter

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

dependencies:
  mobile_chat_flutter: $latestSdkVersion

3. 添加权限

iOS项目中的 Info.plist

1. 在 Runner -> Info.plist 文件中添加 NSMicrophoneUsageDescription 和 NSCameraUsageDescription。
2. 添加以下内容到 Runner -> Info.plist 文件：

  <key>LSSupportsOpeningDocumentsInPlace</key>
  <true/>
  <key>UIFileSharingEnabled</key>
  <true/>

iOS项目的 Podfile

在 Podfile 中添加以下内容：

post_install do |installer|
  installer.pods_project.targets.each do |target|
    flutter_additional_ios_build_settings(target)
    target.build_configurations.each do |config|
      config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [
        '$(inherited)',
        'PERMISSION_CAMERA=1',
        'PERMISSION_MICROPHONE=1',
        'PERMISSION_PHOTOS=1',
      ]
    end
  end
end

Android项目的 AndroidManifest.xml

添加以下权限：

<uses-permission android:name="android.permission.POST_NOTIFICATIONS"/>
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />

同时，添加以下内容：

<provider
    android:name="com.pichillilorenzo.flutter_inappwebview_android.InAppWebViewFileProvider"
    android:authorities="${applicationId}.flutter_inappwebview_android.fileprovider"
    android:exported="false"
    android:grantUriPermissions="true">
    <meta-data
        android:name="android.support.FILE_PROVIDER_PATHS"
        android:resource="@xml/provider_paths" />
</provider>

使用

初始化

在每个使用 Mobile Chat Flutter 函数的 Dart 文件中添加以下导入：

import 'package:mobile_chat_flutter/mobile_chat_flutter.dart';

实现初始化函数，尽早将其引入你的应用中：

MobileChatInitialization.init(
    appId: string, 
    clientId: string, 
    secretKey: string, 
    externalId: string, 
    fullName: string
) : string

参数 appId, clientId, secretKey 可以在集成页面中找到。externalId 是客户的唯一标识符，fullName 是客户的全名。

示例初始化代码：

// 处理登录成功的函数
onLoginSuccessful(UserInfo userInfo) {
  //...
  MobileChatInitialization.init(
    "YOUR_APP_ID",
    "YOUR_CLIENT_ID",
    "YOUR_SECRET_KEY",
    "${userInfo.id}",
    "${userInfo.fullName}",
  );
  //...
}

聊天功能

MobileChatScreen 用于客户与代理进行聊天。

@override
Widget build(BuildContext context) {
  return MaterialApp(
        title: 'Your app title',
        onGenerateRoute: (settings) {
          final argument = settings.arguments;
          switch (settings.name) {
            case 'route-key-to-mobile-chat-screen':
              return MaterialPageRoute(
                builder: (_) => const MobileChatScreen(),
              );
          }
        }
  );
}

// 导航到移动聊天屏幕
navigator.pushNamed(context, 'route-key-to-mobile-chat-screen');

通知功能

注册客户的FCM令牌到移动聊天服务器以接收来自代理的通知：

registerMobileChatNotification(fcmToken: string) : string

为了区分移动聊天的有效负载和你自己的有效负载，可以使用以下函数：

isMobileChatPayload() : boolean

获取移动聊天组件是否已打开的状态：

isMobileChatOpened() : boolean

当用户从应用中登出时，可以停止接收通知，实现以下函数：

revokeNotification() : string

示例通知功能实现：

// 注册你的FCM令牌到移动聊天
FirebaseMessaging.instance.getToken().then((fcmToken) async {
    await MobileChatNotification.registerNotification(fcmToken ?? "");
});

// 处理来自移动聊天的通知
FirebaseMessaging.onMessage.listen((RemoteMessage remoteMessage) {
    if (MobileChatNotification.isMobileChatPayload(remoteMessage.toMap())) {
      if (!MobileChatNotification.isMobileChatOpened()) {
        // 处理移动聊天通知

      }
    } else {
      // 处理你自己的通知
    }
});