接收消息
功能描述
通过
addAdvancedMsgListener
监听接收所有类型消息(文本、自定义、富媒体消息),相关回调在 V2TimAdvancedMsgListener
协议中定义。设置消息监听器
高级消息监听器
添加监听器
示例代码如下:
import { TencentImSDKPlugin } from 'react-native-tim-js';TencentImSDKPlugin.v2TIMManager.getMessageManager().addAdvancedMsgListener({onRecvC2CReadReceipt: ( receiptList) {},// C2C 对端用户会话已读通知(对端用户调用 markC2CMessageAsRead,自己会收到该通知)onRecvMessageModified: ( message) {},// 消息内容被修改onRecvMessageReadReceipts: ( receiptList) {},// 消息已读回执通知(如果自己发送的消息支持已读回执,消息接收端调用 sendMessageReadReceipts,自己会收到该通知)onRecvMessageRevoked: ( messageid) {},// 收到消息撤回的通知onRecvNewMessage: ( message) {},// 收到新消息onSendMessageProgress: ( message, progress) {},// 上传消息进度事件});
移除监听器
示例代码如下:
import { TencentImSDKPlugin } from 'react-native-tim-js';// 创建listenerconst listener = {onRecvC2CReadReceipt: (receiptList) {},onRecvMessageModified: (message) {},onRecvMessageReadReceipts: (receiptList) {},onRecvMessageRevoked: (messageid) {},onRecvNewMessage: (message) {},onSendMessageProgress: (message, progress) {},};// 注册listenerTencentImSDKPlugin.v2TIMManager.getMessageManager().addAdvancedMsgListener(listener);// 移除listenerTencentImSDKPlugin.v2TIMManager.getMessageManager().removeAdvancedMsgListener(listener);
接收文本消息
接收方使用高级消息监听器接收单聊、群聊文本消息,需要以下几步:
1. 调用
addAdvancedMsgListener
设置事件监听器。2. 监听
onRecvNewMessage
(点击查看详情) 回调,在其中接收文本消息。3. 希望停止接收消息,调用
removeAdvancedMsgListener
移除监听。该步骤不是必须的,客户可以按照业务需求调用。代码示例如下:
import { TencentImSDKPlugin, MessageElemType} from 'react-native-tim-js';const listener = {onRecvC2CReadReceipt: (receiptList) {},onRecvMessageModified: (message) {},onRecvMessageReadReceipts: (receiptList) {},onRecvMessageRevoked: (messageid) {},onRecvNewMessage: (message) {if(message.elemType == MessageElemType.V2TIM_ELEM_TYPE_TEXT){const text = message.textElem.text;}},onSendMessageProgress: (message, progress) {},};TencentImSDKPlugin.v2TIMManager.getMessageManager().addAdvancedMsgListener(listener);
接收自定义消息
接收方使用高级消息监听器接收单聊、群聊自定义消息,需要以下几步:
1. 调用
addAdvancedMsgListener
设置事件监听器。2. 监听
onRecvNewMessage
(点击查看详情) 回调,在其中接收自定义消息。3. 希望停止接收消息,调用
removeAdvancedMsgListener
移除监听。该步骤不是必须的,客户可以按照业务需求调用。代码示例如下:
import { TencentImSDKPlugin, MessageElemType} from 'react-native-tim-js';const listener = {onRecvC2CReadReceipt: (receiptList) {},onRecvMessageModified: (message) {},onRecvMessageReadReceipts: (receiptList) {},onRecvMessageRevoked: (messageid) {},onRecvNewMessage: (message) {if(message.elemType == MessageElemType.V2TIM_ELEM_TYPE_CUSTOM){const text = message.textElem.text;const data = message.customElem.data;const desc = message.customElem.desc;const ext = message.customElem.extension;}},onSendMessageProgress: (message, progress) {},};TencentImSDKPlugin.v2TIMManager.getMessageManager().addAdvancedMsgListener(listener);
接收富媒体消息
接收富媒体消息只能使用高级消息监听器,需要以下几步:
1. 接收方调用
addAdvancedMsgListener
接口设置高级消息监听。2. 接收方通过监听回调
onRecvNewMessage
(点击查看详情) 获取消息 V2TimMessage。3. 接收方解析 V2TIMMessage 消息中的 elemType 属性,并根据其类型进行二次解析,获取消息内部 Elem 中的具体内容。
4. 希望停止接收消息,调用
removeAdvancedMsgListener
移除监听。该步骤不是必须的,客户可以按照业务需求调用。图片消息
一个图片消息会包含三种格式大小的图片,分别为原图、大图、微缩图(SDK 会在发送图片消息的时候自动生成微缩图、大图,客户不需要关心)
大图:是将原图等比压缩。压缩后宽、高中较小的一个等于 720 像素。
缩略图:是将原图等比压缩。压缩后宽、高中较小的一个等于 198 像素。
多媒体消息在获取消息列表时不返回消息的url,需通过getMessageOnlineUrl (点击查看详情)获取。
多媒体消息不默认不再返回 localurl,需通过 downloadMessage (点击查看详情) 下载消息成功后才会返回。
示例代码向您演示如何从 V2TimMessage 中解析出图片消息内容:
import { TencentImSDKPlugin, MessageElemType} from 'react-native-tim-js';const listener = {onRecvC2CReadReceipt: (receiptList) {},onRecvMessageModified: (message) {},onRecvMessageReadReceipts: (receiptList) {},onRecvMessageRevoked: (messageid) {},onRecvNewMessage: (message) {if(message.elemType == MessageElemType.V2TIM_ELEM_TYPE_IMAGE){const path = message.imageElem.path; // 图片上传时的路径,消息发送者才会有这个字段,消息发送者可用这个字段将图片预先上屏,优化上屏体验。message.imageElem.imageList.map(item => { // 遍历大图、原图、缩略图// 解析图片属性const height = item.height;const localUrl = item.localUrl;const size = item.size;const type = item.type; // 大图 缩略图 原图const url = item.url;const uuid = item.uuid;const width = item.width;})}TencentImSDKPlugin.v2TIMManager.getMessageManager().getMessageOnlineUrl(message.msgID);TencentImSDKPlugin.v2TIMManager.getMessageManager().downloadMessage(message, 3, 0, false);},onSendMessageProgress: (message, progress) {},};TencentImSDKPlugin.v2TIMManager.getMessageManager().addAdvancedMsgListener(listener: listener);
视频消息
接收方收到视频消息后,一般需要在聊天界面显示一个视频预览图,当用户点击消息后,才会触发视频的播放。
所以这里需要两步:
多媒体消息在获取消息列表时不返回消息的url,需通过getMessageOnlineUrl (点击查看详情)获取。
多媒体消息不默认不再返回 localurl,需通过 downloadMessage (点击查看详情) 下载消息成功后才会返回。
示例代码向您演示如何从 V2TimMessage 中解析出视频消息内容:
if (message.elemType == MessageElemType.V2TIM_ELEM_TYPE_VIDEO) {// 解析视频消息属性,封面、播放地址、宽高、大小等。message.videoElem.UUID;message.videoElem.duration;message.videoElem.localSnapshotUrl;message.videoElem.localVideoUrl;message.videoElem.snapshotHeight;message.videoElem.snapshotPath;// ...TencentImSDKPlugin.v2TIMManager.getMessageManager().getMessageOnlineUrl(message.msgID);TencentImSDKPlugin.v2TIMManager.getMessageManager().downloadMessage(message, 5, 0, true);}
语音消息
多媒体消息在获取消息列表时不返回消息的url,需通过getMessageOnlineUrl (点击查看详情)获取。
多媒体消息不默认不再返回 localurl,需通过 downloadMessage (点击查看详情) 下载消息成功后才会返回。
示例代码向您演示如何从 V2TimMessage 中解析出语音消息内容:
if (message.elemType == MessageElemType.V2TIM_ELEM_TYPE_SOUND) {// 解析语音消息 播放地址,本地地址,大小,时长等。message.soundElem.UUID;message.soundElem.dataSize;message.soundElem.duration;message.soundElem.localUrl;message.soundElem.url;// ...TencentImSDKPlugin.v2TIMManager.getMessageManager().getMessageOnlineUrl(message.msgID);TencentImSDKPlugin.v2TIMManager.getMessageManager().downloadMessage(message, 4, 0, true);}
文件消息
React Native SDK 会在空闲时间将语音消息下载到 App 本地,开发者可直接使用即可,本地文件消息在 APP 卸载时清除
示例代码向您演示如何从 V2TimMessage 中解析出文件消息内容:
if (message.elemType == MessageElemType.V2TIM_ELEM_TYPE_FILE) {// 解析文件消息 文件名、文件大小、url等message.fileElem.UUID;message.fileElem.fileName;message.fileElem.fileSize;message.fileElem.localUrl;message.fileElem.path;message.fileElem.url;TencentImSDKPlugin.v2TIMManager.getMessageManager().getMessageOnlineUrl(message.msgID);TencentImSDKPlugin.v2TIMManager.getMessageManager().downloadMessage(message, 6, 0, true);}
地理位置消息
接收到地理位置消息后,接收放可直接从
locationElem
中解析出经纬度信息。
示例代码向您演示如何从 V2TimMessage 中解析出地理位置消息内容:if (message.elemType == MessageElemType.V2TIM_ELEM_TYPE_LOCATION) {// 解析地理位置消息,经纬度、描述等message.locationElem.desc;message.locationElem.latitude;message.locationElem.longitude;}
表情消息
例如发送方可设置 index = 1, data = "x12345",表示 “微笑“ 表情。
接收方收到表情消息后解析出 1 和 "x12345",按照预设的规则将其展示为 “微笑“ 表情。
示例代码向您演示如何从 V2TIMMessage 中解析出表情消息内容:
if (message.elemType == MessageElemType.V2TIM_ELEM_TYPE_FACE) {message.faceElem.data;message.faceElem.index;}
群 tips 消息
群 tips 消息表示群组中,除了普通消息以外,用户会接收到的提示类消息。例如 “管理员将 alice 移除群聊” “bob 修改了群名称为 xxxx” 等。
说明:
群 tips 消息只有群聊成员会收到,单聊成员收不到。
接收方接受到群 tips 消息后,一般需要做:
1. 解析出
V2TIMGroupTipsElem
中的各个字段2. 根据 type 判断这个 tips 消息是什么类型
3. 根据类型,结合其他的字段,组装要显示的内容。
举个例子:
接收方解析出 type =
V2TIM_GROUP_TIPS_TYPE_GROUP_INFO_CHANGE
,表示这是个群资料变更通知。
接收方可以从 opMember
中获取到操作者信息,再从 groupChangeInfoList
获取到修改后的群名称。
此时,接收方可以将 “操作者” 和 “修改后的群名称” 组装起来,构造出一条群提示。例如 “alice 修改了群名称为 group123”。示例代码向您演示如何从 V2TIMMessage 中解析出群 tips 消息内容:
if (message.elemType == MessageElemType.V2TIM_ELEM_TYPE_GROUP_TIPS) {message.groupTipsElem.groupID; // 所属群组message.groupTipsElem.type; // 群Tips类型message.groupTipsElem.opMember; // 操作人资料message.groupTipsElem.memberList; // 被操作人资料message.groupTipsElem.groupChangeInfoList; // 群信息变更详情message.groupTipsElem.memberChangeInfoList; // 群成员变更信息message.groupTipsElem.memberCount; // 当前群在线人数}
接收多个 Elem 的消息
1. 通过 Message 对象正常解析出第一个 Elem 对象。
2. 通过第一个 Elem 对象的 nextElem 方法获取下一个 Elem 对象,如果下一个 Elem 对象存在,会返回 Elem 对象实例,如果不存在,会返回 null。
示例代码如下:
if (message.textElem.nextElem != null) {// 有下一个消息}