Reactions

Add, remove, and fetch message reactions in real-time using the CometChat JavaScript SDK. Includes listener events and helper methods for updating UI.

AI Integration Quick Reference

// Add a reaction
await CometChat.addReaction(messageId, "😊");

// Remove a reaction
await CometChat.removeReaction(messageId, "😊");

// Fetch reactions for a message
const request = new CometChat.ReactionRequestBuilder()
  .setMessageId(messageId).setLimit(10).build();
const reactions = await request.fetchNext();

// Listen for reaction events
CometChat.addMessageListener("LISTENER_ID", {
  onMessageReactionAdded: (reaction) => {},
  onMessageReactionRemoved: (reaction) => {}
});

Enhance user engagement in your chat application with message reactions. Users can express their emotions using reactions to messages. This feature allows users to add or remove reactions, and to fetch all reactions on a message. You can also listen to reaction events in real-time. Let’s see how to work with reactions in CometChat’s SDK.

Add a Reaction

Users can add a reaction to a message by calling addReaction with the message ID and the reaction emoji.

JavaScript

let messageId = "1";
let emoji = "😊";

CometChat.addReaction(messageId, emoji)
.then((res) => {
  console.log('response', res);
}).catch(err => {
  console.log('err', err);
})    

TypeScript

let messageId:string = "1";
let emoji:string = "😊";

CometChat.addReaction(messageId, emoji)
.then((res:CometChat.BaseMessage) => {
  console.log('response', res);
}).catch((err:CometChat.CometChatException) => {
  console.log('err', err);
})  

You can react on text message, media message and custom message

Remove a Reaction

Removing a reaction from a message can be done using the removeReaction method.

JavaScript

let messageId = "1";
let emoji = "😊";

CometChat.removeReaction(messageId, emoji)
.then((res) => {
  console.log('response', res);
}).catch(err => {
  console.log('err', err);
}) 

TypeScript

let messageId:string = "1";
let emoji:string = "😊";

CometChat.removeReaction(messageId, emoji)
.then((res:CometChat.BaseMessage) => {
  console.log('response', res);
}).catch((err:CometChat.CometChatException) => {
  console.log('err', err);
})  

Both addReaction() and removeReaction() return a BaseMessage object with the updated reactions. Access the reaction data using getter methods:

Field	Getter	Return Type	Description
id	getId()	number	Unique message ID
sender	getSender()	User	The user who sent the message
reactions	getReactions()	ReactionCount[]	Array of reaction counts on the message

Fetch Reactions for a Message

To get all reactions for a specific message, first create a ReactionRequest using ReactionRequestBuilder. You can specify the number of reactions to fetch with setLimit with max limit 100. For this, you will require the ID of the message. This ID needs to be passed to the setMessageId() method of the builder class. The setReaction() will allow you to fetch details for specific reaction or emoji.

Setting	Description
setMessageId(value)	Specifies the unique identifier of the message for which you want to fetch reactions. This parameter is mandatory as it tells the SDK which message’s reactions are being requested.
setReaction(value)	Filters the reactions fetched by the specified reaction type (e.g., ”😊”, ”😂”, ”👍”). When set, this method will cause the ReactionRequest to only retrieve details of the provided reaction for the given message.

---

Fetch Next

The fetchNext() method fetches the next set of reactions for the message.

JavaScript

let limit = 10;
let messageId = 1;

let reactionRequest = new CometChat.ReactionRequestBuilder()
.setMessageId(messageId)
.setLimit(limit)
.build();

reactionRequest.fetchNext().then(
    messages => {
      console.log("list fetched:", messages);
    },
    error => {a
      console.log('list fetching failed with error:', error);
    },
  );    

TypeScript

let limit:number = 10;
let messageId:number = 1;

let reactionRequest = new CometChat.ReactionRequestBuilder()
.setMessageId(messageId)
.setLimit(limit)
.build();

reactionRequest.fetchNext().then(
    (messages: MessageReaction[]) => {
      console.log("list fetched:", messages);
    },
    (error: CometChat.CometChatException) => {
      console.log('list fetching failed with error:', error);
    },
  );

Fetch Previous The fetchPrevious() method fetches the previous set of reactions for the message.

JavaScript

let limit = 10;
let messageId = 1;

let reactionRequest = new CometChat.ReactionRequestBuilder()
.setMessageId(messageId)
.setLimit(limit)
.build();

reactionRequest.fetchPrevious().then(
    messages => {
      console.log("list fetched:", messages);
    },
    error => {a
      console.log('list fetching failed with error:', error);
    },
  );  

TypeScript

let limit:number = 10;
let messageId:number = 1;

let reactionRequest = new CometChat.ReactionRequestBuilder()
.setMessageId(messageId)
.setLimit(limit)
.build();

