Delivery & Read Receipts

Mark Messages as Delivered

In other words, as a recipient, how do I inform the sender that I’ve received a message?

You can mark the messages for a particular conversation as read using the markAsDelivered() method. This method takes the below parameters as input:

Parameter	Information
messageId	The ID of the message above which all the messages for a particular conversation are to be marked as read.
receiverId	In case of one to one conversation message’s sender UID will be the receipt’s receiver Id. In case of group conversation message’s receiver Id will be the receipt’s receiver Id.
receiverType	Type of the receiver. Could be either of the two values( user or group).
senderId	The UID of the sender of the message.

Messages for both user & group conversations can be marked as read using this method.

Ideally, you would like to mark all the messages as delivered for any conversation when the user opens the chat window for that conversation. This includes two scenarios:

1. When the list of messages for the conversation is fetched: In this case you need to obtain the last message in the list of messages and pass the message ID of that message to the markAsDelivered() method.
2. When the user is on the chat window and a real-time message is received: In this case you need to obtain the message ID of the message and pass it to the markAsDelivered() method.

User

var messageId = "MESSAGE_ID";
var receiverId = "MESSAGE_RECEIVER_UID";
var receiverType = "user";
var senderId = "MESSAGE_SENDER_UID";
CometChat.markAsDelivered(messageId, receiverId, receiverType, senderId);

Group

var messageId = "MESSAGE_ID";
var receiverId = "MESSAGE_RECEIVER_GUID";
var receiverType = "group";
var senderId = "MESSAGE_SENDER_UID";
CometChat.markAsDelivered(messageId, receiverId, receiverType, senderId);

Typescript (User)

var messageId: string = "MESSAGE_ID";
var receiverId: string = "MESSAGE_RECEIVER_UID";
var receiverType: string = "user";
var senderId: string = "MESSAGE_SENDER_UID";
CometChat.markAsDelivered(messageId, receiverId, receiverType, senderId);

Typescript (Group)

var messageId: string = "MESSAGE_ID";
var receiverId: string = "MESSAGE_RECEIVER_GUID";
var receiverType: string = "group";
var senderId: string = "MESSAGE_SENDER_UID";
CometChat.markAsDelivered(messageId, receiverId, receiverType, senderId);

This method will mark all the messages before the messageId specified, for the conversation with receiverId and receiverType(user/group) as delivered.

In case you would like to be notified of an error if the receipts fail to go through you can use .then(successCallback, failureCallback) of the markAsDelivered method.

User

CometChat.markAsDelivered(
  message.getId(),
  message.getSender().getUid(),
  "user",
  message.getSender().getUid()
).then(
  () => {
    console.log("mark as delivered success.");
  },
  (error) => {
    console.log(
      "An error occurred when marking the message as delivered.",
      error
    );
  }
);

Group

CometChat.markAsDelivered(
  message.getId(),
  message.getReceiverUid(),
  "group",
  message.getSender().getUid()
).then(
  () => {
    console.log("mark as delivered success.");
  },
  (error) => {
    console.log(
      "An error occurred when marking the message as delivered.",
      error
    );
  }
);

Typescript (User)

var messageId: string = "MESSAGE_ID";
var receiverId: string = "MESSAGE_SENDER_UID";
var receiverType: string = "user";
var senderId: string = "MESSAGE_SENDER_UID";
CometChat.markAsDelivered(messageId, receiverId, receiverType, senderId).then(
  () => {
    console.log("mark as delivered success.");
  },
  (error: CometChat.CometChatException) => {
    console.log(
      "An error occurred when marking the message as delivered.",
      error
    );
  }
);

Typescript (Group)

var messageId: string = "MESSAGE_ID";
var receiverId: string = "MESSAGE_RECEIVER_GUID";
var receiverType: string = "group";
var senderId: string = "MESSAGE_SENDER_UID";
CometChat.markAsDelivered(messageId, receiverId, receiverType, senderId).then(
  () => {
    console.log("mark as delivered success.");
  },
  (error: CometChat.CometChatException) => {
    console.log(
      "An error occurred when marking the message as delivered.",
      error
    );
  }
);

