Flutter实时聊天功能插件livechat_sdk_flutter的使用

Flutter实时聊天功能插件livechat_sdk_flutter的使用

livechat_sdk_flutter 是一个用于实现 Flutter 应用中实时聊天功能的插件。它支持 Android 和 iOS 平台，并通过插件集成在线客服模块。

支持的平台

  • Android
  • iOS

如何使用

导入插件

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

dependencies:
  livechat_sdk_flutter: ^0.0.1

然后在 Dart 文件中导入插件：

import 'package:livechat_sdk_flutter/livechat_sdk_flutter.dart';

可以在页面的合适位置（如 initState 方法内）实例化 FlutterTosKit 类：

final _flutterTosKitPlugin = FlutterTosKit();

初始化插件

调用 initPlugin 方法初始化插件，传入必要的配置参数：

_flutterTosKitPlugin.initPlugin({
  "enterpriseId": "8000001", // 企业号
  "accessId": "8758096679544ff189d4a9457747f109", // 访问标识
  "accessSecret": "72EBF29CB4614F7AB404EEC07BFF0B1B", // 访问秘钥
  "apiUrl": "https://xxx.com", // 平台 apiUrl
  "onlineUrl": "https://xxx.com", // 平台 onlineUrl
  "debug": true, // 是否开启调试模式
});

参数说明

参数名称 类型 必填 说明
accessId String 是 访问标识
accessSecret String 是 访问秘钥
enterpriseId String 是 企业号
apiUrl String 是 平台 apiUrl
onlineUrl String 是 平台 onlineUrl
debug boolean 否 是否开启调试模式
advanceParams Map 否 自定义可配参数

进入聊天会话

调用 enterSession 方法进入聊天会话，传入用户信息和其他参数：

_flutterTosKitPlugin.enterSession({
  "nickname": 'uniapp体验用户名', // 用户昵称
  "headUrl": 'https://img2.baidu.com/it/u=1229468480,2938819374&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500', // 用户头像
  "mobile": '135xxxx9206', // 手机号
  "advanceParams": { // 自定义参数
    "enableMqtt": false,
  },
  "title": "在线客服aaa", // 页面标题
  "cardInfo": { // 商品卡片消息
    "subTitle": "华为P40麒麟990 5G SoC芯片 5000万超感知徕卡三摄 30倍数字变焦",
    "description": "这是商品描述，啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦",
    "price": "￥ 100",
    "time": "2022年3月1日",
    "img": "https://img1.baidu.com/it/u=1963848283,2056721126&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500",
    "status": "已到货",
    "extraInfo": "[{\"name\":\"订单号\",\"value\":\"13049234802304\"},{\"name\":\"服务地区\",\"value\":\"北京市\"},{\"name\":\"服务\",\"value\":\"满意\"},{\"name\":\"产品类型\",\"value\":\"电子产品\"}]"
  }
});

参数说明

参数名称 类型 必填 说明
visitorId String 否 用户 App 的 userID
nickname String 否 昵称
headUrl String 否 头像地址
mobile String 否 手机号
advanceParams Map 否 自定义参数
title String 否 页面标题
cardInfo Map 否 商品卡片消息

商品卡片消息参数说明

参数名称 类型 必填 说明
subTitle String 否 标题
description String 否 描述
price String 否 价格
time String 否 时间
img String 否 商品图片
status String 否 送货状态
extraInfo String 否 附加信息（JSON 字符串）

示例代码

以下是一个完整的示例代码，展示如何在 Flutter 中使用 livechat_sdk_flutter 插件：

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:livechat_sdk_flutter/livechat_sdk_flutter.dart';

