Typing Indicators

Send and receive real-time typing indicators using the CometChat JavaScript SDK.

AI Integration Quick Reference

// Start typing indicator
const typing = new CometChat.TypingIndicator("UID", CometChat.RECEIVER_TYPE.USER);
CometChat.startTyping(typing);

// Stop typing indicator
CometChat.endTyping(typing);

// Listen for typing events
CometChat.addMessageListener("LISTENER_ID", new CometChat.MessageListener({
  onTypingStarted: (indicator) => console.log("Typing started:", indicator),
  onTypingEnded: (indicator) => console.log("Typing ended:", indicator)
}));

Send a Typing Indicator

Start Typing

Use startTyping() with a TypingIndicator object to notify the receiver that you’re typing.

Start Typing (User)

let receiverId = "UID";
let receiverType = CometChat.RECEIVER_TYPE.USER;

let typingNotification = new CometChat.TypingIndicator(receiverId, receiverType);
CometChat.startTyping(typingNotification);  

Start Typing (Group)

let receiverId = "GUID";
let receiverType = CometChat.RECEIVER_TYPE.GROUP;

let typingNotification = new CometChat.TypingIndicator(receiverId,receiverType);
CometChat.startTyping(typingNotification);

Start User Typing (Typescript)

let receiverId: string = "UID";
let receiverType: string = CometChat.RECEIVER_TYPE.USER;

let typingNotification: CometChat.TypingIndicator = new CometChat.TypingIndicator(receiverId, receiverType);
CometChat.startTyping(typingNotification);

Start Group Typing (Typescript)

let receiverId: string = "GUID";
let receiverType: string = CometChat.RECEIVER_TYPE.GROUP;

let typingNotification: CometChat.TypingIndicator = new CometChat.TypingIndicator(receiverId, receiverType);
CometChat.startTyping(typingNotification);

Stop Typing

Use endTyping() to notify the receiver that you’ve stopped typing.

Stop Typing (User)

let receiverId = "UID";
let receiverType = CometChat.RECEIVER_TYPE.USER;

let typingNotification = new CometChat.TypingIndicator(receiverId, receiverType);
CometChat.endTyping(typingNotification);

Stop Typing (Group)

let receiverId = "GUID";
let receiverType = CometChat.RECEIVER_TYPE.GROUP;

let typingNotification = new CometChat.TypingIndicator(receiverId, receiverType);
CometChat.endTyping(typingNotification);

Stop User Typing (Typescript)

let receiverId: string = "UID";
let receiverType: string = CometChat.RECEIVER_TYPE.USER;

let typingNotification: CometChat.TypingIndicator = new CometChat.TypingIndicator(receiverId, receiverType);
CometChat.endTyping(typingNotification);

Stop Group Typing (Typescript)

let receiverId: string = "GUID";
let receiverType: string = CometChat.RECEIVER_TYPE.GROUP;

let typingNotification: CometChat.TypingIndicator = new CometChat.TypingIndicator(receiverId, receiverType);
CometChat.endTyping(typingNotification);

Use setMetadata() on TypingIndicator to pass additional custom data. Retrieve it with getMetadata() on the receiver side.

Real-time Typing Indicators

Use onTypingStarted and onTypingEnded in MessageListener to receive typing events.

Message Listener

let listenerId = "UNIQUE_LITENER_ID";

CometChat.addMessageListener(
listenerId,
new CometChat.MessageListener({
  onTypingStarted: typingIndicator => {
    console.log("Typing started :", typingIndicator);
  },
  onTypingEnded: typingIndicator => {
    console.log("Typing ended :", typingIndicator);
  }
})
);

TypeScript

let listenerId: string = "UNIQUE_LITENER_ID";

CometChat.addMessageListener(
  listenerId,
  new CometChat.MessageListener({
      onTypingStarted: (typingIndicator: CometChat.TypingIndicator) => {
          console.log("Typing started :", typingIndicator);
      },
      onTypingEnded: (typingIndicator: CometChat.TypingIndicator) => {
          console.log("Typing ended :", typingIndicator);
      }
  })
);

The TypingIndicator object contains:

Parameter	Description
sender	User object of the person typing
receiverId	UID or GUID of the receiver
receiverType	CometChat.RECEIVER_TYPE.USER or GROUP
metadata	Additional custom data

The onTypingStarted and onTypingEnded listener callbacks receive a TypingIndicator object. Access the data using getter methods:

Field	Getter	Return Type	Description
receiverId	getReceiverId()	string	UID or GUID of the typing indicator recipient
receiverType	getReceiverType()	string	Type of receiver ("user" or "group")
sender	getSender()	User	The user who is typing
metadata	getMetadata()	Object	Additional custom data sent with the indicator

---

Next Steps

Delivery & Read Receipts

Track when messages are delivered and read

Transient Messages

Send ephemeral real-time messages like live reactions