How to implement read receipts in Sendbird Chat

Introduction

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:

1. Understand more about what read receipts are and how they work in Sendbird
2. Implement read receipts in a chat application

Please note that this tutorial assumes prior knowledge of sending and receiving messages via Sendbird’s SDKs. To gain the most benefit out of this tutorial, you should also be familiar with basic JavaScript.

Let’s begin! 💻

What are read receipts in Sendbird?

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.

What is an unread message in Sendbird?

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.

What is a read message in Sendbird?

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.

Use cases for read receipts

Read receipts have particular value for cases with a low number of channel members. For example:

• Apps with user-to-user messaging like gaming apps
• Businesses that communicate directly with users through an expert or advisor such as a healthcare concierge, financial advisor, customer support agent, counselor, or another expert
• On-demand services or any app that requires timely delivery of services or goods
• Peer marketplaces, where communication is necessary for buying and selling

Now that we have understood the basics of read receipts, let’s move on to the implementation details.

Implementation: Read status

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.

Example:

The read number 1 in the image below indicates that at least one channel member has not read the current user’s message.

Step 1: When to mark messages as read

Consider that UserA has sent a message to UserB. Here we will walk through UserB marking UserA’s messages as read.

• Call markAsRead() when UserB opens or refreshes an individual channel.

Note: This does not guarantee that UserB has actually laid eyes on all messages, as per convention in most messaging apps.

Fetching the channel

Refreshing the channel – i.e returning from the background to the channel view.

• Call markAsRead() when the user returns to the bottom of the message view. 
• Call markAsRead() when new messages arrive and the two following conditions are true:
  1. The user is in the message view 
  2. The user is close to the bottom of the message view, and/or you display incoming messages as popovers when they arrive

onMessageReceived() event handler.

• Call markAsRead() when the user sends a message.

Send a message

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.

Step 2: Receiving websocket events that a message has been read: UserB

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.

Once the list of members who have read the message is available, consider updating the message object UI in the message view. Common examples include:

• Displaying a decrementing number (total channel members minus read members count) → Kakao Talk
• Converting a grey checkmark to a blue checkmark → WhatsApp
• Adding small user icons with “seen by” details → Facebook messenger

Step 3: Check a message has been read when UserB returns to the message view

In short, fetch messages into the view then iterate them through the groupChannel.getReadMembers(MESSAGE).

Load previous messages – when fetching new messages:

Conclusion

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.

To deep dive into this subject, check out our blog. You can read further implementation details for JavaScript, Android, and iOS.

You’re now an expert in implementing read receipts in your chat application! Congratulations and happy chat building! ✌