In this tutorial, you will learn how to implement one advanced functionality of Sendbird Chat – implementing read receipts. Before diving into the implementation details, we will first understand the technical concept of read receipts and explore related use cases.
By the end of this tutorial, you will:
Let’s begin! 💻
In a nutshell, read receipts let users know when another user has caught up with the conversation.
A read receipt is defined as a timestamp of when each user last read any messages in a group channel (i.e. a 1-on-1 or group conversation). The read receipt is typically displayed next to an individual message within the message list view.
A read receipt’s timestamp comes from the last message `created_at` timestamp for when the GroupChannel.markAsRead()was called for an individual channel member. Calling GroupChannel.markAsRead()has an event handler for all channel members to know in real-time when a message is read.
All messages existing in a channel between GroupChannel.markAsRead() calls are defined as unread messages. A proper implementation of unread message counts lets users easily navigate to the messages they have missed since their last interaction.
Messages are marked as read when the marsAsRead() method is called. It is common that applications call markAsRead() every time one of the members reads messages by entering the channel from a channel list or bringing the opened channel’s message view to the foreground. A message being read is calculated using the message creation time and when markAsRead() was called.
Note that individual messages do not retain information on when they were read.
Read receipts have particular value for cases with a low number of channel members. For example:
Now that we have understood the basics of read receipts, let’s move on to the implementation details.
A read status for a single message is a marker that can indicate how many members of a group channel have NOT read a single message.
The read number 1 in the image below indicates that at least one channel member has not read the current user’s message.
Consider that UserA has sent a message to UserB. Here we will walk through UserB marking UserA’s messages as read.
Note: This does not guarantee that UserB has actually laid eyes on all messages, as per convention in most messaging apps.
Refreshing the channel – i.e returning from the background to the channel view.
onMessageReceived() event handler.
Note: Do not call markAsRead() when scrolling up in the message view. This is a common mistake and will lead to rate limits. Individual messages do not need to be marked as read. Instead, Sendbird automatically marks previous messages as read.
Sendbird provides a channel event listener that triggers for all channel members except the user who called markAsRead(). The event is onReadReceiptUpdated(). UserB can listen for this event and then determine how many channel members read the message. The onReadReceiptUpdated() handler passes one parameter of a channel and not a message.
Pass the message into getReadMembers() to get other channel members who have read the message.
For each message passed to getReadMembers(), a user object array is created containing all channel members who have read the message.
In short, fetch messages into the view then iterate them through the groupChannel.getReadMembers(MESSAGE).
Load previous messages – when fetching new messages:
In this tutorial, we explored read receipts and what they are used for. We have seen how to implement read receipts in a chat application, along with relevant code samples.
You’re now an expert in implementing read receipts in your chat application! Congratulations and happy chat building! ✌