Reaction

Emojis are widely used in real-time chats because they allow users to express their feelings in a direct and vivid way. In Chat, "reactions" allow users to quickly react to a message using emojis in one-to-one chats and chat groups. In group chats, reactions can also be used to cast a vote, for example, by calculating the number of different emojis attached to the message.

The following illustration shows the implementation of adding a reaction to a message, how a conversation looks with reactions, and what retrieving a list of reactions (with related information) looks like.

Understand the tech

The SDK provides the following APIs to implement reaction functionalities:

• asyncAddReaction: Adds a reaction to the specified message.
• asyncRemoveReaction: Removes the reaction from the specified message.
• asyncGetReactionList: Retrieves a list of reactions from the server.
• asyncGetReactionDetail: Retrieves the details of the reaction from the server.
• ChatMessage.getMessageReaction: Retrieves a list of reactions from the ChatMessage objects in the local database.

Prerequisites

Before proceeding, ensure that your environment meets the following requirements:

• The project integrates a version of the Chat SDK later than v1.0.3 and has implemented the basic real-time chat functionalities.
• You understand the API call frequency limit as described in Limitations.

Implementation

This section introduces how to implement reaction functionalities in your project.

Add a reaction

Call asyncAddReaction to add a reaction to the specified message. In a one-to-one conversation, the peer user receives the onReactionChanged event. In a group conversation, other group members than the operator receive this event. This event contains the conversation ID, message ID, reaction list of the message, and reaction operation list (ID of the new reaction, user ID of the user that adds the reaction, and the addition operation).

For a reaction, a user can add only once, or the error 1301 is reported for repeated addition.

// Add a reaction
ChatClient.getInstance().chatManager().asyncAddReaction(message.getMsgId(), reaction, new CallBack() {
            @Override
            public void onSuccess() {

            }
            @Override
            public void onError(int error, String errorMsg) {

            }
            @Override
            public void onProgress(int i, String s) {
            }
        });
// Listen for the state of the reaction.
public class MyClass implements MessageListener {
    private void init() {
        ChatClient.getInstance().chatManager().addMessageListener(this);
    }
    @Override
    public void onReactionChanged(List list) {

    }
}

Remove a reaction

Call asyncRemoveReaction to remove the specified reaction. In a one-to-one conversation, the peer user receives the onReactionChanged event. In a group conversation, other group members than the operator receive this event. This event contains the conversation ID, message ID, reaction list of the message, and reaction operation list (ID of the removed reaction, user ID of the user that removes the reaction, and the removal operation).

// Remove the reaction.
ChatClient.getInstance().chatManager().asyncRemoveReaction(message.getMsgId(), reaction, new CallBack() {
            @Override
            public void onSuccess() {

            }
            @Override
            public void onError(int error, String errorMsg) {

            }
            @Override
            public void onProgress(int i, String s) {
            }
        });
// Listen for reaction state change.
public class MyClass implements MessageListener {
    private void init() {
        ChatClient.getInstance().chatManager().addMessageListener(this);
    }
    @Override
    public void onReactionChanged(List list) {

    }
}

Retrieve a list of reactions

Call asyncGetReactionList to retrieve a list of reactions of messages from the server. This method also returns the basic information of the reactions, including the content of the reaction, the number of users that added or removed the reaction, and a list of the first three user IDs that added or removed the reaction.

ChatClient.getInstance().chatManager().asyncGetReactionList(msgIdList, ChatMessage.ChatType.Chat, groupId, new ValueCallBack>>() {
            @Override
            public void onSuccess(Map> stringListMap) {

            }
            @Override
            public void onError(int i, String s) {

            }
   });

Retrieve the details of the reaction

Call asyncGetReactionDetail to get the detailed information of the reaction from the server. The detailed information includes the reaction content, the number of users that added or removed the reaction, and the complete list of user IDs that added or removed the reaction.

