The RoomReactions interface provides methods for sending and receiving ephemeral room-level reactions. These are commonly used for live interactions like floating emojis, applause, or other real-time feedback in chat rooms. Access it via room.reactions.
1
const reactions = room.reactions;Unlike message reactions, room reactions are not persisted and are only visible to users currently connected to the room.
Send a room reaction
reactions.send(params: SendReactionParams): Promise<void>Sends a room-level reaction. Room reactions are ephemeral events that are not associated with specific messages.
The room should be attached to send room reactions. The connection must be in the connected state.
1
await room.reactions.send({ name: '👍' });Parameters
The send() method takes the following parameters:
paramsrequiredSendReactionParamsReturns
Promise<void>
Returns a promise. The promise is fulfilled when the reaction has been sent, or rejected with an ErrorInfo object.
Subscribe to room reactions
reactions.subscribe(listener: RoomReactionListener): SubscriptionSubscribes to room-level reaction events. Receives all room reactions sent by any user in the room. This is useful for displaying floating reactions, triggering animations, or showing live audience engagement.
The room should be attached to receive reaction events.
1
2
3
4
5
6
const { unsubscribe } = room.reactions.subscribe((event) => {
console.log(`${event.reaction.clientId} reacted with ${event.reaction.name}`);
});
// To stop receiving reactions
unsubscribe();Parameters
The subscribe() method takes the following parameters:
listenerrequiredRoomReactionEventReturns
Subscription
Returns an object with the following methods:
Unsubscribe from room reactions
unsubscribe(): voidCall unsubscribe() to stop receiving room reaction events.
Example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
const room = await chatClient.rooms.get('my-room');
await room.attach();
// Subscribe to room reactions
const { unsubscribe } = room.reactions.subscribe((event) => {
// Display a floating emoji animation
showFloatingEmoji(event.reaction.name, event.reaction.clientId);
console.log(`${event.reaction.clientId} sent ${event.reaction.name}`);
// Check if it's your own reaction
if (event.reaction.isSelf) {
console.log('This was my reaction');
}
});
// Send reactions when users click reaction buttons
document.querySelectorAll('.reaction-button').forEach(button => {
button.addEventListener('click', async () => {
const emoji = button.dataset.emoji;
await room.reactions.send({ name: emoji });
});
});
// Send a reaction with metadata
await room.reactions.send({
name: '🎉',
metadata: {
animation: 'confetti',
color: 'gold'
}
});
// Clean up
unsubscribe();