实现自定义消息收发

更新时间: 2024/03/15 18:26:22

IM UIKit 会话消息模块(nim_chatkit_ui)默认实现了文本消息、图片消息等基本消息类型的发送和展示。如果这些消息类型无法满足您的业务需求,您可新增自定义消息类型

基本消息类型

消息类型
显示效果 是否需要额外集成
文本消息 否,集成会话界面即可用
图片消息 否,集成会话界面即可用
语音消息 否,集成会话界面即可用
视频消息 否,集成会话界面即可用
表情 否,集成会话界面即可用
文件消息 否,集成会话界面即可用
地理位置 是,见实现地理位置消息功能

前提条件

集成会话消息界面

实现流程

步骤1:实现自定义消息收发

  1. 创建自定义消息。

    dart    MessageBuilder.createCustomMessage(sessionId: sessionId,
        sessionType: sessionType,
    content: "content",
    attachment: NIMCustomMessageAttachment(
      //todo custom info
      data: {
        
      }
    ),
    config: NIMCustomMessageConfig(
      //todo custom cofig
    ));
    
  2. 发送消息。

    创建好自定义消息后可以调用ChatMessageRepo.sendMessage发送消息,如果是回复消息可调用ChatMessageRepo.replyMessage回复消息。

    • 发送消息
    dart//ChatMessageRepo提供的发送消息接口,任何消息类型都可以使用该接口进行发送
    //resend 表示是否重发
      ChatMessageRepo.sendMessage(message: message, resend: resend)
          .then((value) {
        _onMessageSend(value, chatMessage);
      });
    
    
    • 回复消息
    dart//replyMessage 比sendmessage 多一个replyMsg 参数,代表被回复的消息
    //resend 表示是否重发
      ChatMessageRepo.replyMessage(
              msg: message, replyMsg: replyMsg, resend: resend)
          .then((value) {
        _onMessageSend(value, chatMessage);
      });
    
    
  3. 消息接收。

    IM UIkit中已经实现该接收逻辑,详见ChatViewModelsetNIMMessageListener()方法。

    dart//new message
    subscriptions.add(
        ChatServiceObserverRepo.observeReceiveMessage().listen((event) async {
      _logI('receive msg -->> ${event.length}');
      if (event.length > 0) {
        _logI('onMessage 0:${event[0].toMap()}');
      }
      List<NIMMessage> list = event.where((element) {
        return element.sessionId == sessionId && !_isFilterMessage(element);
      }).toList();
      if (list.isNotEmpty) {
        var res = await ChatMessageRepo.fillUserInfo(list);
        _messageList.addAll(res);
        notifyListeners();
      }
    }));
    
    

步骤2:添加自定义消息 UI 展示

在会话界面下方的“更多”区域里,扩展 UI 来完成自定义消息发送的展示。

image
  1. ChatUIConfig中传入moreAciton,用以发送自定义消息。

    dartChatUIConfig(moreActions: [
      ActionItem(
          type: 'custom',
          icon: Icon(Icons.android_outlined),
          title: "自定义",
          onTap: (BuildContext context) async {
            var vm = context.read<ChatViewModel>();
            var msg = await MessageBuilder.
            //创建自定义消息
            createCustomMessage(
                sessionId: vm.sessionId,
                sessionType: vm.sessionType,
                content: '自定义消息');
            if (msg.isSuccess && msg.data != null) {
              Fluttertoast.showToast(msg: '发送自定义消息!');
              //发送
              vm.sendMessage(msg.data!);
            }
          }),
    ], messageBuilder: messageBuilder);
    
    
  2. ChatUIConfig中传入自定义消息的构造方法。

    dart//1. 构造messageBuilder,并在扩展方法对象中传入custom对应的builder 方法
    ChatKitMessageBuilder messageBuilder = ChatKitMessageBuilder();
    messageBuilder.extendBuilder = {
      NIMMessageType.custom:(message){
        ///todo 自定义message展示
        return Container();
      }
    };
    //2.  传入ChatUIConfig
    ChatUIConfig(messageBuilder: messageBuilder);
    

添加后,效果如下:

此文档是否对你有帮助?
有帮助
去反馈
  • 基本消息类型
  • 前提条件
  • 实现流程
  • 步骤1:实现自定义消息收发
  • 步骤2:添加自定义消息 UI 展示