ChatClient.getInstance().chatManager().asyncGetReactionDetail(mMsgId, emojiconId, pageCurosr, 30, new ValueCallBack>() {
                    @Override
                    public void onSuccess(CursorResult messageReactionCursorResult) {

                    }
                    @Override
                    public void onError(int i, String s) {

                    }
                });

Next steps

Reactions are also supported in the Chat UIKit, which contains a wider range of emojis. You can also use the Chat SDK to implement reactions in your project.

Emojis are widely used in real-time chats because they allow users to express their feelings in a direct and vivid way. In Chat, "reactions" allow users to quickly react to a message using emojis in one-to-one chats and chat groups. In group chats, reactions can also be used to cast a vote, for example, by calculating the number of different emojis attached to the message.

The following illustration shows the implementation of adding a reaction to a message, how a conversation looks with reactions, and what retrieving a list of reactions (with related information) looks like.

Understand the tech

The SDK provides the following APIs to implement reaction functionalities:

• addReaction: Adds a reaction to the specified message.
• removeReaction: Removes the reaction from the specified message.
• getReactionList: Retrieves a list of reactions from the server.
• getReactionDetail: Retrieves the details of the reaction from the server.
• AgoraChatMessage.reactionlist: Retrieves a list of reactions from the AgoraChatMessage objects in the local database.

Prerequisites

Before proceeding, ensure that your environment meets the following requirements:

• The project integrates a version of the Chat SDK later than v1.0.3 and has implemented the basic real-time chat functionalities.
• You understand the API call frequency limit as described in Limitations.

Implementation

This section introduces how to implement reaction functionalities in your project.

Add a reaction

Call addReaction to add a reaction to the specified message. In a one-to-one conversation, the peer user receives the messageReactionDidChange event. In a group conversation, other group members than the operator receive this event. This event contains the conversation ID, message ID, reaction list of the message, and reaction operation list (reaction ID, user ID of the user that adds the reaction, and the addition operation).

For a reaction, a user can add only once, or the error 1301 is reported for repeated addition.

// Add a reaction
[AgoraChatClient.sharedClient.chatManager addReaction:"reaction" toMessage:"messageId" completion:^(AgoraChatError * _Nullable error) {
  refreshBlock(error, changeSelectedStateHandle);
}];
// Listen for the state of the reaction.
- (void)messageReactionDidChange:(NSArray *)changes
{

}

Remove a reaction

Call removeReaction to remove the specified reaction. In a one-to-one conversation, the peer user receives the messageReactionDidChange event. In a group conversation, other group members than the operator receive this event. This event contains the conversation ID, message ID, reaction list of the message, and reaction operation list (ID of the removed reaction, user ID of the user that removes the reaction, and the removal operation).

// Remove the reaction.
[AgoraChatClient.sharedClient.chatManager removeReaction:"reaction" fromMessage:"messageId" completion:^(AgoraChatError * _Nullable error) {
  refreshBlock(error, changeSelectedStateHandle);
}];
// Listen for reaction state change.
- (void)messageReactionDidChange:(NSArray *)changes
{

}

Retrieve a list of reactions

Call getReactionList to retrieve a list of reactions of messages from the server. This method also returns the basic information of the reactions, including the content of the reaction, the number of users that added or removed the reaction, and a list of the first three user IDs that added or removed the reaction.

[AgoraChatClient.sharedClient.chatManager getReactionList:@["messageId"] groupId:@"groupId" chatType:AgoraChatTypeChat completion:^(NSDictionary * _Nonnull, AgoraChatError * _Nullable) {

}];

Retrieve the details of the reaction

Call getReactionDetail to get the detailed information of the reaction from the server. The detailed information includes the reaction content, the number of users that added or removed the reaction, and the complete list of user IDs that added or removed the reaction.

[AgoraChatClient.sharedClient.chatManager getReactionDetail:@"messageId" reaction:@"reaction" cursor:nil pageSize:30 completion:^(AgoraChatMessageReaction * _Nonnull, NSString * _Nullable cursor, AgoraChatError * _Nullable) {

}];

