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中已经实现该接收逻辑，详见ChatViewModel中setNIMMessageListener()方法。

   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 来完成自定义消息发送的展示。

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);
   

添加后，效果如下：