Flutter即时通讯插件meiqia_sdk_flutter的使用

meiqia_sdk_flutter

Pub

Platform	support
Android	✅
iOS	✅

安装

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

dependencies:
  meiqia_sdk_flutter: ^1.1.2

使用美洽

1. 初始化

String? errorMsg = await MQManager.init(appKey: '开发者自己的 appKey');
if(errorMsg == null) {
    // 成功
}

2. 启动对话界面

MQManager.instance.show();

常见使用场景

绑定账号

开发者的 App 有自己的账号系统，希望每个账号对应不同的顾客，有不同的聊天记录。那就需要开发者在启动对话的时候，绑定账号：

MQManager.instance.show(customizedId:'开发者自己系统的用户 id'); // 相同的 id 会被识别为同一个顾客

更新用户信息

开发者希望顾客上线的时候，能够上传（或者更新）一些用户的自定义信息：

Map<String,String> info = {
    'name': '富坚义博',
    'avatar': 'https://s3.cn-north-1.amazonaws.com.cn/pics.meiqia.bucket/1dee88eabfbd7bd4',
    'gender': '男',
    'tel': '13888888888',
    '技能1': '休刊'
};
// 设置顾客信息 PS: 这个接口只会生效一次,如果需要更新顾客信息,需要设置 update = true
// PS: 如果客服在工作台更改了顾客信息，更新顾客信息覆盖之前的内容
ClientInfo clientInfo = ClientInfo(info: info, update: false);
MQManager.instance.show(clientInfo: clientInfo);

指定客服分配

// agentId 可以从工作台查询
MQManager.instance.show(scheduledAgent: agentId );

指定客服分组分配

// groupId 可以从工作台查询
MQManager.instance.show(scheduledGroup: groupId);

设置预发送消息

预发送文字消息

MQManager.instance.show(preSendTextMessage: '我是预发送文字消息');

预发送商品卡片消息

// productCard 构造
ProductCard productCard = ProductCard(
    title: '商品的标题',
    pictureUrl: 'https://file.pisen.com.cn/QJW3C1000WEB/Product/201701/16305409655404.jpg', // 商品图片的链接
    description: '商品描述的内容',
    productUrl: 'https://meiqia.com', // 商品链接
    salesCount: 50); // 销量
// 预发送文字消息 
MQManager.instance.show(preSendProductCard: productCard);

设置链接点击监听

// ios 目前只支持商品卡片的点击回调
// 开发者自己处理 url 点击，注意：设置监听回调后,将不再跳转网页.如果需要跳转,开发者需要自行处理
MQManager.instance.show(linkTapCallback: (url) {
  debugPrint('clicked url = $url');
});

配置聊天页面 UI 样式

Style style = Style(
    navBarBackgroundColor: '#ffffff', // 设置导航栏的背景色
    navBarTitleTxtColor: '#ffffff', // 设置导航栏上的 title 的颜色
    incomingMsgTextColor: '#FF5733', // 设置接收到的消息文本的颜色
    incomingBubbleColor: '#DAF7A6', // 设置接收到的消息气泡的颜色
    outgoingMsgTextColor: '#3498DB', // 设置发送的消息文本的颜色
    outgoingBubbleColor: '#FFC300', // 设置发送的消息气泡的颜色
    backgroundColor: '#E8DAEF', // 设置聊天页面背景色
    enableShowClientAvatar: false, // 是否支持当前用户头像的显示
    enableSendVoiceMessage: true, // 是否支持发送语音消息
    enablePhotoLibraryEdit: false, // 是否支持相册选择图片可裁剪。默认支持裁剪
);
MQManager.instance.show(style: style);

关闭聊天页面

MQManager.instance.dismiss();

关闭美洽服务

MQManager.instance.closeMeiqiaService();

获取未读消息

final messages = await MQManager.instance.getUnreadMessages();

示例代码

以下是一个完整的示例代码，展示了如何使用 meiqia_sdk_flutter 插件。

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