Next steps

Reactions are also supported in the Chat UIKit, which contains a wider range of emojis. You can also use the Chat SDK to implement reactions in your project.

Emojis are widely used in real-time chats because they allow users to express their feelings in a direct and vivid way. In Chat, "reactions" allow users to quickly react to a message using emojis in one-to-one chats and chat groups. In group chats, reactions can also be used to cast a vote, for example, by calculating the number of different emojis attached to the message.

The following illustration shows the implementation of adding a reaction to a message, how a conversation looks with reactions, and what retrieving a list of reactions (with related information) looks like.

Understand the tech

The SDK provides the following APIs to implement reaction functionalities:

• addReaction: Adds a reaction to the specified message.
• removeReaction: Removes the reaction from the specified message.
• fetchReactionList: Retrieves a list of reactions from the server.
• fetchReactionDetail: Retrieves the details of the reaction from the server.

Prerequisites

Before proceeding, ensure that your environment meets the following requirements:

• The project integrates a version of the Chat SDK later than v1.0.3 and has implemented the basic real-time chat functionalities.
• You understand the API call frequency limit as described in Limitations.

Implementation

This section introduces how to implement reaction functionalities in your project.

Add a reaction

Call addReaction to add a reaction to the specified message. In a one-to-one conversation, the peer user receives the onMessageReactionDidChange event. In a group conversation, other group members than the operator receive this event. This event contains the conversation ID, message ID, reaction list of the message, and reaction operation list (reaction ID, user ID of the user that adds the reaction, and the addition operation).

For a reaction, a user can add only once, or the error 1301 is reported for repeated addition.

// reaction: Reaction ID
// msgId: The message ID
// Adds a reaction to the specified message
ChatClient.getInstance()
  .chatManager.addReaction(reaction, msgId)
  .then((result) => {
    console.log("success: ", result);
  })
  .catch((error) => {
    console.log("fail: ", error);
  });

Remove a reaction

Call removeReaction to remove the specified reaction. In a one-to-one conversation, the peer user receives the onMessageReactionDidChange event. In a group conversation, other group members than the operator receive this event. This event contains the conversation ID, message ID, reaction list of the message, and reaction operation list (ID of the removed reaction, user ID of the user that removes the reaction, and the removal operation).

try {
  await ChatClient.getInstance.chatManager.addReaction(
    messageId: messageId,
    reaction: reaction,
  );
} on ChatError catch (e) {
}

Retrieve a list of reactions

Call getReactionList to retrieve a list of reactions of messages from the server. This method also returns the basic information of the reactions, including the content of the reaction, the number of users that added or removed the reaction, and a list of the first three user IDs that added or removed the reaction.

try {
  Map> map =
      await ChatClient.getInstance.chatManager.fetchReactionList(
    messageIds: messageIds,
    chatType: ChatType.GroupChat,
    groupId: groupId,
  );
} on ChatError catch (e) {
}

You can also use the reactionList member in ChatMessage to quickly retrieve the reactions of the specified message.

try {
    List reactions = await msg.reactionList();
}on ChatError catch (e) {
}

Retrieve the details of the reaction

Call fetchReactionDetail to get the detailed information of the reaction from the server. The detailed information includes the reaction content, the number of users that added or removed the reaction, and the complete list of user IDs that added or removed the reaction.

try {
  ChatCursorResult result =
      await ChatClient.getInstance.chatManager.fetchReactionDetail(
    messageId: messageId,
    reaction: reaction,
  );
} on ChatError catch (e) {
}

Listen for reaction status

