Developers frequently choose Ably for building realtime chat applications or to provide chat functionality in their products.
While dev teams in different companies have different priorities, overall our customers tell us that using our serverless WebSockets platform frees them to fully focus on delivering the best possible core user experience.
Just like our customers, we too like to keep our users happy. So we’ve set out to make it easier and faster for devs to add additional functionality in the 1:1, group chat, or large-scale chat apps they build on Ably.
Interact with sent messages however you like
Our new Message Interactions feature makes it very easy to interact with messages previously sent to a channel. This comes in handy if you’re building chat functionality where users interact with a previous message – for example by ‘liking’, replying, quoting, or adding an emoji reaction.
function sendReaction(emoji) {
channel.publish('event_name', { body: emoji, extras: { ref: { type:
"com.ably.reaction", timeserial: "1656424960320-1" } } })
}
sendReaction("?")
Publish interaction
channel.subscribe({
refType: "com.ably.reaction"
}, onReaction);
Subscribe to any interaction
The basic Ably features you need to create a chat application with emoji reactions are Channels and Message Interactions.
Once a channel is enabled with Message Interactions, messages received by that channel will contain a unique timeSerial ID that can be referenced by later messages.
You can decide and customise what data you include in an interaction, and how this is displayed to users. Here are just a few things you can build:
- Emoji reactions
- Message updating and deleting
- Read receipts and unread counts
- Quoting/replying to a message
- Message threads
- Media previews
Live Example: Add emoji reactions
To get an idea of how simple it is, here is a sample application showing emoji reactions in chat. Browse through the code that powers it and test it in realtime on multiple browser windows or devices.
// Send a new emoji reaction for a specific message
function sendReaction(message, emoji){
channel.publish('add-reaction', {
body: emoji,
extras: {
reference: { type: 'com.ably.reaction', timeserial: message.id },
},
})
}
// Subscribe to reactions on a specific message
function onMessageReaction(message, callback){
channel.subscribe({
name: 'add-reaction',
refTimerserial: message.id,
refType: 'com.ably.reaction',
}, callback)
}
// Subscribe to all reactions
function onAnyReaction(callback){
channel.subscribe({
name: 'add-reaction',
refType: 'com.ably.reaction',
}, callback)
}
Other chat functionality you can build with Ably
Ably provides simple yet powerful APIs that give you all the flexibility to build and implement not only chat, but a vast array of other customised realtime features for web and mobile apps.
To get inspired, take a look at this collection of quick sample apps. You could add typing indicators to your chat, or an avatar stack to show who is currently active in each of your chat rooms.
If you’re curious about other realtime features and experiences you can build on Ably, check out our Tutorials collection.
Ideas for new chat-enhancement features on Ably
We’re always planning new ideas to help devs build better and richer user engagement, and we’d love to know your opinion on them :
Channel listing
We’d like to make it easier for developers to programmatically observe what chat rooms exist and when new ones appear, and let them synchronise this information in realtime with an application.
Contact activity
We’d be interested to hear from you if you’d like to build functionality that lets your users ‘follow’ their contacts, for example to see which chat rooms their friends are in, or to discover other experiences throughout the application.
Popular channels
Lastly, we’re looking at providing ways to determine which are the most popular chat rooms and show that information to users. This is useful for driving traffic to popular experiences happening live.
Get in touch at any time to tell us what you think about these ideas, and what other features you’d like to see.
Why would you build chat on Ably in the first place?
If you don't know Ably already, you might ask this question.
Using Ably as the realtime infrastructure for your chat (or any of your realtime functionality) is not your only option. You could choose to simply use a specialised chat API such as Sendbird or Getstream. Or you could go to the other extreme and build the entire thing from the ground up, including the realtime infrastructure supporting it. There are pros and cons for both options.
Using a specialised chat API service, you can be up and ready very quickly, with minimal dev resources, and reasonable billings. When you’re a bootstrap startup with limited resources and a limited number of users, this is often the best solution. However, your customisation options will be limited, and once your user numbers start swelling, the bills can get very large very quickly.
Building everything from scratch will allow you to maintain complete control over your entire stack, but it will also require a lot more time and resources to build, and especially to maintain it at scale.
Building realtime infrastructure from scratch
In a recent report, approx 41% of 500 engineers in companies that built their own Websockets-based realtime infrastructure said that the development time overran, and the entire project was delivered late. The extra time required ranged from 3 months to 1 year. And over 30% reported that once completed, the complexity of the solution was causing maintenance and scaling problems, and was not delivering the functionality they needed.
With Ably, engineering teams build massively scalable realtime apps with 3x faster delivery and savings of $500k on build cost.
Ably’s leading Serverless WebSockets platform gives you the best of both worlds. It reliably handles high-scale realtime data distribution to web and mobile apps at the edge, so engineering teams can focus on core product innovation without having to provision and maintain realtime infrastructure. At the same time, you have the flexibility to create all the customisation needed. Here’s why HubSpot chose to build their entire customer support on Ably.
Most importantly, you get the peace of mind of building on a platform designed from the ground-up to be available and reliable at global levels, with hard guarantees for performance and data integrity.
If you’d like to give Ably a go, create a free Ably account to get started.