reactionRequest.fetchPrevious().then(
    (messages: MessageReaction[]) => {
      console.log("list fetched:", messages);
    },
    (error: CometChat.CometChatException) => {
      console.log('list fetching failed with error:', error);
    },
  );   

Real-time Reaction Events

Keep the chat interactive with real-time updates for reactions. Register a listener for these events and make your UI responsive.

Always remove listeners when they’re no longer needed (e.g., on component unmount or page navigation). Failing to remove listeners can cause memory leaks and duplicate event handling.

JavaScript

let listenerID = "UNIQUE_LISTENER_ID";

CometChat.addMessageListener(listenerID, {
    onMessageReactionAdded:(message) => {
      console.log("Reaction added", message);
    },
    onMessageReactionRemoved:(message) => {
      console.log("Reaction removed", message);
    }
  })    

TypeScript

let listenerID:string = "UNIQUE_LISTENER_ID";

CometChat.addMessageListener(listenerID, {
    onMessageReactionAdded:(message: Object) => {
      console.log("Reaction added", message);
    },
    onMessageReactionRemoved:(message: Object) => {
      console.log("Reaction removed", message);
    }
  }) 

Each reaction listener callback receives a ReactionEvent object. Access the event data using getter methods:

Field	Getter	Return Type	Description
reaction	getReaction()	Reaction	The reaction object containing emoji, user, and timestamp
receiverId	getReceiverId()	string	UID or GUID of the receiver
receiverType	getReceiverType()	string	Type of receiver (user or group)
conversationId	getConversationId()	string	ID of the conversation
parentMessageId	getParentMessageId()	string	ID of the parent message (for threaded messages)

Removing a Reaction Listener

To stop listening for reaction events, remove the listener as follows:

JavaScript

let listenerID = "UNIQUE_LISTENER_ID";

CometChat.removeMessageListener(listenerID);

TypeScript

let listenerID:string = "UNIQUE_LISTENER_ID";

CometChat.removeMessageReactionListener(listenerID);

Get Reactions List

To retrieve the list of reactions reacted on particular message, you can use the message.getReactions() method. This method will return an array containing the reactions, or an empty array if no one reacted on the message.

JavaScript

message.getReactions()    

TypeScript

message.getReactions()

Check if Logged-in User has Reacted on Message

To check if the logged-in user has reacted on a particular message or not, You can use the getReactedByMe() method on any ReactionCount object instance. This method will return a boolean value, true if the logged-in user has reacted on that message, otherwise false.

JavaScript

let reactions = message.getReactions();
reactions.forEach((reaction) => {
reaction.getReactedByMe(); //Return true is logged-in user reacted on that message, otherwise false
}) 

TypeScript

let reactions = message.getReactions();
reactions.forEach((reaction) => {
reaction.getReactedByMe(); //Return true is logged-in user reacted on that message, otherwise false
})   

Update Message With Reaction Info

When a user adds or removes a reaction, you will receive a real-time event. Once you receive the real time event you would want to update the message with the latest reaction information. To do so you can use the updateMessageWithReactionInfo() method.

The updateMessageWithReactionInfo() method provides a seamless way to update the reactions on a message instance (BaseMessage) in real-time. This method ensures that when a reaction is added or removed from a message, the BaseMessage object’s getReactions() property reflects this change immediately.

When you receive a real-time reaction event (MessageReaction), call the updateMessageWithReactionInfo() method, passing the BaseMessage instance (message), event data (MessageReaction) and reaction event action type (CometChat.REACTION_ACTION.REACTION_ADDED or CometChat.REACTION_ACTION.REACTION_REMOVED) that corresponds to the message being reacted to.

JavaScript

// The message to which the reaction is related
let message = ...;

// The reaction event data received in real-time
let messageReaction = ...;

// The recieved reaction event real-time action type. Can be CometChatConstants.REACTION_ADDED or CometChatConstants.REACTION_REMOVED
let action = CometChat.REACTION_ACTION.REACTION_ADDED;

let modifiedBaseMessage = CometChat.CometChatHelper.updateMessageWithReactionInfo(
baseMessage, 
messageReaction, 
action
);    

TypeScript

// The message to which the reaction is related
let message: CometChat.BaseMessage = ...;

// The reaction event data received in real-time
let messageReaction: CometChat.MessageReaction = ...;

// The recieved reaction event real-time action type. Can be CometChatConstants.REACTION_ADDED or CometChatConstants.REACTION_REMOVED
let action: CometChat.REACTION_ACTION = CometChat.REACTION_ACTION.REACTION_ADDED;

let modifiedBaseMessage = CometChat.CometChatHelper.updateMessageWithReactionInfo(
baseMessage, 
messageReaction, 
action
);   

After calling this method, the message instance’s reactions are updated. You can then use message.getReactions() to get the latest reactions and refresh your UI accordingly.

---

Next Steps

Send Messages

Send text, media, and custom messages to users and groups

Receive Messages

Listen for incoming messages in real-time and fetch missed messages