Use onMessageReactionDidChange to listen for changes or status of the reaction.

    // Adds the chat event handler.
    ChatClient.getInstance.chatManager.addEventHandler(
      "UNIQUE_HANDLER_ID",
      ChatEventHandler(
        onMessageReactionDidChange: (events) {},
      ),
    );

    ...

    // Removes the chat event handler.
    ChatClient.getInstance.chatManager.removeEventHandler("UNIQUE_HANDLER_ID");
}

Next steps

Reactions are also supported in the Chat UIKit, which contains a wider range of emojis. You can also use the Chat SDK to implement reactions in your project.

Emojis are widely used in real-time chats because they allow users to express their feelings in a direct and vivid way. In Chat, "reactions" allow users to quickly react to a message using emojis in one-to-one chats and chat groups. In group chats, reactions can also be used to cast a vote, for example, by calculating the number of different emojis attached to the message.

The following illustration shows the implementation of adding a reaction to a message, how a conversation looks with reactions, and what retrieving a list of reactions (with related information) looks like.

Understand the tech

The SDK provides the following APIs to implement reaction functionalities:

• addReaction: Adds a reaction to the specified message.
• removeReaction: Removes the reaction from the specified message.
• getReactionList: Retrieves a list of reactions from the server.
• fetchReactionDetail: Retrieves the details of the reaction from the server.

Prerequisites

Before proceeding, ensure that your environment meets the following requirements:

• The project integrates a version of the Chat SDK later than v1.0.3 and has implemented the basic real-time chat functionalities.
• You understand the API call frequency limit as described in Limitations.

Implementation

This section introduces how to implement reaction functionalities in your project.

Add a reaction

Call addReaction to add a reaction to the specified message. In a one-to-one conversation, the peer user receives the onMessageReactionDidChange event. In a group conversation, other group members than the operator receive this event. This event contains the conversation ID, message ID, reaction list of the message, and reaction operation list (reaction ID, user ID of the user that adds the reaction, and the addition operation).

For a reaction, a user can add only once, or the error 1301 is reported for repeated addition.

// reaction: Reaction ID
// msgId: The message ID
// Adds a reaction to the specified message
ChatClient.getInstance()
  .chatManager.addReaction(reaction, msgId)
  .then((result) => {
    console.log("success: ", result);
  })
  .catch((error) => {
    console.log("fail: ", error);
  });

Remove a reaction

Call removeReaction to remove the specified reaction. You can also listen for the reaction change in onMessageReactionDidChange. In a one-to-one conversation, the peer user receives the onMessageReactionDidChange event. In a group conversation, other group members than the operator receive this event. This event contains the conversation ID, message ID, reaction list of the message, and reaction operation list (ID of the removed reaction, user ID of the user that removes the reaction, and the removal operation).

// reaction: Reaction ID
// msgId: The message ID
ChatClient.getInstance()
  .chatManager.removeReaction(reaction, msgId)
  .then((result) => {
    console.log("success: ", result);
  })
  .catch((error) => {
    console.log("fail: ", error);
  });

Retrieve a list of reactions

Call getReactionList to retrieve a list of reactions of messages from the server. This method also returns the basic information of the reactions, including the content of the reaction, the number of users that added or removed the reaction, and a list of the first three user IDs that added or removed the reaction.

// msgId: The message ID
ChatClient.getInstance()
  .chatManager.getReactionList(msgId)
  .then((result) => {
    console.log("success: ", result);
  })
  .catch((error) => {
    console.log("fail: ", error);
  });

You can also use the reactionList member in ChatMessage to quickly retrieve the reactions of the specified message.

const msg = ChatMessage.createTextMessage(targetId, content);
msg.reactionList
  .then((result) => {
    console.log("success: ", result);
  })
  .catch((error) => {
    console.log("fail: ", error);
  });

Retrieve the details of the reaction

Call fetchReactionDetail to get the detailed information of the reaction from the server. The detailed information includes the reaction content, the number of users that added or removed the reaction, and the complete list of user IDs that added or removed the reaction.

