Web
Feature Description
The message reaction feature refers to interactive reactions to a particular message, with emoji reaction being a typical example. Emoji reactions are made using emojis. For each emoji, we can see the number of reactors and the list of reactors for each emoji.
The common emoji reaction display methods currently include the following two styles:
Style One | |
Style Two | |
Users can paginate and pull the profiles of all users who used a specific emoji.
You can implement the emoji reaction capability based on the SDK API:
Call the
addMessageReaction
API to add an emoji to a message. After a successful addition, the information of the user who performed the operation will be stored under the emoji.Call the
removeMessageReaction
API to delete an already added emoji. After successful deletion, the information of the user who performed the operation will no longer be stored under the emoji.Call the
getMessageReactions
API to batch pull the emoji list of multiple messages, where each emoji includes the total number of users currently using it and the profiles of the first N (default 10) users.Call the
getAllUserListOfMessageReaction
API to paginate and pull the full list of user profiles for users of a message emoji.Listen to the
TencentCloudChat.EVENT.MESSAGE_REACTIONS_UPDATE
event to detect changes in the user information of emoji users. This event will carry the latest user information of the emoji (including the total number of users and the profiles of the first N users).Note:
Supported from v3.2.0, this feature is only available to advanced customers. After purchasing the advanced edition, you can use it.
Adding Message Reaction
API
chat.addMessageReaction(message, reactionID);
Parameters
Attribute | Meaning | Description |
message | Message object | The message must be sent successfully. |
reactionID | Message reaction ID | In emoji reaction scenarios, the reactionID is the emoji ID. |
Note:
A single message supports up to 10 reactions, and a single reaction supports up to 100 users.
If the number of reactions for a single message exceeds the maximum limit (10), the API call will return error code 23005.
If the number of users for a single reaction exceeds the maximum limit (100), the API call will return error code 23006.
If the reaction already includes the current user, the API call will return error code 23007.
Returned Value
Promise
Sample
let promise = chat.addMessageReaction(message, 'smile');promise.then(function(imResponse) {// Message reaction was added successfully.}).catch(function(imError) {// Failed to add message reaction.console.warn('addMessageReaction error:', imError);});
Deleting Message Reaction
API
chat.removeMessageReaction(message, reactionID);
Parameters
Attribute | Meaning | Description |
message | Message object | The message must be sent successfully. |
reactionID | Message reaction ID | In emoji reaction scenarios, the reactionID is the emoji ID. |
Note:
If the reaction does not exist, the API call will return error code 23008.
If the reaction does not include the current user, the API call will return error code 23009.
Returned Value
Promise
Sample
let promise = chat.removeMessageReaction(message, 'smile');promise.then(function(imResponse) {// Message reaction was deleted successfully.}).catch(function(imError) {// Failed to delete message reaction.console.warn('removeMessageReaction error:', imError);});
Batch Pulling Multiple Message Reactions
API
chat.getMessageReactions(options);
Parameters
Attribute | Meaning | Description |
messageList | Message list | Messages must belong to the same session and must be sent successfully. |
maxUserCountPerReaction | The maximum number of user profiles returned for each reaction | The value range is from 0 to 10. Each reaction returns the profiles of up to the first 10 users only. For more user profiles, you can call the getAllUserListOfMessageReaction API as needed for paginated pulling. |
Returned Value
Promise
Sample
let promise = chat.getMessageReactions({messageList: [message1, message2],maxUserCountPerReaction: 10,});promise.then(function(imResponse) {// Batch pulling succeeded.const resultList = imResponse.data;resultList.forEach((item) => {const { messageID, reactionList } = item;// The information returned by reactionList is as follows:// reactionID - Message reaction ID// totalUserCount - Total number of users who reacted with the same reactionID// partialUserList - A partial list of users with the same reactionID, including user's userID, nick, and avatar information});}).catch(function(imError) {// Batch pulling failed.console.warn('getMessageReactions error:', imError);});
Paginated Pulling of the Full Message Reaction User List
Call the getAllUserListOfMessageReaction API for paginated pulling of the full message reaction user list.
API
chat.getAllUserListOfMessageReaction(options);
Parameters
Attribute | Meaning | Description |
message | Message object | The message must be sent successfully. |
reactionID | Message reaction ID | In emoji reaction scenarios, the reactionID is the emoji ID. |
nextSeq | Paginated pulling cursor | For the first time, pass 0, and then for later pages, pass the nextSeq returned by succ. |
count | Maximum number of items that can be pulled in a single page | Supports up to 100. |
Returned Value
Promise
Sample
let promise = chat.getAllUserListOfMessageReaction({message: message,reactionID: 'smile',nextSeq: 0,count: 100,});promise.then(function(imResponse) {// Obtained successfully.const { userList, nextSeq, isCompleted } = imResponse.data;// userList - User information list, including user's userID, nick, and avatar information// nextSeq - This field must be passed in for the next page.// isCompleted - Indicates whether all user information has been pulled. When isCompleted is true, nextSeq is 0.}).catch(function(imError) {// Failed to obtain.console.warn('getAllUserListOfMessageReaction error:', imError);});
Message Reaction Information Update
When the message reaction information changes, the SDK will dispatch the TencentCloudChat.EVENT.MESSAGE_REACTIONS_UPDATED event. You can obtain the updated message reaction information in the registered callback.
Note:
When the totalUserCount field value in the changed reaction information is 0, it indicates that no users are using that reaction anymore. You can remove the display of that reaction from the UI.
Sample
let onMessageReactionsUpdated = function(event) {const { messageID, reactionList } = event.data;// messageID - Message ID// reactionList - Message reaction update listreactionList.forEach((item) => {const { reactionID, totalUserCount, partialUserList } = item;// reactionID - Message reaction ID// totalUserCount - Total number of users who reacted with the same reactionID// partialUserList - A partial list of users with the same reactionID});};chat.on(TencentCloudChat.EVENT.MESSAGE_REACTIONS_UPDATED, onMessageReactionsUpdated);