腾讯云即时通信IMWeb_AI解决方案_同尘科技

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

基本消息类型

消息类型	显示效果图
文本类消息	
图片类消息	
语音类消息	
视频类消息	
文件类消息	

自定义消息

如果基本消息类型不能满足您的需求，您可以根据实际业务需求自定义消息。
TUIKit 中内置了几种自定义消息样式，如下图所示：

自定义消息预设样式	显示效果图
超文本类消息	
评价类消息	
订单类消息	

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

展示自定义消息

TUIKit 内置的自定义消息 cell 元素如下图所示：自定义类消息和其他普通类型消息接收方式一致，所有类型消息都通过监听TIM.EVENT.MESSAGE_RECEIVED事件来获取。
收到的自定义消息根据相应的具体类型字段以不同的形式展示在消息列表中 。
下面我们讲解下如何展示自定义消息。

创建自定义消息展示结构

自定义消息的展示主要通过在 messageBubble 的内容区渲染 messgaeCustom 实现。
您可以在路径 src/TUIKit/TUIComponents/container/TUIChat/components/message-custom.vue 文件下新增您需要的自定义消息展示结构样式。
以超文本类型消息展示结构为例，示例代码如下：

    
                
{{isCustom.text}}
                {{$t('message.custom.查看详情>>')}}    

发送自定义消息

您可以通过调用路径 src/TUIKit/TUIComponents/container/TUIChat/server.ts 文件中的 sendCustomMessage 方法来发送一条自定义消息。 sendCustomMessage 接收一个参数 data ， data 会被作为消息 Message 的 payload 字段发送，其中参数 data 数据里面自定义一个 businessID 字段来唯一标识这条自定义消息类型。您可以通过构建不同的 data 数据项来实现发送不同类型的自定义消息。
发送超文本类自定义消息示例代码如下：

const custom = {    data: {        // 自定义消息类型的标识字段        businessID: constant.typeTextLink,        // 超文本类自定义消息文字说明部分        text: '欢迎加入腾讯云IM大家庭',        // 超文本类自定义消息超链接部分        link: 'https://buy.cloud.tencent.com/avc',    },    description: '欢迎加入腾讯云IM大家庭',    extension: '欢迎加入腾讯云IM大家庭',};sendCustomMessage(custom);// 调用 sendCustomMessage 方法发送自定义消息



对即时通讯IM解决方案有疑惑？想了解解决方案收费？ 联系解决方案专家

腾讯云限时活动1折起，即将结束： 马上收藏

同尘科技为腾讯云授权服务中心，购买腾讯云享受折上折，更有现金返利:同意关联，立享优惠

阿里云解决方案也看看？： 点击对比阿里云的解决方案