Another option the CometChat SDK provides is to pass the entire message object to the markAsDelivered() method.

Mark as Delivered

CometChat.markAsDelivered(message);

TypeScript

let message: CometChat.BaseMessage;
CometChat.markAsDelivered(message);

In case you would like to be notified of an error if the receipts fail to go through you can use .then(successCallback, failureCallback) of the markAsDelivered method.

Mark as Delivered

CometChat.markAsDelivered(message).then(
  () => {
    console.log("mark as delivered success.");
  },
  (error) => {
    console.log(
      "An error occurred when marking the message as delivered.",
      error
    );
  }
);

TypeScript

let message: CometChat.BaseMessage;
CometChat.markAsDelivered(message).then(
  () => {
    console.log("mark as delivered success.");
  },
  (error: CometChat.CometChatException) => {
    console.log(
      "An error occurred when marking the message as delivered.",
      error
    );
  }
);

Mark Messages as Read

In other words, as a recipient, how do I inform the sender I’ve read a message?

You can mark the messages for a particular conversation as read using the markAsRead() method. This method takes the below parameters as input:

Parameter	Information
messageId	The ID of the message above which all the messages for a particular conversation are to be marked as read.
receiverId	In case of one to one conversation message’s sender UID will be the receipt’s receiver Id. In case of group conversation message’s receiver Id will be the receipt’s receiver Id
receiverType	Type of the receiver. Could be either of the two values( user or group)
senderId	The UID of the sender of the message.

Messages for both user and group conversations can be marked as read using this method.

Ideally, you would like to mark all the messages as read for any conversation when the user opens the chat window for that conversation. This includes two scenarios:

1. When the list of messages for the conversation is fetched: In this case you need to obtain the last message in the list of messages and pass the message ID of that message to the markAsRead() method.
2. When the user is on the chat window and a real-time message is received: In this case you need to obtain the message ID of the message and pass it to the markAsRead() method

User Conversation

var messageId = "MESSAGE_ID";
var receiverId = "MESSAGE_SENDER_UID";
var receiverType = "user";
var senderId = "MESSAGE_SENDER_UID";
CometChat.markAsRead(messageId, receiverId, receiverType, senderId);

Group Conversation

var messageId = "MESSAGE_ID";
var receiverId = "MESSAGE_RECEIVER_GUID";
var receiverType = "group";
var senderId = "MESSAGE_SENDER_UID";
CometChat.markAsRead(messageId, receiverId, receiverType, senderId);

User(TypeScript)

var messageId: string = "MESSAGE_ID";
var receiverId: string = "MESSAGE_SENDER_UID";
var receiverType: string = "user";
var senderId: string = "MESSAGE_SENDER_UID";
CometChat.markAsRead(messageId, receiverId, receiverType, senderId);

Group(TypeScript)

var messageId: string = "MESSAGE_ID";
var receiverId: string = "MESSAGE_RECEIVER_GUID";
var receiverType: string = "group";
var senderId: string = "MESSAGE_SENDER_UID";
CometChat.markAsRead(messageId, receiverId, receiverType, senderId);

This method will mark all the messages before the messageId specified, for the conversation with receiverId and receiverType(user/group) as read.

In case you would like to be notified of an error if the receipts fail to go through you can use .then(successCallback, failureCallback) of the markAsDelivered method.

User

CometChat.markAsRead(
  message.getId(),
  message.getSender().getUid(),
  "user",
  message.getSender().getUid()
).then(
  () => {
    console.log("mark as read success.");
  },
  (error) => {
    console.log("An error occurred when marking the message as read.", error);
  }
);

Group

