Flutter即时通讯插件chatsasa_chat_sdk的使用

Flutter即时通讯插件chatsasa_chat_sdk的使用

欢迎使用ChatSasa Chat-SDK。此SDK允许您轻松地将聊天功能集成到您的Flutter移动应用中。

更新日志

请查看pub.dev上的更新日志，以了解包的最新更改。

开始使用

为了开始使用ChatSasa Chat-SDK，您需要首先在ChatSasa开发者仪表板上创建一个账户。

以下是开始使用的步骤：

• 在developer.chatsasa.com仪表板上创建一个账户。
• 创建一个组织。
• 创建一个应用。
• 向您的应用添加用户。

API 集成

• 在后端应用中，使用提供的API端点来注册和登录用户。
• 向移动用户提供ChatSasa-API令牌。

添加Flutter依赖

在项目的pubspec.yaml文件中添加chatsasa_chat_sdk依赖，并使用最新版本。

dependencies:
  chatsasa_chat_sdk: ^latest_version

然后运行以下命令：

flutter packages get

聊天主题和品牌

公司名称和Logo图标

要在聊天列表页面上添加您的Logo图标。

步骤：

• 将您的Logo添加到assets文件夹下，在项目根目录下创建一个assets文件夹（如果不存在）。
• 在pubspec.yaml文件中启用资源路径：

# To add assets to your application, add an assets section, like this:
assets:
  - assets/

• 在初始化SDK时传递公司名称和Logo图像名称：

await ChatSasaChatSDK().initSDK("company_name", "logo_name.extension");

初始化

在main.dart文件中初始化ChatSasa SDK：

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

Future<void> main() async {
  // 初始化SDK
  WidgetsFlutterBinding.ensureInitialized();
  await ChatSasaChatSDK().initSDK("company_name", "logo_name.extension"); 
  runApp(const MyApp());
}

前提条件

• 用于用户认证的认证Chat-API令牌（chatApiToken） - 在成功创建组织后从后端获取。
• 应用程序ID（appId），通常从developer.chatsasa.com仪表板获取。
• 用于应用的Firebase FCM令牌（fcmToken），用于推送通知支持。如果您打算使用推送通知进行实时消息更新，请确保您已经从Firebase Cloud Messaging为您的应用获取了FCM令牌。此令牌是启用ChatSasa chat-SDK内推送通知所必需的。

使用

要列出您的聊天频道，请使用以下代码：

chatApiToken: 'Your chat-api-token',
appId: 'Your chat-api application_id',
fcmToken: 'Your fcm_token'

示例

import 'package:chatsasa_chat_sdk/export.dart';
import 'package:chatsasa_chat_sdk/chatsasa_chat_sdk.dart';
import 'package:flutter/material.dart';

Future<void> main() async {
  // 初始化SDK
  WidgetsFlutterBinding.ensureInitialized();
  await ChatSasaChatSDK().initSDK("company_name", "logo_name.extension"); 
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Chat-SDK Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('ChatSasa Chat-SDK Demo'),
      ),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'ChatSasa Demo',
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 启动ChatSasa聊天频道
          Navigator.push(
              context,
              MaterialPageRoute(
                  builder: (_) => const ChatChannels(
                      chatApiToken: 'Your chat-api-token',
                      appId: 'Your chat-api application_id',
                      fcmToken: 'Your fcm_token')));
        },
        child: const Icon(Icons.message),
      ),
    );
  }
}

添加FCM推送消息

要将Firebase Cloud Messaging集成到您的应用中，请遵循以下步骤：

前景通知

要在应用前景时启用FCM通知，请修改FirebaseMessaging.onMessage.listen()方法如下：

var fcmApiClient = await ChatSasaChatSDK().initFCM();
FirebaseMessaging.onMessage.listen((message) {
  // 添加这段代码

  ChatSasaChatSDK().handleFCMEvents(message.data);
  var notificationMessage = ChatSasaChatSDK()
      .getForegroundFCMNotification(fcmApiClient, message.data);
  if (notificationMessage == null) {
    return;
  }
  // 显示来自flutter_local_notifications包的LocalNotificationService的通知，您可以使用其他偏好通知包

  LocalNotificationService()
      .showNotificationAndroid(notificationMessage);

  // 结束
});

后台通知

要在应用后台运行时接收FCM通知，请修改_firebaseMessagingBackgroundHandler方法如下：

@pragma('vm:entry-point')
Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
  // 添加这段代码

  var notificationMessage =
      await ChatSasaChatSDK().getBackgroundFCMNotification(message.data);
  if (notificationMessage == null) {
    return;
  }
  // 来自flutter_local_notifications包的LocalNotificationService的通知，您可以使用其他偏好通知包

  LocalNotificationService()
      .showNotificationAndroid(notificationMessage);

  // 结束
}

修改您的showNotificationAndroid方法如下：

void showNotificationAndroid(Map<String, dynamic> data) async {
  var title = data['title'];
  var value = data['value'];
  var channelId = data['channelId'];
  var channelName = data['channelName'];
  AndroidNotificationDetails androidNotificationDetails =
      AndroidNotificationDetails(channelId, channelName,
          importance: Importance.max,
          priority: Priority.high,
          ticker: 'ticker');

  int notificationId = 1;
  NotificationDetails notificationDetails =
      NotificationDetails(android: androidNotificationDetails);

  await flutterLocalNotificationsPlugin.show(
      notificationId, title, value, notificationDetails,
      payload: 'Not present');
}