void main() {
  if (Platform.isAndroid) {
    // 设置 Android 头部的状态栏透明，字体颜色为黑色
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
        statusBarIconBrightness: Brightness.dark));
  }
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final _flutterTosKitPlugin = FlutterTosKit();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: Text('LiveChat SDK 示例')),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              // 初始化插件
              await _flutterTosKitPlugin.initPlugin({
                "enterpriseId": "8000001",
                "accessId": "8758096679544ff189d4a9457747f109",
                "accessSecret": "72EBF29CB4614F7AB404EEC07BFF0B1B",
                "apiUrl": "https://xxx.com",
                "onlineUrl": "https://xxx.com",
                "debug": true,
              });

              // 进入聊天会话
              await _flutterTosKitPlugin.enterSession({
                "nickname": 'uniapp体验用户名',
                "headUrl": 'https://img2.baidu.com/it/u=1229468480,2938819374&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
                "mobile": '135xxxx9206',
                "advanceParams": {"enableMqtt": false},
                "title": "在线客服aaa",
                "cardInfo": {
                  "subTitle": "华为P40麒麟990 5G SoC芯片",
                  "description": "这是商品描述，啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦",
                  "price": "￥ 100",
                  "time": "2022年3月1日",
                  "img": "https://img1.baidu.com/it/u=1963848283,2056721126&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500",
                  "status": "已到货",
                  "extraInfo": "[{\"name\":\"订单号\",\"value\":\"13049234802304\"},{\"name\":\"服务地区\",\"value\":\"北京市\"},{\"name\":\"服务\",\"value\":\"满意\"},{\"name\":\"产品类型\",\"value\":\"电子产品\"}]"
                }
              });
            },
            child: Text('开始聊天'),
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


livechat_sdk_flutter 是一个用于在 Flutter 应用中集成实时聊天功能的插件。它允许你轻松地将实时聊天功能集成到你的 Flutter 应用中，并与 LiveChat 服务进行交互。

以下是使用 livechat_sdk_flutter 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 livechat_sdk_flutter 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  livechat_sdk_flutter: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 初始化插件

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

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 初始化 LiveChat SDK
  await LiveChatSDK.initialize(
    licenseId: 'YOUR_LICENSE_ID',  // 你的 LiveChat 许可证 ID
    groupId: 'YOUR_GROUP_ID',      // 你的 LiveChat 组 ID（可选）
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'LiveChat Demo',
      home: ChatScreen(),
    );
  }
}

3. 启动聊天界面

在你的应用中使用 LiveChatSDK.startChat 方法来启动聊天界面：

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

class ChatScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('LiveChat'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            // 启动聊天界面
            await LiveChatSDK.startChat(
              context: context,
              visitorName: 'John Doe',  // 访客名称
              visitorEmail: 'john.doe@example.com',  // 访客邮箱
            );
          },
          child: Text('Start Chat'),
        ),
      ),
    );
  }
}

4. 处理聊天事件

你可以监听聊天事件，例如收到新消息、聊天结束等：

LiveChatSDK.onMessageReceived.listen((message) {
  print('New message received: ${message.text}');
});

LiveChatSDK.onChatEnded.listen((_) {
  print('Chat ended');
});

5. 自定义聊天界面

你可以通过 LiveChatSDK.customizeChat 方法来自定义聊天界面的外观和行为：

await LiveChatSDK.customizeChat(
  chatBackgroundColor: Colors.white,
  bubbleColor: Colors.blue,
  bubbleTextColor: Colors.white,
  hideAvatar: false,
);

6. 处理用户会话

你可以获取当前的用户会话信息，并在需要时结束会话：

final session = await LiveChatSDK.getCurrentSession();
if (session != null) {
  print('Current session ID: ${session.sessionId}');
  await LiveChatSDK.endChat();
}

7. 处理错误

在集成过程中，可能会遇到各种错误。你可以通过 try-catch 块来捕获和处理这些错误：

try {
  await LiveChatSDK.startChat(
    context: context,
    visitorName: 'John Doe',
    visitorEmail: 'john.doe@example.com',
  );
} catch (e) {
  print('Error starting chat: $e');
}
回到顶部