CometChat.markAsRead(
  message.getId(),
  message.getReceiverUid(),
  "group",
  message.getSender().getUid()
).then(
  () => {
    console.log("mark as read success.");
  },
  (error) => {
    console.log("An error occurred when marking the message as read.", error);
  }
);

User(TypeScript)

var messageId: string = "MESSAGE_ID";
var receiverId: string = "MESSAGE_SENDER_UID";
var receiverType: string = "user";
var senderId: string = "MESSAGE_SENDER_UID";
CometChat.markAsRead(messageId, receiverId, receiverType, senderId).then(
  () => {
    console.log("mark as read success.");
  },
  (error: CometChat.CometChatException) => {
    console.log("An error occurred when marking the message as read.", error);
  }
);

Group(TypeScript)

var messageId: string = "MESSAGE_ID";
var receiverId: string = "MESSAGE_RECEIVER_GUID";
var receiverType: string = "group";
var senderId: string = "MESSAGE_SENDER_UID";
CometChat.markAsRead(messageId, receiverId, receiverType, senderId).then(
  () => {
    console.log("mark as read success.");
  },
  (error: CometChat.CometChatException) => {
    console.log("An error occurred when marking the message as read.", error);
  }
);

Another option the CometChat SDK provides is to pass the entire message object to the markAsRead() method.If the message object is the last message, the entire conversation will be marked as read.

Mark as Read

CometChat.markAsRead(message);

TypeScript

let message: CometChat.BaseMessage;
CometChat.markAsRead(message);

In case you would like to be notified of an error if the receipts fail to go through you can use .then(successCallback, failureCallback) of the markAsDelivered method.

Mark as Read

CometChat.markAsRead(message).then(
  () => {
    console.log("mark as read success.");
  },
  (error) => {
    console.log("An error occurred when marking the message as read.", error);
  }
);

TypeScript

let message: CometChat.BaseMessage;
CometChat.markAsRead(message).then(
  () => {
    console.log("mark as read success.");
  },
  (error: CometChat.CometChatException) => {
    console.log("An error occurred when marking the message as read.", error);
  }
);

Mark Messages as Unread

The Mark as Unread feature allows users to designate specific messages or conversations as unread, even if they have been previously viewed.

This feature is valuable for users who want to revisit and respond to important messages or conversations later, ensuring they don’t forget or overlook them.

In other words, how I can mark a message as unread?

You can mark the messages for a particular conversation as unread using the markAsUnread() method. This method takes the below parameters as input:

Parameter	Information
message	To mark a message as unread, pass a non-null BaseMessage instance to the markAsUnread() function. All messages below that message in the conversation will contribute to the unread messages count. Example: When User B sends User A a total of 10 messages, and User A invokes the markAsUnread() method on the fifth message, all messages located below the fifth message within the conversation list will be designated as unread. This results in a notification indicating there are 5 unread messages in the conversation list.
listener	The callback listener that will be called on success or error. This should be a non-null CallbackListener instance.

Mark as Unread

CometChat.markAsUnread(message);

TypeScript

let message: CometChat.BaseMessage;
CometChat.markAsUnread(message);

In case you would like to be notified of an error if the receipts fail to go through you can use .then(successCallback, failureCallback).

Mark as Unread

CometChat.markAsUnread(message).then(
  () => {
    console.log("mark as unread success.");
  },
  (error) => {
    console.log("An error occurred when marking the message as unread.", error);
  }
);

TypeScript

let message: CometChat.BaseMessage;
CometChat.markAsUnread(message).then(
  () => {
    console.log("mark as read success.");
  },
  (error: CometChat.CometChatException) => {
    console.log("An error occurred when marking the message as read.", error);
  }
);

Receive Delivery & Read Receipts

In other words, as a recipient, how do I know when a message I sent has been delivered or read by someone?

Real-time events

