Skip to main content

You are viewing Agora Docs forBetaproducts and features. Switch to Docs

Android
iOS
Web
Windows
Unity
Flutter
React Native

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.

1655257598155

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:

  • 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 reaction feature is supported by all types of Pricing Plans and is enabled by default once you have enabled Chat in Agora Console.

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.


_24
// Add a reaction
_24
ChatClient.getInstance().chatManager().asyncAddReaction(message.getMsgId(), reaction, new CallBack() {
_24
@Override
_24
public void onSuccess() {
_24
_24
}
_24
@Override
_24
public void onError(int error, String errorMsg) {
_24
_24
}
_24
@Override
_24
public void onProgress(int i, String s) {
_24
}
_24
});
_24
// Listen for the state of the reaction.
_24
public class MyClass implements MessageListener {
_24
private void init() {
_24
ChatClient.getInstance().chatManager().addMessageListener(this);
_24
}
_24
@Override
_24
public void onReactionChanged(List<MessageReactionChange> list) {
_24
_24
}
_24
}

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).


_24
// Remove the reaction.
_24
ChatClient.getInstance().chatManager().asyncRemoveReaction(message.getMsgId(), reaction, new CallBack() {
_24
@Override
_24
public void onSuccess() {
_24
_24
}
_24
@Override
_24
public void onError(int error, String errorMsg) {
_24
_24
}
_24
@Override
_24
public void onProgress(int i, String s) {
_24
}
_24
});
_24
// Listen for reaction state change.
_24
public class MyClass implements MessageListener {
_24
private void init() {
_24
ChatClient.getInstance().chatManager().addMessageListener(this);
_24
}
_24
@Override
_24
public void onReactionChanged(List<MessageReactionChange> list) {
_24
_24
}
_24
}

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.


_10
ChatClient.getInstance().chatManager().asyncGetReactionList(msgIdList, ChatMessage.ChatType.Chat, groupId, new ValueCallBack<Map<String, List<MessageReaction>>>() {
_10
@Override
_10
public void onSuccess(Map<String, List<MessageReaction>> stringListMap) {
_10
_10
}
_10
@Override
_10
public void onError(int i, String s) {
_10
_10
}
_10
});

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.


_10
ChatClient.getInstance().chatManager().asyncGetReactionDetail(mMsgId, emojiconId, pageCurosr, 30, new ValueCallBack<CursorResult<MessageReaction>>() {
_10
@Override
_10
public void onSuccess(CursorResult<MessageReaction> messageReactionCursorResult) {
_10
_10
}
_10
@Override
_10
public void onError(int i, String s) {
_10
_10
}
_10
});

Next steps

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

vundefined