// reaction: Reaction ID
// msgId: The message ID
// pageSize: The number of reactions returned for each method call. The value range is [1,50]
// cursor: The position from which to get the reaction detail. Pass `null` or an empty string for the first method call.
ChatClient.getInstance()
  .chatManager.fetchReactionDetail(msgId, reaction, cursor, pageSize)
  .then((result) => {
    console.log("success: ", result);
  })
  .catch((error) => {
    console.log("fail: ", error);
  });

Listen for reaction status

Use onMessageReactionDidChange to listen for changes or status of the reaction.

// listens for reaction updates
class ChatMessageEvent implements ChatMessageEventListener {
  onMessageReactionDidChange(_list: ChatMessageReactionEvent[]): void {
    throw new Error("Method not implemented.");
  }
  // Add other callbacks according to your business logic
}
// Adds the message status listener
const listener = new ChatMessageEvent();
ChatClient.getInstance().chatManager.addMessageListener(listener);
// Removes the listener
ChatClient.getInstance().chatManager.removeMessageListener(listener);
// Removes all listeners
ChatClient.getInstance().chatManager.removeAllMessageListener();

Next steps

Reactions are also supported in the Chat UIKit, which contains a wider range of emojis. You can also use the Chat SDK to implement reactions in your project.

Emojis are widely used in real-time chats because they allow users to express their feelings in a direct and vivid way. In Chat, "reactions" allow users to quickly react to a message using emojis in one-to-one chats and chat groups. In group chats, reactions can also be used to cast a vote, for example, by calculating the number of different emojis attached to the message.

The following illustration shows the implementation of adding a reaction to a message, how a conversation looks with reactions, and what retrieving a list of reactions (with related information) looks like.

Understand the tech

The SDK provides the following APIs to implement reaction functionalities:

• AddReaction: Adds a reaction to the specified message.
• RemoveReaction: Removes the reaction from the specified message.
• GetReactionList: Retrieves a list of reactions from the server.
• GetReactionDetail: Retrieves the details of the reaction from the server.
• Message.ReactionList: Retrieves a list of reactions from the Message object.

Prerequisites

Before proceeding, ensure that your environment meets the following requirements:

• The project integrates a version of the Chat SDK later than v1.0.3 and has implemented the basic real-time chat functionalities.
• You understand the API call frequency limit as described in Limitations.

Implementation

This section introduces how to implement reaction functionalities in your project.

Add a reaction

Call AddReaction to add a reaction to the specified message. In a one-to-one conversation, the peer user receives the MessageReactionDidChange event. In a group conversation, other group members than the operator receive this event. This event contains the conversation ID, message ID, reaction list of the message, and reaction operation list (reaction ID, user ID of the user that adds the reaction, and the addition operation).

For a reaction, a user can add only once, or the error 1301 is reported for repeated addition.

// Adds a reaction to the specified message
SDKClient.Instance.ChatManager.AddReaction(msg_id, reaction, new CallBack(
     onSuccess: () =>
     {
         Debug.Log($"AddReaction success.");
     },
     onError: (code, desc) =>
     {
         Debug.Log($"AddReaction failed, code:{code}, desc:{desc}");
     }
));

// Listens for the reaction changes.
class ReactionManagerDelegate : IReactionManagerDelegate
{
    public void MessageReactionDidChange(List list)
    {
        if (list.Count == 0) return;
        foreach(var it in list)
        {
            // Add the iteration logic here.
        }
    }
}

// Adds a listener for the reaction.
ReactionManagerDelegate reactionManagerDelegate = new ReactionManagerDelegate();
SDKClient.Instance.ChatManager.AddReactionManagerDelegate(reactionManagerDelegate);

Remove a reaction

Call RemoveReaction to remove the specified reaction. In a one-to-one conversation, the peer user receives the MessageReactionDidChange event. In a group conversation, other group members than the operator receive this event. This event contains the conversation ID, message ID, reaction list of the message, and reaction operation list (ID of the removed reaction, user ID of the user that removes the reaction, and the removal operation).

