Threaded Messages

Send, receive, and fetch threaded messages (replies) in user and group conversations using the CometChat React Native SDK.

Quick Reference - Send a threaded message and fetch thread replies:

// Send a text message in a thread
let textMessage = new CometChat.TextMessage("UID", "Hello", CometChat.RECEIVER_TYPE.USER);
textMessage.setParentMessageId(100);
CometChat.sendMessage(textMessage).then(
  message => console.log("Sent:", message),
  err => console.log("Error:", err)
);

// Fetch messages for a thread
let messagesRequest = new CometChat.MessagesRequestBuilder()
  .setLimit(30)
  .setParentMessageId(100)
  .build();
messagesRequest.fetchPrevious().then(
  messages => console.log("Thread messages:", messages),
  error => console.log("Error:", error)
);

Available via: SDK | REST API | UI Kits

Messages that are started from a particular message are called Threaded Messages or simply threads. Each thread is attached to a message which is the parent message for that thread.

Send Message in a Thread

As mentioned in the Send a Message section, you can either send a message to a user or a group based on the receiverType and the UID/GUID specified for the message. A message can belong to any of the following types:

1. Text Message
2. Media Message
3. Custom Message

Any of the above messages can be sent in a thread. A thread is identified based on the parent message, so while sending a message the parentMessageId must be set to indicate that the message belongs to the thread with the specified parentMessageId.

This can be achieved using the setParentMessageId() method provided by the object of the TextMessage, MediaMessage, and CustomMessage class. The id specified in the setParentMessageId() method maps the message sent to the particular thread.

Example to send a text message in a thread in a user conversation:

JavaScript

let textMessage = new CometChat.TextMessage(UID, "Hello", CometChat.RECEIVER_TYPE.USER);
textMessage.setParentMessageId(100);

CometChat.sendMessage(textMessage).then(
  message => {
      console.log('Message sent successfully', message);
  }, err => {
      console.log('err', err);
  }
)

TypeScript

let receiverId = "UID",
  receiverType: string = CometChat.RECEIVER_TYPE.USER,
  textMessage: CometChat.TextMessage = new CometChat.TextMessage(receiverId, "Hello", receiverType),
  messageId: number = 100;

textMessage.setParentMessageId(messageId);

CometChat.sendMessage(textMessage).then(
  (message: CometChat.TextMessage) => {
      console.log('Message sent successfully', message);
  }, (error: CometChat.CometChatException) => {
      console.log('Message sending failed', error);
  }
);

The above snippet shows how a message with the text “Hello” can be sent in the thread with parentMessageId 100.

Similarly, using the setParentMessageId() method, Media and Custom Messages can be sent in threads too.

Receiving Real-Time Messages

The procedure to receive real-time messages is exactly the same as mentioned in the Receive Messages section. This can be achieved using the MessageListener class provided by the SDK.

To add a MessageListener, you can use the addMessageListener() method of the SDK. The only thing that needs to be checked is if the received message belongs to the active thread. This can be done using the parentMessageId field of the message object.

JavaScript

var listenerID = "UNIQUE_LISTENER_ID";
var activeThreadId = 100;

CometChat.addMessageListener(
listenerID,
new CometChat.MessageListener({
  onTextMessageReceived: textMessage => {
      if(textMessage.getParentMessageId() == activeThreadId) {
          console.log("Text message received for active thread.", textMessage);
      }
  },
  onMediaMessageReceived: mediaMessage => {
      if(mediaMessage.getParentMessageId() == activeThreadId) {
          console.log("Media message received for active thread.", textMessage);
      }
  },
  onCustomMessageReceived: customMessage => {
      if(customMessage.getParentMessageId() == activeThreadId) {
          console.log("Custom message received for active thread.", textMessage);
      }
  }
})
);

TypeScript

var listenerID: string = "UNIQUE_LISTENER_ID",
  activeThreadId: number = 100;

CometChat.addMessageListener(
  listenerID,
  new CometChat.MessageListener({
      onTextMessageReceived: (textMessage: CometChat.TextMessage) => {
          if (textMessage.getParentMessageId() == activeThreadId) {
              console.log("Text message received for active thread.", textMessage);
          }
      },
      onMediaMessageReceived: (mediaMessage: CometChat.MediaMessage) => {
          if (mediaMessage.getParentMessageId() == activeThreadId) {
              console.log("Media message received for active thread.", mediaMessage);
          }
      },
      onCustomMessageReceived: (customMessage: CometChat.CustomMessage) => {
          if (customMessage.getParentMessageId() == activeThreadId) {
              console.log("Custom message received for active thread.", customMessage);
          }
      }
  })
); 

Remember to remove your listener on unmount. Always call CometChat.removeMessageListener("UNIQUE_LISTENER_ID") when the component unmounts (e.g., in a useEffect cleanup or componentWillUnmount) to avoid memory leaks and duplicate event handling.

Fetch All Messages for a Thread

