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…. Typing events are emitted whenever a user starts or stops typing.
Subscribe to typing events
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 receive these updates:
const {unsubscribe} = room.typing.subscribe((event) => {
console.log(event);
});
CopyCopied!Typing event structure
The following is the structure of a typing event:
{
"currentlyTyping": {
"clemons",
"zoranges",
},
}
CopyCopied!The following are the properties of a typing event:
| Property | Description | Type |
|---|---|---|
| currentlyTyping | A set of all users currently typing. | Set |
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.
Use the unsubscribe() function returned in the subscribe() response to remove a typing listener:
// Initial subscription
const { unsubscribe } = room.typing.subscribe((event) => {
console.log(`${event.clientId} is currently typing...`);
});
// To remove the listener
unsubscribe();
CopyCopied!Use the typing.unsubscribeAll() method to remove all typing listeners in a room:
await room.typing.unsubscribeAll();
CopyCopied!Set typing status
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.
await room.typing.start();
CopyCopied!Use the stop() method to emit a typing event with isTyping set to false.
await room.typing.stop();
CopyCopied!Use the typing.get() method to retrieve a set of clientIds for all users that are currently typing in the room:
const currentlyTypingClientIds = await room.typing.get();
CopyCopied!