void main() {
  runApp(const MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

enum InitState {
  empty,
  initing,
  success,
  fail,
}

class _MyAppState extends State<MyApp> {
  late InitState _initState;
  final appkey = ''; // 开发者的 appkey

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

  _initMeiqia() async {
    if (appkey.isNotEmpty) {
      _initState = InitState.initing;
      String? errorMsg = await MQManager.init(appKey: appkey);
      setState(() {
        if (errorMsg == null) {
          ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
            duration: Duration(seconds: 1),
            content: Text('初始化成功'),
          ));
          _initState = InitState.success;
        } else {
          _initState = InitState.fail;
        }
      });
    } else {
      _initState = InitState.empty;
    }
  }

  /// 默认界面
  _defaultChat() {
    MQManager.instance.show();
  }

  /// 配置定义用户id
  _setCustomizedId() {
    MQManager.instance.show(customizedId: '开发者自己系统的用户 id');
  }

  /// 配置顾客信息
  _setClientInfo() {
    Map<String, String> info = {
      'name': '富坚义博',
      'avatar':
          'https://s3.cn-north-1.amazonaws.com.cn/pics.meiqia.bucket/1dee88eabfbd7bd4',
      'gender': '男',
      'tel': '13888888888',
      '技能1': '休刊'
    };
    // 设置顾客信息 PS: 这个接口只会生效一次,如果需要更新顾客信息,需要设置 update = true
    // PS: 如果客服在工作台更改了顾客信息，更新顾客信息覆盖之前的内容
    ClientInfo clientInfo = ClientInfo(info: info, update: false);
    MQManager.instance.show(clientInfo: clientInfo);
  }

  /// 指定客服分配
  _setScheduledAgent() {
    // agentId 可以从工作台查询
    MQManager.instance.show(scheduledAgent: 'agentId');
  }

  /// 指定客服分组分配
  _setScheduledGroup() {
    MQManager.instance.show(scheduledGroup: '客服组的id');
  }

  /// 设置预发送文本消息
  _setPreSendTextMessage() {
    MQManager.instance.show(preSendTextMessage: '预发送的消息内容');
  }

  /// 设置预发送商品卡片消息
  _setPreSendProductCardMessage() {
    // productCard 构造
    ProductCard productCard = ProductCard(
        title: '商品的标题',
        pictureUrl:
            'https://file.pisen.com.cn/QJW3C1000WEB/Product/201701/16305409655404.jpg',
        // 商品图片的链接
        description: '商品描述的内容',
        productUrl: 'https://meiqia.com',
        // 商品链接
        salesCount: 50); // 销量
    // 预发送文字消息
    MQManager.instance.show(
        preSendProductCard: productCard,
        // 监听商品卡片点击
        linkTapCallback: (url) {
          debugPrint('点击了商品卡片的链接: $url');
          // 跳转到 flutter 的指定页面
          Navigator.push(context,
              MaterialPageRoute(builder: (context) => const SecondPage()));
          // 关闭对话页
          MQManager.instance.dismiss();
        });
  }

  /// 配置聊天页面 UI 样式
  _setStyle() {
    Style style = Style(
      navBarBackgroundColor: '#ffffff', // 设置导航栏的背景色
      navBarTitleTxtColor: '#ffffff', // 设置导航栏上的 title 的颜色
      incomingMsgTextColor: '#FF5733', // 设置接收到的消息文本的颜色
      incomingBubbleColor: '#DAF7A6', // 设置接收到的消息气泡的颜色
      outgoingMsgTextColor: '#000000', // 设置发送的消息文本的颜色
      outgoingBubbleColor: '#FFC300', // 设置发送的消息气泡的颜色
      backgroundColor: '#E8DAEF', // 设置聊天页面背景色
      enableShowClientAvatar: false, // 是否支持当前用户头像的显示
      enableSendVoiceMessage: true, // 是否支持发送语音消息
      enablePhotoLibraryEdit: false, // 是否支持相册选择图片可裁剪。默认支持裁剪
    );
    MQManager.instance.show(style: style);
  }

  /// 开发者自己处理 url 点击，注意：设置监听回调后,将不再跳转网页.如果需要跳转,开发者需要自行处理
  _setLinkTapCallback() {
    MQManager.instance.show(linkTapCallback: (url) {
      debugPrint('clicked url = $url');
    });
  }

  /// 获取未读消息
  _getUnreadMessages() async {
    final messages = await MQManager.instance.getUnreadMessages();
    debugPrint('未读消息: $messages');
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Plugin example app'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SizedBox(
                width: 80,
                height: 80,
                child: Image.asset('assets/images/logo.png')),
            const SizedBox(height: 80),
            if (_initState == InitState.empty)
              const Text('请先设置 appkey')
            else ...[
              if (_initState == InitState.initing) const Text('初始化中...'),
              if (_initState == InitState.fail)
                ElevatedButton(
                    onPressed: () => _initMeiqia(), child: const Text('重新初始化')),
              if (_initState == InitState.success)
                ElevatedButton(
                  onPressed: () =>
                      _initState == InitState.success ? _defaultChat() : null,
                  child: const Text('咨询客服'),
                )
            ]
          ],
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  const SecondPage({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('SecondPage'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () => Navigator.pop(context),
          child: const Text('返回'),
        ),
      ),
    );
  }
}

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

