Today, we’re excited to introduce Message Reactions in Ably Chat - a quintessential part of any modern chat experience, now available as a native feature.
How message reactions work
Each reaction in Ably Chat is defined by a simple string, often a UTF-8 emoji like 👍, but it could also be a tag (:like:) or text (+1). Reactions are aggregated in realtime based on their name. When users react to a message, the Ably Chat SDK keeps track of these reactions and updates the summary that’s persisted with the message itself.
The aggregation method, including how many reactions a user can place on a message, is controlled by the reaction type. Ably Chat supports three reaction types, each with distinct behavior, so you can tailor the experience to your app:
Each type offers different aggregation rules, from simple one-tap responses to interactive, count-based reactions like claps or upvotes. You can configure the default reaction type per room, or override it per message, giving you total control.
Getting set up
Creating your first reaction is easy. Log in in to Ably if you already have an account, or sign up for a free plan to follow along.
Setting up a 👍 reaction is as simple as:
CopyEdit
await room.messages.reactions.send(message, { name: '👍' });
You can also add multiple reactions and override reaction types. If you're using the Multiple type, you can optionally include a count:
CopyEdit
await room.messages.reactions.send(message, {
name: '❤️',
type: MessageReactionType.Multiple,
count: 10
});
When a reaction is added, Ably automatically broadcasts a summary event with the updated totals. You don’t need to track individual events and manage the counts yourself - just subscribe to summary updates and keep your UI in sync:
CopyEdit
room.messages.reactions.subscribe((event) => {
const updatedMessage = oldMessage.with(event);
// Update your UI
});
These summaries are optimized for scale. When multiple reactions happen in quick succession, they’re intelligently rolled up into a single summary event - reducing bandwidth, improving performance, and keeping your UI in sync with fewer updates.
Combined with Ably’s server-side batching, this ensures your chat experience stays fast and efficient even under heavy load. Server-side batching reduces the number of individual messages sent over the wire, helping you keep bandwidth costs low while delivering updates reliably at scale.
Built for Developers
Reactions are available natively in the Ably Chat SDK and integrate seamlessly with message history and realtime subscriptions. You get access to:
- Real-time summaries
- Room-level configuration
- Optional raw reaction events (if you need them)
All while benefiting from Ably’s global edge network and dependable message ordering.
To enable message reactions, your users' access tokens have the annotation-publish capability active and set your default reaction type when creating a room:
CopyEdit
const room = await ablyChatClient.rooms.get('my-room', {
messages: {
defaultMessageReactionType: MessageReactionType.Distinct
}
});
You can find full implementation details in the message reactions documentation.
Looking Ahead
Reactions are just the beginning. We’re focused on building the most powerful, scalable chat solution, and we’re actively exploring what’s next, from richer interactivity to AI-powered features.
Please note that message reactions are currently experimental. If you run into anything unexpected, please let us know at [email protected] - your feedback will help us shape the final release!