// Removes the reaction.
SDKClient.Instance.ChatManager.RemoveReaction(msg_id, reaction, new CallBack(
     onSuccess: () =>
     {
         Debug.Log($"RemoveReaction success.");
     },
     onError: (code, desc) =>
     {
         Debug.Log($"RemoveReaction failed, code:{code}, desc:{desc}");
     }
));

// Listens for the reaction changes.
class ReactionManagerDelegate : IReactionManagerDelegate
{
    public void MessageReactionDidChange(List list)
    {
        if (list.Count == 0) return;
        foreach(var it in list)
        {
            // Add the iteration logic here.
        }
    }
}

// Adds a listener for the reaction.
ReactionManagerDelegate reactionManagerDelegate = new ReactionManagerDelegate();
SDKClient.Instance.ChatManager.AddReactionManagerDelegate(reactionManagerDelegate);

Retrieve a list of reactions

Call GetReactionList to retrieve a list of reactions of messages from the server. This method also returns the basic information of the reactions, including the content of the reaction, the number of users that added or removed the reaction, and a list of the first three user IDs that added or removed the reaction.

SDKClient.Instance.ChatManager.GetReactionList(messageIdList, chatType, groupId, new ValueCallBack>>(
onSuccess: (dict) =>
{
    // Iterates through the returned reaction dictionary.
    foreach (var it in dict)
    {
        // Iterates each list of reaction in the dictionary.
        List rl = it.Value;
        foreach (var lit in rl)
        {
            // Handles each reaction.
        }
    }
},
onError: (code, desc) =>
{
    Debug.Log($"GetReactionList failed, code:{code}, desc:{desc}");
}
));

Retrieve the details of the reaction

Call GetReactionDetail to get the detailed information of the reaction from the server. The detailed information includes the reaction content, the number of users that added or removed the reaction, and the complete list of user IDs that added or removed the reaction.

SDKClient.Instance.ChatManager.GetReactionDetail(msg_id, reaction, cursor, pageSize, new ValueCallBack>(
onSuccess: (ret) =>
{
    Debug.Log($"GetReactionDetail success");
    if (ret.Data.Count > 0)
    {
        MessageReaction mr = ret.Data[0];
        // Handles the retrieved reaction.
    }
},
onError: (code, desc) =>
{
    Debug($"GetReactionDetail failed, code:{code}, desc:{desc}");
}
));

Next steps

Reactions are also supported in the Chat UIKit, which contains a wider range of emojis. You can also use the Chat SDK to implement reactions in your project.

Emojis are widely used in real-time chats because they allow users to express their feelings in a direct and vivid way. In Chat, "reactions" allow users to quickly react to a message using emojis in one-to-one chats and chat groups. In group chats, reactions can also be used to cast a vote, for example, by calculating the number of different emojis attached to the message.

The following illustration shows the implementation of adding a reaction to a message, how a conversation looks with reactions, and what retrieving a list of reactions (with related information) looks like.

Understand the tech

The SDK provides the following APIs to implement reaction functionalities:

• AddReaction: Adds a reaction to the specified message.
• RemoveReaction: Removes the reaction from the specified message.
• GetReactionList: Retrieves a list of reactions from the server.
• GetReactionDetail: Retrieves the details of the reaction from the server.
• Message.ReactionList: Retrieves a list of reactions from the Message object.

Prerequisites

Before proceeding, ensure that your environment meets the following requirements:

• The project integrates a version of the Chat SDK later than v1.0.3 and has implemented the basic real-time chat functionalities.
• You understand the API call frequency limit as described in Limitations.

Implementation

This section introduces how to implement reaction functionalities in your project.

Add a reaction

Call AddReaction to add a reaction to the specified message. In a one-to-one conversation, the peer user receives the MessageReactionDidChange event. In a group conversation, other group members than the operator receive this event. This event contains the conversation ID, message ID, reaction list of the message, and reaction operation list (reaction ID, user ID of the user that adds the reaction, and the addition operation).

