Group Chat Message Read Receipt

Group chat supports the read receipt feature. After a local user sends a message to a group, they can request to obtain the read data for that message.

Implementation Approach

1. Group member A sends a message to the group. The message will reach the RC server, which then sends it to the target group.
2. After the message is sent, it is recommended to provide a button on the UI for the user to request to view the read status (displayed for 1–2 minutes). When the sender clicks this button, it indicates the need to obtain the message's read data, initiating a group message read receipt request (sendReadReceiptRequest).

tip

In group chat scenarios, it is recommended to let your users initiate requests themselves to obtain message read data on demand. If a read receipt request is initiated for every message and each group member sends a receipt response, it may result in a large number of read receipt responses in your application, affecting the user experience.

3. Other members in the group listen to the group message read receipt request (MESSAGE_RECEIPT_REQUEST) initiated by A and send a receipt response (sendReadReceiptResponseV2) in the group. For example, group member B can initiate a response after reading the group message sent by A.
4. User A listens for receipt responses in the group.
   • Before version 5.9.3, users needed to maintain this information locally, such as user_targetId_type:{'messageUid':['userId1', 'userId2']}. When displaying historical messages in the app, it could first match with cached data before displaying, for example, adjusting the message read count. The specific implementation can be tailored to the actual scenario.
   • After version 5.9.4, the SDK internally maintains the read receipt request information and carries the read receipt information in the historical message list: readReceiptInfo. The implementation differs on the Web and Electron platforms:
     • On the Web platform, the SDK internally caches the latest 30 read receipt information for each group conversation (based on the send time of the read receipt request), with a cache validity of 24 hours. When sending a message receipt response, there is no need to pass the messageList field; the SDK will organize all requests for that conversation and then send the response.
     • On the Electron platform, users need to first retrieve historical messages, extract data where message.messageDirection = MessageDirection.RECEIVE, readReceiptInfo.isReceiptRequestMessage = true, and readReceiptInfo.hasRespond = false, and organize them into the messageList parameter to send the receipt response.

Group Chat Read Receipt Sequence Diagram

Initiating a Read Receipt Request

Group members who wish to obtain the read status data of sent messages can initiate a group message read receipt request.

Call the sendReadReceiptRequest method to initiate a message read receipt request.

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

Parameter	Type	Description
targetId	string	The conversation targetId to which the message belongs, i.e., the group ID
messageUId	string	The messageUId of the message to be queried, e.g., BS4S-U34I-T4G6-9GPP.

Responding to a Read Receipt Request

tip

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

After other members in the group listen to the group message read receipt request, the message receiver needs to respond to the request to notify the sender that the message has been read. Multiple messages from the same user in a conversation can be responded to at once.

Call the sendReadReceiptResponseV2 method to respond to a message read receipt request.

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

Parameter	Type	Required	Description
targetId	string	Yes	Group ID
messageList	{[senderUserId: string]: string[]}	Yes	List of messages in the conversation that require a receipt response. Starting from version 5.9.4, this parameter is not required on the Web platform.
channelId	string	No

Listening to Message Receipt Request Events

Use addEventListener to set up a message receipt listener to receive message receipt requests.

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

Listening to Message Receipt Response Events

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

const Events = RongIMLib.Events
function onMessageReceiptResponse({conversation, receivedUserId, messageUIdList}) {
    // conversation: group conversation
    // receivedUserId: the message receiver, i.e., who responded to the previously sent message receipt request
    // messageUIdList: list of messageUIds that the message receiver has viewed
    console.log(conversation, receivedUserId, messageUIdList)
}
RongIMLib.addEventListener(
  Events.MESSAGE_RECEIPT_RESPONSE,
  onMessageReceiptResponse
)