Suggestions

close search

Add Messaging, Voice, and Authentication to your apps with Vonage Communications APIs

Visit the Vonage API Developer Portal

Back to Tutorials

Text Chat Tutorial (Android)

Overview

The OpenTok signaling API allows you to send data between clients connected to an OpenTok session. You can send a signal message to everyone connected to the session, or to a specific client.

In this tutorial, we will use the OpenTok signaling API to implement text chat. You'll start with a completed version of the project, and explore the code that makes it work.

Step 1: Getting started

The code for this section is available in the Signaling project of the opentok-android-sdk-samples repo. If you haven't already, you'll need to clone the repo into a local directory. On the command line, run:

git clone git@github.com:opentok/opentok-android-sdk-samples.git

Open the Signaling project in Android Studio to follow along.

You'll need to enter in authentication credentials for ApiKey, session ID, and token, in OpenTokConfig file. You can find these values in your Opentok Dashboard.

Step 2: Text Chat UI

To display our chat messages, we use an android.widget.ListView object. This lets the app display more than one message at a time. We add the following code in the onCreate() method to inflate our layout and obtain references to its views.

setContentView(R.layout.activity_main);

messageEditTextView = findViewById(R.id.message_edit_text);
messageHistoryListView = findViewById(R.id.message_history_list_view);

// Attach data source to message history
messageHistory = new SignalMessageAdapter(this);
messageHistoryListView.setAdapter(messageHistory);

Once we inflate our Android layout views, and attach messageHistory to the messageHistoryListView, and configure our message editor to send a message when the enter key is pressed on the keyboard.

messageEditTextView.setOnEditorActionListener(new TextView.OnEditorActionListener() {
    @Override
    public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
        if (actionId == EditorInfo.IME_ACTION_DONE) {
            InputMethodManager inputMethodManager = (InputMethodManager) v.getContext().getSystemService(Context.INPUT_METHOD_SERVICE);
            inputMethodManager.hideSoftInputFromWindow(v.getWindowToken(), 0);
            sendMessage();
            return true;
        }
        return false;
    }
});

messageEditTextView.setEnabled(false);

Step 3: Sending Signals

If you look back to step 2, the sendMessage method is called when the user hits enter on the keyboard. sendMessage creates a SignalMessage object from the visible text in the EditTextView

private void sendMessage() {
    Log.d(TAG, "Send Message");

    SignalMessage signal = new SignalMessage(messageEditTextView.getText().toString());
    session.sendSignal(SIGNAL_TYPE, signal.getMessageText());

    messageEditTextView.setText("");
}

This signal is then sent to all clients connected to the session. sendSignal() is the actual OpenTok method to send a signal. It has two parameters:

We set the type of the signal to SIGNAL_TYPE (a string we decided to define as "text-signal"). We'll see later in the onSignalReceived() method, that we checks to see if the signal received is of this type. While in this application, this is our only signal type, you have the flexibility to have multiple different types of signals.

Step 4: Setting the SignalListener

Now we need to set the signalListener property as the SignalListener. In the onCreate() method of MainActivity class, we added:

session.setSignalListener(signalListener);

This sets the signalListener object as the implementor of the SubscriberKit.SignalListener interface. This interface defines the onSignalReceived(session, type, data, connection) method, which is called when the client receives a signal from the session:

Step 5: Receiving Signals with onSignalReceived

In the body of the onSignalReceived)() method, we first want to differentiate between signals sent from the local Android client and other clients connected to the session. While this check isn't necessary for all applications, our application is a text chat one, and we want to make it clear which messages were sent and which were received.

To do this, we inspect the Connection object. The Connection object in the argument of the method is from the client that the signal was sent from. This will only match the Connection object returned by mSession.getConnection() (which returns the local client's connection) if the signal was sent by the local client. The remote variable is set to true if the signal is coming from a connection that is different than our own, otherwise it is set to false.

@Override
public void onSignalReceived(Session session, String type, String data, Connection connection) {

    boolean remote = !connection.equals(session.getConnection());
    if (type != null && type.equals(SIGNAL_TYPE)) {
        showMessage(data, remote);
    }
}

Next we call the showMessage(messageData, remote) method, passing in remote. Downstream, the SignalMessageAdapter instance, messageHistoryListView will use this to place the view holding the signal's data on the right side of the view if it was being sent, and on the left was being received.

private void showMessage(String messageData, boolean remote) {
    SignalMessage message = new SignalMessage(messageData, remote);
    messageHistory.add(message);
}

For more information on the Android classes used in this text chat implementation, see the Android reference docs for the ArrayAdaptor and ListView

Congratulations! You've finished Text Chat Tutorial for Android.
You can continue to play with and adjust the code you've developed here, or check out the Next Steps below. For more information on signaling, see the OpenTok signaling developer guide.

Next steps

When you're finished here, continue building and enhancing your OpenTok application with these helpful resources: