Suggestions

close search

Back to Text Chat Overview

Text Chat Step 3: Text Chat UI improvements

  1. 1
    Text Chat Step 1:
    Set up text chat
  2. 2
    Text Chat Step 2:
    Implementing text chat
  3. 3
    Text Chat Step 3:
    Text Chat UI improvements

The code for this section is added in the signaling.step-3 branch of the learning-opentok-android repo:

git checkout signaling.step-3

This page shows the difference between this branch and the signaling.step-2 branch, which this branch builds from.

First, let's test the code in this branch:

  1. Find the test.html file in the root of the project. You will use the test.html file to connect to the OpenTok session and view the audio-video stream published by the Android app:

    • Edit the test.html file and set the sessionCredentialsUrl variable to match the ksessionCredentialsUrl property used in the Android app.

    • Add the test.html file to a web server. (You cannot run WebRTC videos in web pages loaded from the desktop.)

    • In a browser, load the test.html file from the web server.

  2. Run the Android app. Enter some chat message in the Message text field, then click the Send button. The web page displays the text message sent by the Android app. You can also send a message from the web page to the Android app.

Instead of using a Toast object to display received signals, the code in this branch uses an android.widget.ListView object. This lets the app display more than one message at a time. This branch adds the following code to the onCreate() method:

mMessageHistoryListView = (ListView)findViewById(R.id.message_history_list_view);

// Attach data source to message history
mMessageHistory = new ChatMessageAdapter(this);
mMessageHistoryListView.setAdapter(mMessageHistory);

This branch adds code that differentiates between signals (text chat messages) sent from the local Android client and those sent from other clients connected to the session. The onSignalReceived(session, type, data, connection) method checks the Connection object for the received signal with the Connection object returned by mSession.getConnection():

@Override
public void onSignalReceived(Session session, String type, String data, Connection connection) {
    if (connection != null)
        boolean remote = !connection.equals(mSession.getConnection());
        if (type.equals(SIGNAL_TYPE_CHAT) {
            showMessage(data, remote);
        }
    }
}

The Connection object of the received signal represents the connection to the session for the client that sent the signal. This will only match the Connection object returned by mSession.getConnection() if the signal was sent by the local client.

The showMessage(messageData, remote) method has a new second parameter: remote. This is set to true if the message was sent another client (and false if it was sent by the local Android client):

private void showMessage(String messageData, boolean remote) {
    ChatMessage message = ChatMessage.fromData(messageData);
    message.setRemote(remote);
    mMessageHistory.add(message);
 }

The ChatMessage.fromData() method converts the message data (the data in the received signal) into a ChatMessage object. The mMessageHistoryListView uses the mMessageHistory object as the adaptor for the data in the list view. The mMessageHistory property is an android.widget.ArrayAdapter object. This tutorial focuses on the OpenTok Android SDK API. For more information on the Android classes used in this text chat implementation, see the docs for the following:

ArrayAdaptor
ListView

  1. 1
    Text Chat Step 1:
    Set up text chat
  2. 2
    Text Chat Step 2:
    Implementing text chat
  3. 3
    Text Chat Step 3:
    Text Chat UI improvements