Flutter实时聊天插件chatsasa_livechat的使用

Flutter实时聊天插件chatsasa_livechat的使用

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

开始使用

要开始使用ChatSasa实时聊天SDK，您需要一个管理员/代理账户和一个组织来处理传入的消息。

以下是开始使用的步骤：

  • 在Chatsasa上注册。
  • 创建一个组织。
  • 创建一个客户支持小部件。
  • 创建一个客户支持频道。
  • 将客户支持频道链接到小部件（转到您的小部件并点击编辑）。
  • 复制并传递widgetUUID给Flutter SDK。

添加依赖

在您的包的pubspec.yaml文件中添加以下内容，并使用最新版本。

dependencies:
  chatsasa_livechat: ^latest_version

然后运行flutter packages get。

初始化

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

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

Future<void> main() async {
  // 初始化SDK
  WidgetsFlutterBinding.ensureInitialized();
  var chatSDK = ChatSasaLiveChat();
  chatSDK.initSDK();
  runApp(const MyApp());
}

使用

要在主组件文件中启动聊天小部件，请使用以下代码：

您需要在AppUserModel下传递用户详细信息。UserIdentifier字段是必需的。通过提供widgetUUID和appUserModel来启动聊天窗口。

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

Future<void> main() async {
  // 初始化SDK
  WidgetsFlutterBinding.ensureInitialized();
  var chatSDK = ChatSasaLiveChat();
  chatSDK.initSDK();
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "ChatSasa Live-Chat Example",
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 创建一个聊天用户
    // userIdentifier 是必填字段
    var sampleAppUser = AppUserModel(
      name: 'user',
      email: 'user@gmail.com',
      userIdentifier:
          'user@gmail.com', // userIdentifier 是您用来唯一标识ChatSasa API上的用户的任何内容
    );
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blue,
        title: const Text(
          "ChatSasa Live-Chat Example",
          style: TextStyle(color: Colors.white),
        ),
      ),
      body: Center(
        child: Container(),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Navigator.push(
              context,
              MaterialPageRoute(
                  builder: (_) => LiveChatChannels(
                      widgetUUID:
                          "YOUR_WIDGET_UUID", // 替换为您的小部件UUID
                      appUserModel: sampleAppUser)));
        },
        tooltip: '启动实时聊天',
        child: const Icon(Icons.chat_bubble_outline),
      ),
    );
  }
}

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

1 回复

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


chatsasa_livechat 是一个用于在 Flutter 应用中实现实时聊天功能的插件。它可以帮助开发者快速集成聊天功能，支持文本、图片、视频等多种消息类型。以下是如何使用 chatsasa_livechat 插件的基本步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 chatsasa_livechat 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  chatsasa_livechat: ^1.0.0  # 请检查最新版本

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

2. 初始化插件

在应用的 main.dart 文件中初始化 chatsasa_livechat 插件：

import 'package:chatsasa_livechat/chatsasa_livechat.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 初始化 Chatsasa LiveChat
  await ChatsasaLiveChat.initialize(
    apiKey: 'YOUR_API_KEY',
    userId: 'USER_ID',
    userName: 'USER_NAME',
  );

  runApp(MyApp());
}
  • apiKey: 你在 Chatsasa 平台获取的 API Key。
  • userId: 当前用户的唯一标识。
  • userName: 当前用户的显示名称。

3. 启动聊天界面

在你的应用中，可以通过调用 ChatsasaLiveChat.launch() 来启动聊天界面：

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

class ChatScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Live Chat'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            ChatsasaLiveChat.launch(context);
          },
          child: Text('Start Chat'),
        ),
      ),
    );
  }
}

4. 处理消息回调

你可以通过设置回调来处理收到的消息：

ChatsasaLiveChat.setOnMessageReceivedCallback((message) {
  print('Received message: ${message.content}');
});

5. 发送消息

你可以通过 ChatsasaLiveChat.sendMessage() 方法发送消息：

ChatsasaLiveChat.sendMessage('Hello, this is a test message!');

6. 其他功能

chatsasa_livechat 还支持其他功能，如发送图片、视频、文件等。你可以参考插件的文档来了解更多高级用法。

7. 处理用户退出

当用户退出应用或不再需要聊天功能时，可以调用 ChatsasaLiveChat.dispose() 来释放资源：

@override
void dispose() {
  ChatsasaLiveChat.dispose();
  super.dispose();
}

8. 自定义 UI

如果你需要自定义聊天界面的 UI，chatsasa_livechat 也提供了相应的 API 来获取聊天数据并构建自定义界面。

9. 调试和错误处理

在开发过程中，确保捕获和处理可能的错误：

try {
  await ChatsasaLiveChat.initialize(
    apiKey: 'YOUR_API_KEY',
    userId: 'USER_ID',
    userName: 'USER_NAME',
  );
} catch (e) {
  print('Error initializing Chatsasa LiveChat: $e');
}
回到顶部