For a reaction, a user can add only once, or the error 1301 is reported for repeated addition.

// Adds a reaction to the specified message
SDKClient.Instance.ChatManager.AddReaction(msg_id, reaction, new CallBack(
     onSuccess: () =>
     {
         Debug.Log($"AddReaction success.");
     },
     onError: (code, desc) =>
     {
         Debug.Log($"AddReaction failed, code:{code}, desc:{desc}");
     }
));

// Listens for the reaction changes.
class ReactionManagerDelegate : IReactionManagerDelegate
{
    public void MessageReactionDidChange(List list)
    {
        if (list.Count == 0) return;
        foreach(var it in list)
        {
            // Add the iteration logic here.
        }
    }
}

// Adds a listener for the reaction.
ReactionManagerDelegate reactionManagerDelegate = new ReactionManagerDelegate();
SDKClient.Instance.ChatManager.AddReactionManagerDelegate(reactionManagerDelegate);

Remove a reaction

Call RemoveReaction to remove the specified reaction. In a one-to-one conversation, the peer user receives the MessageReactionDidChange event. In a group conversation, other group members than the operator receive this event. This event contains the conversation ID, message ID, reaction list of the message, and reaction operation list (ID of the removed reaction, user ID of the user that removes the reaction, and the removal operation).

// Removes the reaction.
SDKClient.Instance.ChatManager.RemoveReaction(msg_id, reaction, new CallBack(
     onSuccess: () =>
     {
         Debug.Log($"RemoveReaction success.");
     },
     onError: (code, desc) =>
     {
         Debug.Log($"RemoveReaction failed, code:{code}, desc:{desc}");
     }
));

// Listens for the reaction changes.
class ReactionManagerDelegate : IReactionManagerDelegate
{
    public void MessageReactionDidChange(List list)
    {
        if (list.Count == 0) return;
        foreach(var it in list)
        {
            // Add the iteration logic here.
        }
    }
}

// Adds a listener for the reaction.
ReactionManagerDelegate reactionManagerDelegate = new ReactionManagerDelegate();
SDKClient.Instance.ChatManager.AddReactionManagerDelegate(reactionManagerDelegate);

Retrieve a list of reactions

Call GetReactionList to retrieve a list of reactions of messages from the server. This method also returns the basic information of the reactions, including the content of the reaction, the number of users that added or removed the reaction, and a list of the first three user IDs that added or removed the reaction.

SDKClient.Instance.ChatManager.GetReactionList(messageIdList, chatType, groupId, new ValueCallBack>>(
onSuccess: (dict) =>
{
    // Iterates through the returned reaction dictionary.
    foreach (var it in dict)
    {
        // Iterates each list of reaction in the dictionary.
        List rl = it.Value;
        foreach (var lit in rl)
        {
            // Handles each reaction.
        }
    }
},
onError: (code, desc) =>
{
    Debug.Log($"GetReactionList failed, code:{code}, desc:{desc}");
}
));

Retrieve the details of the reaction

Call GetReactionDetail to get the detailed information of the reaction from the server. The detailed information includes the reaction content, the number of users that added or removed the reaction, and the complete list of user IDs that added or removed the reaction.

SDKClient.Instance.ChatManager.GetReactionDetail(msg_id, reaction, cursor, pageSize, new ValueCallBack>(
onSuccess: (ret) =>
{
    Debug.Log($"GetReactionDetail success");
    if (ret.Data.Count > 0)
    {
        MessageReaction mr = ret.Data[0];
        // Handles the retrieved reaction.
    }
},
onError: (code, desc) =>
{
    Debug($"GetReactionDetail failed, code:{code}, desc:{desc}");
}
));

Next steps

Reactions are also supported in the Chat UIKit, which contains a wider range of emojis. You can also use the Chat SDK to implement reactions in your project.

