One-to-One Chat Message Read Receipt

When user A sends a message to user B, and user B calls the send read receipt interface, user A will receive a read receipt notification in the receipt listener.

Implementation Approach

The message read receipt feature can be implemented through the following steps. The implementation process differs between the Web and Electron platforms:

• Web

  1. After the user views unread messages in a one-to-one chat, call sendReadReceiptMessage to send a read receipt.
  2. Set up a message receipt listener via addEventListener.
  3. The SDK dispatches the READ_RECEIPT_RECEIVED event when a message read receipt is received. On the Web platform, the SDK does not track the read status of each conversation and message. You need to record the read time for each conversation in localStorage.
  4. When rendering the message list, determine whether a message has been read based on the time recorded in localStorage and update the corresponding message interface.

• Electron

  1. After the user views unread messages in a one-to-one chat, call sendReadReceiptMessage to send a read receipt.
  2. Set up a message receipt listener via addEventListener.
  3. The SDK dispatches the READ_RECEIPT_RECEIVED event when a message read receipt is received.
  4. On the Electron platform, upon receiving the READ_RECEIPT_RECEIVED notification, you need to call the electronExtension.setMessageStatusToRead method to update the message read status and refresh the corresponding message interface.

tip

Calling the sendReadReceiptMessage interface does not clear the unread count. You need to call the clear unread count interface separately.

Sending Receipts

Send a message read receipt for a conversation via sendReadReceiptMessage.

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)
})

Parameter	Type	Description
targetId	string	The user ID of the recipient of the receipt
messageUId	string	The UId of the read message
timestamp	number	The sent timestamp of the last read message in the conversation, i.e., the sentTime of the Message

Setting Up a Message Receipt Listener

Set up a message receipt listener via addEventListener to receive message receipts.

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

Removing the Message Receipt Listener

When the application lifecycle ends, you should remove the bound event via removeEventListener.

RongIMLib.removeEventListener(Events.READ_RECEIPT_RECEIVED, onReadReceiptReceived);