Room reactions

Users can send reactions to the entire chat room to show their sentiment as to what is happening. For example, agreeing with the content in a livestream using a thumbs up, or sending a heart when their team scores in a sports game.

Room reactions are ephemeral and not stored or aggregated by Ably. The intention being that they show the overall sentiment of a room at a point in time.

Subscribe to room reactions

Subscribe to room reactions by registering a listener. Use the reactions.subscribe() method in a room to receive reactions:

1

2

3

4

const {unsubscribe} = room.reactions.subscribe((event) => {
  const reaction = event.reaction;
  console.log(`Received a reaction from ${reaction.clientId} with name ${reaction.name}, and metadata ${reaction.metadata}`);
});

Room reaction event structure

The following are the properties of a room reaction event:

PropertyDescriptionType
typeThe type of reaction event.String
reactionThe reaction data.Object
name: The name of the reaction, for example a 'like' or a heart emoji.String
headers: Optional headers for adding additional information to a reaction.Object
metadata: Optional metadata about the reaction, such as an animation or effect. This information is not read by Ably.Object
createdAt: The time the reaction was sent.Date
clientId: The client identifier of the user that sent the reaction.String
isSelf: Will be true for the user that sent the reaction.Boolean

Unsubscribe from room reactions

Use the unsubscribe() function returned in the subscribe() response to remove a room reaction listener:

1

2

3

4

5

6

7

// Initial subscription
const {unsubscribe} = room.reactions.subscribe((event) => {
  console.log(`Received a reaction of type ${event.reaction.name}, and metadata ${event.reaction.metadata}`);
});

// To remove the listener
unsubscribe();

Send a room reaction

Use the reactions.send() method to send a room-level reaction. The most common way of using this method is to trigger it whenever a user clicks an emoji button in a room:

1

2

3

await room.reactions.send({name: "like"});

await room.reactions.send({name: "heart", metadata: {"effect": "fireworks"}});
Select...