Typing indicators

Typing indicators enable you to display which users are currently writing a message in a room. This feature can be used to display a message such as Sandi is typing…, or when a certain threshold is reached you could instead display Multiple people are typing… or 12 people are typing….

Subscribe to typing events by registering a listener. Typing events can be emitted when a user starts typing, and when they stop typing. Use the typing.subscribe() method in a room to subscribe to receive these updates:

JavaScript
Select...

const {unsubscribe} = room.typing.subscribe((event) => {
  console.log(event);
});

Copy
Copied!

The following is the structure of a typing event:

{
  "currentlyTyping": {
    "clemons",
    "zoranges",
  },
}

Copy
Copied!

The following are the properties of a typing event:

You can use the size of the currentlyTyping set to decide whether to display individual user names, or that multiple people are typing in your user interface.

Unsubscribe from typing events to remove previously registered listeners.

Use the unsubscribe() function returned in the subscribe() response to remove a listener:

JavaScript
Select...

// Initial subscription
const { unsubscribe } = room.typing.subscribe((event) => {
  console.log(`${event.clientId} is currently typing...`);
});


// To remove the listener
unsubscribe();

Copy
Copied!

Use the typing.unsubscribeAll() method to remove all typing listeners in a room:

JavaScript
Select...

await room.typing.unsubscribeAll();

Copy
Copied!

Use the typing.start() method to emit a typing event with isTyping set to true.

There is a timeout associated with start events. A stop event will be automatically emitted after it expires if one isn’t received before the timeout. The length of this timeout is customizable using the timeoutMs parameter that can be configured in the RoomOptions that you set when you create a room. The default is 10000ms.

JavaScript
Select...

await room.typing.start();

Copy
Copied!

Use the typing.stop() method to emit a typing event with isTyping set to false:

JavaScript
Select...

await room.typing.stop();

Copy
Copied!

Use the typing.get() method to retrieve a set of clientIds for all users that are currently typing in the room:

JavaScript
Select...

const currentlyTypingClientIds = await room.typing.get();

Copy
Copied!