Typing

Open in

The Typing interface provides methods for sending and receiving typing indicators in a chat room. Access it via room.typing.

JavaScript

1

const typing = room.typing;

Properties

The Typing interface has the following properties:

currentSet<string>
The current set of client IDs who are typing in the room.

Start typing

typing.keystroke(): Promise<void>

Sends a typing started event to notify other users that the current user is typing.

Events are throttled according to the heartbeatThrottleMs room option to prevent excessive network traffic. If called within the throttle interval, the operation becomes a no-op. Multiple rapid calls are serialized to maintain consistency.

The room must be attached and the connection must be in the connected state.

JavaScript

1

2

// Call this when the user starts typing
await room.typing.keystroke();

Returns

Promise<void>

Returns a promise. The promise is fulfilled when the typing event has been sent, or rejected with an ErrorInfo object.

Stop typing

typing.stop(): Promise<void>

Sends a typing stopped event to notify other users that the current user has stopped typing.

If the user is not currently typing, this operation is a no-op. Multiple rapid calls are serialized to maintain consistency.

The room must be attached and the connection must be in the connected state.

JavaScript

1

2

// Call this when the user stops typing or clears the input
await room.typing.stop();

Returns

Promise<void>

Returns a promise. The promise is fulfilled when the stop event has been sent, or rejected with an ErrorInfo object.

Subscribe to typing events

typing.subscribe(listener: TypingListener): Subscription

Subscribes to typing events from users in the chat room. Receives updates whenever a user starts or stops typing, providing real-time feedback about who is currently composing messages.

The room must be attached to receive typing events.

JavaScript

1

2

3

4

5

6

const { unsubscribe } = room.typing.subscribe((event) => {
  console.log('Currently typing:', Array.from(event.currentlyTyping));
});

// To stop receiving typing events
unsubscribe();

Parameters

The subscribe() method takes the following parameters:

listenerrequiredTypingEvent
Callback invoked when the typing state changes.

Returns

Subscription

Returns an object with the following methods:

Unsubscribe from typing events

unsubscribe(): void

Call unsubscribe() to stop receiving typing events.

Example

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

const room = await chatClient.rooms.get('my-room', {
  typing: {
    heartbeatThrottleMs: 5000 // Throttle typing events to every 5 seconds
  }
});

await room.attach();

// Subscribe to typing events
const { unsubscribe } = room.typing.subscribe((event) => {
  const typingUsers = Array.from(event.currentlyTyping);

  if (typingUsers.length === 0) {
    console.log('No one is typing');
  } else if (typingUsers.length === 1) {
    console.log(`${typingUsers[0]} is typing...`);
  } else {
    console.log(`${typingUsers.join(', ')} are typing...`);
  }
});

// Integrate with an input field
const inputField = document.getElementById('message-input');

inputField.addEventListener('input', async () => {
  if (inputField.value.length > 0) {
    await room.typing.keystroke();
  } else {
    await room.typing.stop();
  }
});

inputField.addEventListener('blur', async () => {
  await room.typing.stop();
});

// Check who is currently typing
console.log('Currently typing:', room.typing.current);

// Clean up
unsubscribe();