即时通信 IM Flutter(添加自定义消息)

TUIKit 默认实现了文本、图片、语音、视频、文件等基本消息类型的发送和展示,如果这些消息类型满足不了你的需求,可以以新增自定义消息类型。

相关产品
即时通信 IM 产品页,含版本规格、价格与购买入口。

一、自定义消息

如果基本消息类型不能满足你的需求,你可以根据实际业务需求自定义消息。

下文以发送一条可跳转至浏览器的超文本作为自定义消息为例,帮助你快速了解实现流程。

如下:

下面我们分步骤讲解使用自定义消息。

二、展示自定义消息

自定义消息是在 custom_message_widget.dart 中渲染的,消息内容以 String 格式,存储于 customMessage.data 中,建议使用 JSON 格式。

展示自定义消息基本逻辑:解析时,将 JSON String 解析成 Map,用于实例化一个预定义的类,以该对象内的数据,渲染自定义消息体。

1. 定义一个类,用于自定义消息解析后的结构。并完成一个 fromJSON 的方法,通过 Map 对其实例化。
以上述包含链接及文本的自定义消息格式举例:

class CustomMessage { String? link; String? text; String? businessID; CustomMessage.fromJSON(Map json) { link = json["link"]; text = json["text"]; businessID = json["businessID"]; }}

2. 在 _buildDefaultCustomMessage 方法中对自定义消息的解析,得到 CustomMessage 数据对象,通过 _buildTextLinkMessage 渲染消息。

示例代码如下:

Widget _buildDefaultCustomMessage( BuildContext context, SemanticColorScheme colorsTheme, AtomicLocalizations atomicLocale,) { final customMessageData = message.messageBody?.customMessage; final customContent = ChatUtil.jsonData2Dictionary(customMessageData?.data); // 处理 text_link 类型的自定义消息 if (customContent != null) { final customMessage = CustomMessage.fromJSON(customContent); if (customMessage.businessID == 'text_link') { return _buildTextLinkMessage(context, colorsTheme, customMessage); } }} Widget _buildTextLinkMessage( BuildContext context, SemanticColorScheme colorsTheme, CustomMessage customMessage,) { final text = customMessage.text ?? ''; final link = customMessage.link ?? ''; return Container( constraints: BoxConstraints( maxWidth: maxWidth * 0.7, ), padding: const EdgeInsets.fromLTRB(16, 12, 16, 12), decoration: BoxDecoration( color: isSelf ? colorsTheme.buttonColorPrimaryDefault : colorsTheme.bgColorDefault, borderRadius: BorderRadius.circular(12), ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [ Text( text, style: TextStyle( color: isSelf ? colorsTheme.textColorAntiPrimary : colorsTheme.textColorPrimary, fontSize: 14, fontWeight: FontWeight.w500, ), ), const SizedBox(height: 8), GestureDetector( onTap: () => _launchUrl(link), child: Text( '查看详情', style: TextStyle( color: isSelf ? colorsTheme.textColorAntiPrimary : colorsTheme.buttonColorPrimaryDefault, fontSize: 14, fontWeight: FontWeight.w400, decoration: TextDecoration.underline, decorationColor: isSelf ? colorsTheme.textColorAntiPrimary : colorsTheme.buttonColorPrimaryDefault, ), ), ), ], ), );}

3. 在 message_utils.dart 中的 getMessageAbstract方法里,对增加的自定义消息类型进行解析,用于生成在会话列表中的文字摘要。

示例代码如下:

static String getMessageAbstract( MessageInfo? messageInfo, BuildContext context, {bool showMergedTitle = false}) { switch (messageInfo.messageType) { // 省略其他类型消息 // 自定义消息文字摘要 case MessageType.custom: final customMessage = messageInfo.messageBody?.customMessage; if (customMessage == null) { return localizations.messageTypeCustom; } // 省略部分代码 final customInfo = ChatUtil.jsonData2Dictionary(customMessage.data); if (customInfo != null) { // 省略其他自定义消息解析 // 解析增加的自定义消息 if (customInfo['businessID'] == 'text_link') { return customInfo['text']?.toString() ?? localizations.messageTypeCustom; } } return localizations.messageTypeCustom; default: return ''; }}

效果如下:

三、发送自定义消息

发送自定义消息基本步骤:创建一条自定义消息,将要发送的内容转成 JSON String 格式放入 data 中,并调用 MessageInputStore 的 sendMessage 接口发送。

示例代码如下:

// 创建 MessageInputStore 对象MessageInputStore _messageInputStore = MessageInputStore.create(conversationID: widget.conversationID);// 构造自定义消息final messageInfo = MessageInfo();messageInfo.messageType = MessageType.custom;MessageBody messageBody = MessageBody();messageBody.customMessage = CustomMessageInfo( data: '{"businessID":"text_link","link":"https://cloud.tencent.com/document/product/269/3794","text":"欢迎加入腾讯云IM大家庭!"}',);messageInfo.messageBody = messageBody;// 发送消息await _messageInputStore.sendMessage(message: messageInfo);

赞 (0)
上一篇 4天前
下一篇 4天前