Skip to main content

One-to-One Chat Message Read Receipt

Feature Description​

The read receipt is a communication mechanism designed to provide real-time feedback on message read status. This feature enables message senders to confirm whether recipients have actually viewed the message content, thereby enhancing the message interaction experience.

Implementation Approach​

The implementation of the read receipt feature differs between the Web and Electron platforms, with specific workflows as follows:

Web

  1. When a user views unread messages in a one-to-one chat, call the sendReadReceiptMessage method to send a read receipt.
  2. Set up a read receipt listener using the addEventListener method.
  3. When the SDK receives a read receipt, it triggers the READ_RECEIPT_RECEIVED event. Note: The Web platform SDK does not persistently record the read status of conversations or messages. You need to manually track the read timestamp for each conversation in localStorage.
  4. When rendering the message list, compare the sentTime of messages with the read timestamp stored in localStorage. If sentTime is earlier than the read timestamp, mark the message as read and update its UI status accordingly.

Electron

  1. When a user views unread messages in a one-to-one chat, call the sendReadReceiptMessage method to send a read receipt.
  2. Set up a read receipt listener using the addEventListener method.
  3. When the SDK receives a read receipt, it triggers the READ_RECEIPT_RECEIVED event.
  4. Upon receiving this event notification, the Electron platform should call the electronExtension.setMessageStatusToRead method to update the message status and refresh the corresponding message UI.

Sending Read Receipts​

Use the sendReadReceiptMessage method to send read receipts for messages in a specified conversation.

warning

Calling the sendReadReceiptMessage method only sends the receipt and does not automatically clear the unread message count. To clear unread counts, call the appropriate interface separately.

Interface​

RongIMLib.sendReadReceiptMessage(targetId, messageUId, timestamp)

Parameter Description​

ParameterTypeRequiredDescription
targetIdstringYesTarget conversation ID
messageUIdstringYesUnique ID of the read message
timestampnumberYesTimestamp of the last read message in the conversation (i.e., message.sentTime)

Example Code​

const messageUId = 'BS4O-QEBR-VJM6-9GPP';
const timestamp = 1632728573423;

RongIMLib.sendReadReceiptMessage('targetId', messageUId, timestamp).then(res => {
  if (res.code === 0) {
    console.log(res.code, res.data)
  } else {
    console.log(res.code, res.msg)
  }
}).catch(error => {
  console.log(error)
})

Setting Up Read Receipt Listeners​

Use the addEventListener method to set up a read receipt listener for receiving receipt notifications.

Example Code​

const Events = RongIMLib.Events
function onReadReceiptReceived({conversation, messageUId, sentTime}) {
    console.log(conversation, messageUId, sentTime)
}
RongIMLib.addEventListener(Events.READ_RECEIPT_RECEIVED, onReadReceiptReceived);

Removing Read Receipt Listeners​

At the end of the application lifecycle, it is recommended to remove bound event listeners using the removeEventListener method to prevent memory leaks.

Example Code​

RongIMLib.removeEventListener(Events.READ_RECEIPT_RECEIVED, onReadReceiptReceived);
Last updated on