1. onMessagesDelivered() - This event is triggered when a message is delivered to a user.
2. onMessagesRead() - This event is triggered when a message is read by a user.
3. onMessagesDeliveredToAll() - This event is triggered when a group message is delivered to all members of the group. This event is only for Group conversations.
4. onMessagesReadByAll() - This event is triggered when a group message is read by all members of the group. This event is only for Group conversations.

Message Listener

let listenerId = "UNIQUE_LISTENER_ID";

CometChat.addMessageListener(
  "listenerId",
  new CometChat.MessageListener({
    onMessagesDelivered: (messageReceipt) => {
      console.log("Message is delivered to a user: ", { messageReceipt });
    },
    onMessagesRead: (messageReceipt) => {
      console.log("Message is read by a user: ", { messageReceipt });
    },
    /** This event is only for Group Conversation. */
    onMessagesDeliveredToAll: (messageReceipt) => {
      console.log("Message delivered to all members of group: ", {
        messageReceipt,
      });
    },
    /** This event is only for Group Conversation. */
    onMessagesReadByAll: (messageReceipt) => {
      console.log("Message read by all members of group: ", { messageReceipt });
    },
  })
);

TypeScript

let listenerId: string = "UNIQUE_LISTENER_ID";

CometChat.addMessageListener(
  listenerId,
  new CometChat.MessageListener({
    onMessagesDelivered: (messageReceipt: CometChat.MessageReceipt) => {
      console.log("Message is delivered to a user: ", { messageReceipt });
    },
    onMessagesRead: (messageReceipt: CometChat.MessageReceipt) => {
      console.log("Message is read by a user: ", { messageReceipt });
    },
    /** This event is only for Group Conversation. */
    onMessagesDeliveredToAll: (messageReceipt: CometChat.MessageReceipt) => {
      console.log("Message delivered to all members of group: ", {
        messageReceipt,
      });
    },
    /** This event is only for Group Conversation. */
    onMessagesReadByAll: (messageReceipt: CometChat.MessageReceipt) => {
      console.log("Message read by all members of group: ", { messageReceipt });
    },
  })
);

You will receive events in the form of MessageReceipt objects. The message receipt contains the below parameters:

Parameter	Information
messageId	The Id of the message prior to which all the messages for that particular conversation have been marked as read.
sender	User object containing the details of the user who has marked the message as read. System User for deliveredToAll & readByAll events.
receiverId	Id of the receiver whose conversation has been marked as read.
receiverType	type of the receiver (user/group)
receiptType	Type of the receipt (read/delivered)
deliveredAt	The timestamp of the time when the message was delivered. This will only be present if the receiptType is delivered.
readAt	The timestamp of the time when the message was read. This will only be present when the receiptType is read.

Missed Receipts

You will receive message receipts when you load offline messages. While fetching messages in bulk, the message object will have two fields i.e. deliveredAt and readAt which hold the timestamp for the time the message was delivered and read respectively. Using these two variables, the delivery and read status for a message can be obtained.

However, for a group message, if you wish to fetch the deliveredAt and readAt fields of individual member of the group you can use the below-described method.

Receipt History for a Single Message

To fetch the message receipts, you can use the getMessageReceipts() method.

Get Message Receipt

let messageId = msgId;
CometChat.getMessageReceipts(messageId).then(
  (receipts) => {
    console.log("Message details fetched:", receipts);
  },
  (error) => {
    console.log("Error in getting messag details ", error);
  }
);

TypeScript

let messageId: number = 1;
CometChat.getMessageReceipts(messageId).then(
  (receipts: CometChat.MessageReceipt[]) => {
    console.log("Message details fetched:", receipts);
  },
  (error: CometChat.CometChatException) => {
    console.log("Error in getting messag details ", error);
  }
);

You will receive a list of MessageReceipt objects.

The following features will be available only if the Enhanced Messaging Status feature is enabled for your app.

• onMessagesDeliveredToAll event,
• onMessagesReadByAll event,
• deliveredAt field in a group message,
• readAt field in a group message.
• markAsUnread method.