Group Chat Message Read Receipt

Feature Description

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

warning

In group chat scenarios, it is recommended that users manually initiate read receipt requests as needed, rather than automatically requesting receipts for every message. This helps reduce the volume of read receipt messages and avoids negatively impacting the user experience.

Implementation Approach

1. Group member A sends a message to the group. The message first reaches the RC server, which then forwards it to other members in the target group.

2. After sending the message, it is recommended to provide a "View Read Status" button in the UI for the sender (suggested display duration: 1-2 minutes). When the sender clicks this button, a group message read receipt request is initiated (sendReadReceiptRequest).

3. Other group members listen for this receipt request event (MESSAGE_RECEIPT_REQUEST). After viewing the message, they actively send a receipt response (sendReadReceiptResponseV2).

4. The sender listens for group receipt response events and updates the read information display in real time:

• Versions 5.9.3 and earlier: Requires local maintenance of message receipt data, for example:

    user_targetId_type: {
      'messageUid': ['userId1', 'userId2']
    }

  When displaying historical messages, match the read count and details based on cached data.

• Versions 5.9.4 and later:

  1. The SDK automatically maintains read receipt request records internally. Historical message data includes the readReceiptInfo field.
  2. Web platform: The SDK caches the latest 30 receipt requests per group conversation (sorted by send time), with a cache validity of 24 hours. When sending receipt responses, there is no need to pass the messageList parameter—the SDK automatically organizes and reports the corresponding messages.
  3. Electron platform: Requires first pulling historical messages, filtering for those where message.messageDirection = MessageDirection.RECEIVE, readReceiptInfo.isReceiptRequestMessage = true, and readReceiptInfo.hasRespond = false, then organizing them into the messageList parameter before sending the receipt response.

Group Chat Read Receipt Sequence Diagram

Initiate Read Receipt Request

When a group member wants to obtain read status data for sent messages, they can call the sendReadReceiptRequest method to initiate a receipt request.

Interface

RongIMLib.sendReadReceiptRequest(targetId, messageUId)

Parameter Description

Parameter	Type	Required	Description
targetId	string	Yes	Target conversation ID
messageUId	string	Yes	The messageUId of the message for which read status is being queried

Example Code

RongIMLib.sendReadReceiptRequest('targetId', 'BS4S-U34I-T4G6-9GPP')
  .then((res) => {
    if (res.code === 0) {
      console.log(res.code, res.data)
    } else {
      console.log(res.code, res.msg)
    }
  })
  .catch((error) => {
    console.log(error)
  })

Respond to Read Receipt Request

tip

Starting from version 5.1.1, the sendReadReceiptResponse() method is deprecated, and the new sendReadReceiptResponseV2 method is added.

After other group members listen for the receipt request event, they should call the sendReadReceiptResponseV2 method to send a read receipt response after reading the message. This method allows responding to multiple messages from multiple users in the same conversation at once.

Interface

RongIMLib.sendReadReceiptResponseV2(targetId, messageList, channelId)

Parameter Description

Parameter	Type	Required	Description
targetId	string	Yes	Target conversation ID
messageList	{ [senderUserId: string]: string[] }	No	List of messages requiring receipt responses. Starting from version 5.9.4, this parameter is not required for the Web platform.
channelId	string	No	Channel ID

Example Code

const messageList = {
  '<userId1>': ['messageUId1', 'messageUId2'],
  '<userId2>': ['messageUId3', 'messageUId4']
};

RongIMLib.sendReadReceiptResponseV2('<targetId>', messageList).then(res => {
  if (res.code === 0) {
    console.log(res.code, res.data)
  } else {
    console.log(res.code, res.msg)
  }
}).catch(error => {
  console.log(error)
})

Listen for Message Receipt Request Events

Use the addEventListener method to set up a message receipt listener for receiving message receipt requests.

Example Code

const Events = RongIMLib.Events
function onMessageReceiptRequest({conversation, messageUId, senderUserId}) {
    // conversation: group conversation
    // messageUId: messageUId requiring receipt
    // senderUserId: sender's userId
    console.log(conversation, messageUId, senderUserId)
}
RongIMLib.addEventListener(
  Events.MESSAGE_RECEIPT_REQUEST,
  onMessageReceiptRequest
)

Listen for Message Receipt Response Events

Use the addEventListener method to set up a listener for message receipt responses to receive message receipts.

Example Code

const Events = RongIMLib.Events
function onMessageReceiptResponse({conversation, receivedUserId, messageUIdList}) {
    // conversation: group conversation
    // receivedUserId: the message recipient who responded to the earlier receipt request
    // messageUIdList: list of messageUIds viewed by the recipient
    console.log(conversation, receivedUserId, messageUIdList)
}
RongIMLib.addEventListener(
  Events.MESSAGE_RECEIPT_RESPONSE,
  onMessageReceiptResponse
)