Typing indicator

Layer provides a simple way to let applications send and receive typing indicator events. This lets you implement interfaces to inform users that another participant is actively engaged in communicating with them.

Sending typing indicators

The simplest way to setup typing indicators to be sent for your user to other participants is with a TypingListener class:

var typingListener = client.createTypingListener(document.getElementById('mytextarea'));
typingListener.setConversation(mySelectedConversation);

This also works with Channels:

var typingListener = client.createTypingListener(document.getElementById('mytextarea'));
typingListener.setConversation(mySelectedChannel);

The typing listener will monitor the specified input or textarea for changes and automatically broadcast when the user has started or stopped typing into that input. The only thing that the application must do is notify the typingListener whenever changing Conversations/Channels:

typingListener.setConversation(anotherConversation);
typingListener.setConversation(anotherChannel);

Receiving typing indicators

Applications are notified of typing indicator events by subscribing to the Layer Client’s typing-indicator-change events:

client.on('typing-indicator-change', function(evt) {
    if (evt.conversationId === selectedConversation.id) {
        var typingUsers = evt.typing;
        var typingNames = typingUsers.map(function(userId) {
            return lookupDisplayName(userId);
        });

        var pausedUsers = evt.paused;
        var pausedNames = pausedUsers.map(function(userId) {
            return lookupDisplayName(userId);
        });

        console.log('The following users are typing: ' + typingNames.join(', '));
        console.log('The following users are paused: ' + pausedNames.join(', '));
    }
});

The evt in the above snippet contains three properties:

  • conversationId: The ID of the Channel or Conversation that users are typing into. Use this to ignore typing events for channels and conversations that are not on-screen
  • typing: An array of Identity objects for users who are currently typing
  • paused: An array of Identity objects for users who were recently typing but appear to have paused briefly.

The lookupDisplayName function assumes that your userId property is not a displayable name and that you will need to do some sort of lookup in your system to find a suitable displayable name.

Note

Users who are not in either the “typing” or “paused” arrays are considered to have finished typing. There is no separate field containing the users who have finished or are not typing.

How to use

Typing indicator events are ephemeral, meaning they are not persisted by Layer. States are automatically updated by the server if a client does not post any updates; a user who is “typing” becomes “paused” after 5 seconds of inactivity, and a user who is “paused” becomes “finished” after an additional 5 seconds. This means that even if a client loses its connection, a user will shortly become “finished” and removed from the typing-indicator-change event.

Querying Metadata