Typing Indicators

Send a Typing Indicator

In other words, as a sender, how do I let the recipient(s) know that I'm typing?

Start Typing

You can use the startTyping() method to inform the receiver that the logged in user has started typing. The receiver will receive this information in the onTypingStarted() method of the MessageListener class. In order to send the typing indicator, you need to use the TypingIndicator class.

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

You can use the endTyping() method to inform the receiver that the logged in user has stopped typing. The receiver will receive this information in the onTypingEnded() method of the MessageListener class. In order to send the typing indicator, you need to use the TypingIndicator class.

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

Custom Data

You can use the metadata field of the TypingIndicator class to pass additional data along with the typing indicators. The metadata field is a JSONObject and can be set using the setMetadata() method of the TypingIndicator class. This data will be received at the receiver end and can be obtained using the getMetadata() method.

Real-time Typing Indicators

In other words, as a recipient, how do I know when someone is typing?

You will receive the typing indicators in the onTypingStarted() and the onTypingEnded() method of the registered MessageListener class.

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 class consists of the below parameters:

Parameter	Information
sender	An object of the User class holding all the information. related to the sender of the typing indicator.
receiverId	Unique Id of the receiver. This can be the Id of the group or the user the typing indicator is sent to.
receiverType	This parameter indicates if the typing indicator is to be sent to a user or a group. The possible values are: 1. CometChat.RECEIVER_TYPE.USER 2. CometChat.RECEIVER_TYPE.GROUP
metadata	A JSONObject to provider additional data.