Emojis are widely used in real-time chats because they allow users to express their feelings in a direct and vivid way. In Chat, "reactions" allow users to quickly react to a message using emojis in one-to-one chats and chat groups. In group chats, reactions can also be used to cast a vote, for example, by calculating the number of different emojis attached to the message.

The following illustration shows the implementation of adding a reaction to a message, how a conversation looks with reactions, and what retrieving a list of reactions (with related information) looks like.

• Adding a reaction

  

• Retrieving a list of reactions

  

This page shows how to use the Chat SDK to implement reactions in your project.

Understand the tech

The SDK provides the following APIs to implement reaction functionalities:

• addReaction: Adds a reaction to the specified message.
• deleteReaction: Removes the reaction from the specified message.
• getReactionlist: Retrieves a list of reactions from the server.
• getReactionDetail: Retrieves the details of the reaction from the server.
• getHistoryMessages：Retrieves the reactions in historical messages from the server.

Prerequisites

Before proceeding, ensure that your environment meets the following requirements:

• The project integrates a version of the Chat SDK later than v1.0.3 and has implemented the basic real-time chat functionalities.
• You understand the API call frequency limit as described in Limitations.

Implementation

This section introduces how to implement reaction functionalities in your project.

Add a reaction

Call addReaction to add a reaction to the specified message. In a one-to-one conversation, the peer user receives the onReactionChange event. In a group conversation, other group members than the operator receive this event. This event contains the conversation ID, message ID, reaction list of the message, and reaction operation list (reaction ID, user ID of the user that adds the reaction, and the addition operation).

For a reaction, a user can add only once, or the error 1101 is reported for repeated addition.

// Add a reaction
chatClient.addReaction({ messageId: "messageId", reaction: "reaction" });
// Listen for the state of the reaction.
chatClient.addEventHandler("handlerId", {
  onReactionChange: (reactionMsg) => {
    console.log(reactionMsg);
  },
});

Remove a reaction

Call deleteReaction to remove the specified reaction. In a one-to-one conversation, the peer user receives the onReactionChanged event. In a group conversation, other group members than the operator receive this event. This event contains the conversation ID, message ID, reaction list of the message, and reaction operation list (ID of the removed reaction, user ID of the user that removes the reaction, and the removal operation).

// Remove the reaction.
chatClient.deleteReaction({ messageId: "messageId", reaction: "reaction" });
// Listen for reaction state change.
chatClient.addEventHandler("handlerId", {
  onReactionChange: (reactionMsg) => {
    console.log(reactionMsg);
  },
});

Retrieve a list of reactions

Call getReactionlist to retrieve a list of reactions of messages from the server. This method also returns the basic information of the reactions, including the content of the reaction, the number of users that added or removed the reaction, and a list of the first three user IDs that added or removed the reaction.

chatClient
  .getReactionlist({ chatType: "singleChat", messageId: "messageId" })
  .then((res) => {
    console.log(res);
  });

Retrieve the details of the reaction

Call getReactionDetail to get the detailed information of the reaction from the server. The detailed information includes the reaction content, the number of users that added or removed the reaction, and the complete list of user IDs that added or removed the reaction.

chatClient
  .getReactionDetail({
    messageId: "messageId",
    reaction: "reaction",
    cursor: null,
    pageSize: 20,
  })
  .then((res) => {
    console.log(res);
  });

Retrieve the reaction in the historical message from the server

When calling getHistoryMessages to retrieve historical messages from the server, if the message has a reaction attached to it, the retrieved message body also contains the information of the reaction.

chatClient
  .getHistoryMessages({
    targetId: "targetId",
    chatType: "groupChat",
    pageSize: 20,
  })
  .then((messages) => {
    console.log(messages);
  });

Next steps

Reactions are also supported in the Chat UIKit, which contains a wider range of emojis. You can also use the Chat SDK to implement reactions in your project.