Overview
All types of messages (text, custom, and rich media messages) are listened for and received with the addAdvancedMsgListener
API, with the callbacks defined in the protocol of V2TimAdvancedMsgListener
.
Setting Message Listeners
Advanced message listener
Adding a listener
The receiver calls the addAdvancedMsgListener
API to add the advanced message listener. It is recommended to call the API early (such as after the chat page is initialized) to ensure timely message receiving in the application. Sample code:
import { TencentImSDKPlugin } from 'react-native-tim-js';
TencentImSDKPlugin.v2TIMManager.getMessageManager().addAdvancedMsgListener(
{
onRecvC2CReadReceipt: ( receiptList) {},
onRecvMessageModified: ( message) {},
onRecvMessageReadReceipts: ( receiptList) {},
onRecvMessageRevoked: ( messageid) {},
onRecvNewMessage: ( message) {},
onSendMessageProgress: ( message, progress) {},
}
);
Removing a listener
Sample code:
import { TencentImSDKPlugin } from 'react-native-tim-js';
const listener = {
onRecvC2CReadReceipt: (receiptList) {},
onRecvMessageModified: (message) {},
onRecvMessageReadReceipts: (receiptList) {},
onRecvMessageRevoked: (messageid) {},
onRecvNewMessage: (message) {},
onSendMessageProgress: (message, progress) {},
};
TencentImSDKPlugin.v2TIMManager
.getMessageManager()
.addAdvancedMsgListener(listener);
TencentImSDKPlugin.v2TIMManager.getMessageManager().removeAdvancedMsgListener(listener);
Receiving Text Messages
The receiver can receive a one-to-one or group text message with the advanced message listener in the following steps:
1. Call addAdvancedMsgListener
to set the event listener.
3. To stop receiving messages, call removeAdvancedMsgListener
to remove the listener. This step is optional and can be performed as needed.
Sample code:
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);
Receiving Custom Messages
The receiver can receive a custom one-to-one or group message with the advanced message listener in the following steps:
1. Call addAdvancedMsgListener
to set the event listener.
3. To stop receiving messages, call removeAdvancedMsgListener
to remove the listener. This step is optional and can be performed as needed.
Sample code:
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);
The receiver can receive a rich media message only with the advanced message listener in the following steps:
1. Call the addAdvancedMsgListener
API to set the advanced message listener.
3. Parse the elemType
attribute in the V2TIMMessage
message, and then parse the message again according to the type to get the specific content of the elements in the message.
4. To stop receiving messages, call removeAdvancedMsgListener
to remove the listener. This step is optional and can be performed as needed.
Image message
The image in an image message can be in three formats: original, large, and thumbnail. The latter two are automatically generated by the SDK during message sending and can be ignored.
Large
(large image): A large image is an image obtained after the original image is proportionally compressed. After the compression, the height or width (whichever is shorter) is equal to 720 pixels.
Thumb
(thumbnail): A thumbnail is an image obtained after the original image is proportionally compressed. After the compression, the height or width (whichever is shorter) is equal to 198 pixels.
The message URL is not returned when the list of rich media messages is obtained, and it needs to be obtained through getMessageOnlineUrl
.
The local URL of a rich media message is no longer returned by default and will be returned after the message is downloaded successfully through downloadMessage
. The following sample code demonstrates how to parse the image content from 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);
Video message
After a video message is received, a video preview is displayed on the chat page, and the video is played back after the user clicks the message.
Two steps are required:
The message URL is not returned when the list of rich media messages is obtained, and it needs to be obtained through getMessageOnlineUrl
.
The local URL of a rich media message is no longer returned by default and will be returned after the message is downloaded successfully through downloadMessage
. The following sample code demonstrates how to parse the video content from 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);
}
Audio message
The message URL is not returned when the list of rich media messages is obtained, and it needs to be obtained through getMessageOnlineUrl
.
The local URL of a rich media message is no longer returned by default and will be returned after the message is downloaded successfully through downloadMessage
. The following sample code demonstrates how to parse the audio content from 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);
}
File message
The React Native SDK will download file messages when free, which can be directly used by you and will be cleared when the application is uninstalled.
The following sample code demonstrates how to parse the file content from V2TimMessage
:
if (message.elemType == MessageElemType.V2TIM_ELEM_TYPE_FILE) {
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);
}
Geographical location message
After receiving the geographical location message, the receiver can parse the latitude and longitude information directly from locationElem
.
The following sample code demonstrates how to parse the geographical location content from V2TimMessage
:
if (message.elemType == MessageElemType.V2TIM_ELEM_TYPE_LOCATION) {
message.locationElem.desc;
message.locationElem.latitude;
message.locationElem.longitude;
}
Emoji message
The SDK only provides a message passthrough channel for an emoji message. For message content fields, see faceElem
, where the contents of index
and data
are customized by the user. For example, the sender can set index
to 1
and data
to x12345
to indicate the smile emoji.
The receiver parses the received emoji message as 1
and x12345
and displays the message as the smile emoji according to the preset rules.
The following sample code demonstrates how to parse the emoji content from V2TIMMessage
:
if (message.elemType == MessageElemType.V2TIM_ELEM_TYPE_FACE) {
message.faceElem.data;
message.faceElem.index;
}
Group tip message
Group tip messages are tips received by users other than ordinary messages in a group chat, such as "The admin removed alice from the group chat" and "bob renamed the group "xxxx"".
Note:
Group tip messages apply to group members only.
After receiving a group tip message, the receiver generally needs to:
1. Parse all fields in V2TIMGroupTipsElem
.
2. Identify the message type according to type
.
3. Merge other fields into the content for display according to the type.
Example:
V2TIM_GROUP_TIPS_TYPE_GROUP_INFO_CHANGE
is parsed from the type
, indicating that this is a notification of group profile change.
The receiver can get the operator information from opMember
and the new group name from groupChangeInfoList
.
At this point, the receiver can merge the "operator" and "new group name" to create a group tip, such as "Alice renamed the group as "group123"".
The following sample code demonstrates how to parse the tip content from V2TIMMessage
:
if (message.elemType == MessageElemType.V2TIM_ELEM_TYPE_GROUP_TIPS) {
message.groupTipsElem.groupID;
message.groupTipsElem.type;
message.groupTipsElem.opMember;
message.groupTipsElem.memberList;
message.groupTipsElem.groupChangeInfoList;
message.groupTipsElem.memberChangeInfoList;
message.groupTipsElem.memberCount;
}
Receiving Messages Containing Multiple Element Objects
1. Parse the first element object from the Message
object.
2. Get the next element object through the nextElem
method of the first element object. If the next object exists, an element object instance is returned; otherwise, null
is returned.
Sample code:
if (message.textElem.nextElem != null) {
}
Was this page helpful?