You can fetch all the messages belonging to a particular thread by using the MessagesRequest class. To get an object of the MessagesRequest class, use the MessagesRequestBuilder class and call the setParentMessageId() method to inform the SDK that you only need the messages belonging to the thread with the specified parentMessageId.

Once you have the object of the MessagesRequest class, call the fetchPrevious() method to get the latest messages in the thread. In one call, a maximum of 100 messages can be fetched. To fetch the next set of messages, call the fetchPrevious() method again on the same object.

JavaScript

let limit = 30;
let parentMessageId = 1;
let messagesRequest = new CometChat.MessagesRequestBuilder()
                      .setLimit(limit)
                      .setParentMessageId(parentMessageId)
                      .build();
     
messagesRequest.fetchPrevious().then(
  messages => {
      console.log("Messages for thread fetched successfully", messages);
  }, error => {
      console.log("Message fetching failed with error:", error);
  }
);

TypeScript

let limit: number = 30,
  parentMessageId: number = 1,
  messagesRequest: CometChat.MessagesRequest = new CometChat.MessagesRequestBuilder()
      .setLimit(limit)
      .setParentMessageId(parentMessageId)
      .build();

messagesRequest.fetchPrevious().then(
  (messages: CometChat.BaseMessage[]) => {
      console.log("Messages for thread fetched successfully", messages);
  }, (error: CometChat.CometChatException) => {
      console.log("Message fetching failed with error:", error);
  }
);

Avoid Threaded Messages in User/Group Conversations

While fetching messages for normal user/group conversations using the MessagesRequest, threaded messages will be included in the list by default. To exclude threaded messages from the list of user/group messages, use the hideReplies() method of the MessagesRequestBuilder class. This method takes a boolean argument which, when set to true, excludes messages belonging to threads from the list of messages.

To User

let UID = "UID";
let limit = 30;
let messagesRequest = new CometChat.MessagesRequestBuilder()
                      .setUID(UID)
                      .setLimit(limit)
                      .hideReplies(true)
                      .build();
     
messagesRequest.fetchPrevious().then(
  messages => {
      console.log("Messages for thread fetched successfully", messages);
  }, error => {
      console.log("Message fetching failed with error:", error);
  }
);

To Group

let GUID = "GUID";
let limit = 30;
let messagesRequest = new CometChat.MessagesRequestBuilder()
                      .setGUID(GUID)
                      .setLimit(limit)
                      .hideReplies(true)
                      .build();
     
messagesRequest.fetchPrevious().then(
  messages => {
      console.log("Messages for thread fetched successfully", messages);
  }, error => {
      console.log("Message fetching failed with error:", error);
  }
);

TypeScript (User)

let UID: string = "UID",
  limit: number = 30,
  messagesRequest: CometChat.MessagesRequest = new CometChat.MessagesRequestBuilder()
      .setUID(UID)
      .setLimit(limit)
      .hideReplies(true)
      .build();

messagesRequest.fetchPrevious().then(
  (messages: CometChat.BaseMessage[]) => {
      console.log("Messages fetched successfully", messages);
  }, (error: CometChat.CometChatException) => {
      console.log("Message fetching failed with error:", error);
  }
);

TypeScript (Group)

let GUID: string = "GUID",
  limit: number = 30,
  messagesRequest: CometChat.MessagesRequest = new CometChat.MessagesRequestBuilder()
      .setGUID(GUID)
      .setLimit(limit)
      .hideReplies(true)
      .build();

messagesRequest.fetchPrevious().then(
  (messages: CometChat.BaseMessage[]) => {
      console.log("Messages fetched successfully", messages);
  }, (error: CometChat.CometChatException) => {
      console.log("Message fetching failed with error:", error);
  }
);

The above snippet will return messages between the logged-in user and cometchat-uid-1 excluding all the threaded messages belonging to the same conversation.

Best Practices and Troubleshooting

How do I identify which thread a message belongs to?

Every message object has a parentMessageId field. If this field is set (non-zero), the message is part of a thread. Use message.getParentMessageId() to retrieve the parent message ID and match it against the active thread.

Why am I receiving thread messages in my main conversation list?

By default, MessagesRequest includes threaded messages. Use the hideReplies(true) method on MessagesRequestBuilder when fetching messages for the main conversation to exclude thread replies.

What is the maximum number of messages I can fetch per request?

You can fetch a maximum of 100 messages per fetchPrevious() call. Use the setLimit() method on MessagesRequestBuilder to control the number of messages returned. To load more messages, call fetchPrevious() again on the same MessagesRequest object.

Can I send media or custom messages in a thread?

Yes. The setParentMessageId() method is available on TextMessage, MediaMessage, and CustomMessage objects. Set the parent message ID before calling CometChat.sendMessage() to send any message type within a thread.

Next Steps

Send a Message

Learn how to send text, media, and custom messages to users and groups.

Receive Messages

Set up real-time message listeners and fetch message history.

Message Filtering

Filter messages by type, category, tags, timestamps, and more.

Message Structure

Understand message categories, types, and the message hierarchy.