Chat / JavaScript
Chat JavaScript v4
Chat JavaScript
Chat
JavaScript
Home
/
Chat
/
JavaScript
/
Message
This is the new Docs for Chat SDK v4 for JavaScript. To see the previous Docs, click here.

React to a message in a group channel

Message reactions help you build a more engaging chat experience that goes beyond text messages. They are a quick and easy way for users to respond to a message. Users can express their acknowledgement of or feelings about a message without written text by simply adding reactions. They can also view and delete their reactions to the message.

// Add an emoji to a message.
const emojiKey: string = 'smile';
const reactionEvent = await message.addReaction(message, emojiKey);
message.applyReactionEvent(reactionEvent);

// Delete an emoji from a message.
const reactionEvent = await message.deleteReaction(message, emojiKey);
message.applyReactionEvent(reactionEvent);

// To add or remove an emoji on the current user's chat view,
// the applyReactionEvent() method should be called in the channel event handler's onReactionUpdated() method.

You can decide how to display reactions that were added to messages in the current user’s chat view.

Note: The getPreviousMessagesByTimestamp() method is deprecated as of August 2021. Accordingly, use the getMessagesByTimestamp() method instead.

const params: MessageListParams = {
    includeReactions: INCLUDE_REACTIONS,
};
// ...
const messages = await channel.getMessagesByTimestamp(TIMESTAMP, params);
for (let message of messages) {
    for (let reaction of message.reactions) {
        const userIds = reaction.userIds;

        // Check if this emoji has been used when the current user reacted to the message.
        if (userIds.includes(sb.currentUser.userId)) {
            const key = reaction.key;
            const updatedAt = reaction.updatedAt;

            // Show the emoji however you want on the current user's chat view.
        }
    }
}

Note: Messages along with their reactions can also be retrieved by using the PreviousMessageListQuery's load() method. To learn more, see the load previous messages page.

When one of the channel members reacts to a message, the onReactionUpdated() method in the channel event handler is invoked on all channel members’ devices including the one that made the reaction. The applyReactionEvent() method reflects the reaction change to the message in real time.

const channelHandler = new GroupChannelHandler({
    onReactionUpdated: (channel: BaseChannel, reactionEvent: ReactionEvent) => {
        // ...

        // If there is a message with the reactionEvent.messageId,
        // you can apply the reaction change to the message by calling the applyReactionEvent() method.
        message.applyReactionEvent(reactionEvent);

        // Add or remove an emoji on the current user's chat view.
    }
});
sb.groupChannel.addGroupChannelHandler(UNIQUE_HANDLER_ID, channelHandler);