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. These events are emitted whenever a user sends a reaction, such as by hitting a ‘like’ button or clicking a heart emoji. Use the reactions.subscribe() method in a room to receive reactions:
const {unsubscribe} = room.reactions.subscribe((reaction) => {
console.log(`Received a reaction of type ${reaction.type}, and metadata ${reaction.metadata}`);
});
CopyCopied!Room reaction event structure
The following is the structure of a room reaction event:
{
"type": "like",
"headers": {},
"metadata": {
"fireworks": "blue",
},
"clientId": "R3hegPCqgV3DZoMA2sCT-",
"createdAt": "2024-06-12T11:37:59.988Z",
"isSelf": true
}
CopyCopied!The following are the properties of a room reaction:
| Property | Description | Type |
|---|---|---|
| type | The type reaction of 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
Unsubscribe from receiving room reactions to remove previously registered listeners.
Use the unsubscribe() function returned in the subscribe() response to remove a listener:
// Initial subscription
const {unsubscribe} = room.reactions.subscribe((reaction) => {
console.log(`Received a reaction of type ${reaction.type}, and metadata ${reaction.metadata}`);
});
// To remove the listener
unsubscribe();
CopyCopied!Use the reactions.unsubscribeAll() method to remove all reaction listeners in a room:
await room.reactions.unsubscribeAll();
CopyCopied!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:
await room.reactions.send({type: "like"});
await room.reactions.send({type: "heart", metadata: {"effect": "fireworks"}});
CopyCopied!