Typing Indicators

Overview

This guide covers text typing indicators within a conversation.

Before you begin, make sure you added the SDK to your app and you are able to create a simple conversation.

NOTE: A step-by-step tutorial to build a chat application is available here.

This guide will make use of the following concepts:

Conversation Events - text:typing:on and text:typing:off events that fire on a Conversation, after you are a Member

Typing Indicators

Given a conversation you are already a member of, a text:typing:on event will be received when a member starts typing a text message.

Similarly, a text:typing:off event will be received when a member stops typing.

conversation.on('text:typing:on', (event) => {
  console.log(event.user.name + " is typing");
});

conversation.on("text:typing:off", (event) => {
  console.log(event.user.name + " stopped typing");
});

private val messageListener = object : NexmoMessageEventListener {
    override fun onTypingEvent(typingEvent: NexmoTypingEvent) {
        val userName = typingEvent.fromMember.user.name
        val typingState = if(typingEvent.state == NexmoTypingState.ON) "typing" else "not typing"

        Log.d("TAG", "User $userName is $typingState")
    }

    override fun onAttachmentEvent(attachmentEvent: NexmoAttachmentEvent) {}

    override fun onTextEvent(textEvent: NexmoTextEvent) {}

    override fun onSeenReceipt(seenEvent: NexmoSeenEvent) {}

    override fun onEventDeleted(deletedEvent: NexmoDeletedEvent) {}

    override fun onDeliveredReceipt(deliveredEvent: NexmoDeliveredEvent) {}
}

conversation.addMessageEventListener(messageListener)

private NexmoMessageEventListener messageListener = new NexmoMessageEventListener() {
    @Override
    public void onTextEvent(@NonNull NexmoTextEvent textEvent) {}

    @Override
    public void onAttachmentEvent(@NonNull NexmoAttachmentEvent attachmentEvent) {}

    @Override
    public void onEventDeleted(@NonNull NexmoDeletedEvent deletedEvent) {}

    @Override
    public void onSeenReceipt(@NonNull NexmoSeenEvent seenEvent) {}

    @Override
    public void onDeliveredReceipt(@NonNull NexmoDeliveredEvent deliveredEvent) {}

    @Override
    public void onTypingEvent(@NonNull NexmoTypingEvent typingEvent) {
        String userName = typingEvent.getFromMember().getUser().getName();

        String typingState;

        if(typingEvent.getState() == NexmoTypingState.ON) {
            typingState = "typing";
        } else {
            typingState = "not typing";
        }

        Log.d("TAG", "User " + userName + " is " + typingState);
    }
};

conversation.addMessageEventListener(messageListener);

Add NXMConversationDelegate as an extension to a ViewController or similar, and implement conversation(_ conversation: NXMConversation, didReceive event: NXMTextTypingEvent):

Note: The first method below is required when implementing NXMConversationDelegate:

extension ViewController: NXMConversationDelegate {
    func conversation(_ conversation: NXMConversation, didReceive error: Error) {
        NSLog("Conversation error: \(error.localizedDescription)")
    }
    func conversation(_ conversation: NXMConversation, didReceive event: NXMTextTypingEvent) {
        if event.status == .on {
            NSLog("Started typing")
        } else {
            NSLog("Typing ended")
        }
    }
}

Have a ViewController, or similar, conform to NXMConversationDelegate and implement conversation:didReceiveTypingEvent::

Note: The first method below is required when implementing NXMConversationDelegate:

- (void)conversation:(NXMConversation *)conversation didReceive:(NSError *)error {
    NSLog(@"Conversation error: %@", error.localizedDescription);
}
- (void)conversation:(NXMConversation *)conversation didReceiveTypingEvent:(NXMTextTypingEvent *)event {
    if (event.status == NXMTextTypingEventStatusOn) {
        NSLog(@"Started typing");
    } else {
        NSLog(@"Typing ended");
    }
}