caililin 1楼

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

当然，以下是一个关于如何在Flutter项目中使用meiqia_sdk_flutter插件来实现即时通讯功能的示例代码。这个示例假定你已经有一个Flutter项目，并且已经配置好了meiqia_sdk_flutter插件。

首先，确保你的pubspec.yaml文件中已经添加了meiqia_sdk_flutter依赖：

dependencies:
  flutter:
    sdk: flutter
  meiqia_sdk_flutter: ^最新版本号  # 请替换为实际的最新版本号

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

接下来，在你的Flutter项目中，你可以按照以下步骤来初始化Meiqia SDK并实现基本的即时通讯功能。

1. 初始化Meiqia SDK

在你的主文件（通常是main.dart）中，初始化Meiqia SDK：

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  // 初始化Meiqia SDK
  Meiqia.initialize(
    appId: '你的Meiqia App ID',  // 请替换为你的Meiqia App ID
    channel: '你的渠道ID',       // 可选，根据你的需求填写
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Meiqia Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ChatScreen(),
    );
  }
}

2. 创建聊天界面

创建一个新的Dart文件（例如chat_screen.dart）来构建你的聊天界面：

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

class ChatScreen extends StatefulWidget {
  @override
  _ChatScreenState createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Meiqia Chat'),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: MeiqiaChatWidget(),  // 使用Meiqia提供的聊天小部件
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextField(
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: '发送消息',
              ),
              onSubmitted: (String message) {
                // 发送消息的逻辑，这里可以直接调用Meiqia SDK的发送消息方法（如果SDK提供了的话）
                // 注意：具体方法需要参考Meiqia SDK的文档，因为不同版本的SDK可能有不同的API
                // 例如：Meiqia.sendMessage(message);  // 假设存在这样的方法
              },
            ),
          ),
        ],
      ),
    );
  }
}

注意：上面的代码示例中，Meiqia.sendMessage(message); 是一个假设的方法调用，实际使用时你需要参考Meiqia SDK的官方文档来发送消息。由于Meiqia SDK的具体API可能随着版本更新而变化，因此确保你查看的是与你项目中使用的SDK版本相匹配的文档。

3. 处理Meiqia事件（可选）

你可能还需要处理一些Meiqia事件，比如客服连接状态、消息接收等。这通常涉及到监听Meiqia SDK提供的事件流。

// 示例：监听客服连接状态变化（具体方法需要参考Meiqia SDK文档）
// Meiqia.onAgentStatusChanged.listen((status) {
//   // 处理客服状态变化
// });

同样，上面的代码是一个假设的示例，你需要根据Meiqia SDK的实际API来实现。

总结

上面的代码示例展示了如何在Flutter项目中使用meiqia_sdk_flutter插件来初始化Meiqia SDK并创建一个简单的聊天界面。然而，由于Meiqia SDK的具体API可能会随着版本更新而变化，因此强烈建议你查阅Meiqia SDK的官方文档来获取最新的API信息和示例代码。