Tutorial sobre el chat de texto (Android)

Visión general

La API de señalización de OpenTok te permite enviar datos entre los clientes conectados a una sesión de OpenTok. Puedes enviar un mensaje de señalización a todos los usuarios conectados a la sesión o a un cliente concreto.

En este tutorial, utilizaremos la API de señalización de OpenTok para implementar un chat de texto. Empezarás con una versión completa del proyecto y explorarás el código que lo hace funcionar.

Paso 1: Primeros pasos

El código de esta sección está disponible en el proyecto «Signaling» de la vonage-android-sdk-samples repositorio. Si aún no lo has hecho, tendrás que clonar el repositorio en un directorio local. En la línea de comandos, ejecuta:

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

Abra el Señalización proyecto en Android Studio para seguir el tutorial.

Tendrás que introducir las credenciales de autenticación para la clave API, el ID de sesión y el token en OpenTokConfig archivo. Puedes encontrar estos valores en tu Panel de control de Opentok.

Paso 2: Interfaz de usuario del chat de texto

Para mostrar nuestros mensajes de chat, utilizamos un android.widget.ListView objeto. Esto permite que la aplicación muestre más de un mensaje a la vez. Añadimos el siguiente código en el onCreate() método para crear nuestra maquetación y obtener referencias a sus vistas.

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);

Una vez que creamos nuestras vistas de diseño de Android y las vinculamos messageHistory a la messageHistoryListView, y configurar nuestro editor de mensajes para que envíe un mensaje cuando se pulse la tecla «Intro» del teclado.

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);

Paso 3: Envío de señales

Si vuelves al paso 2, el sendMessage El método se ejecuta cuando el usuario pulsa la tecla Intro del teclado. sendMessage crea un SignalMessage objeto a partir del texto visible en el EditTextView

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

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

    messageEditTextView.setText("");
}

A continuación, esta señal se envía a todos los clientes conectados a la sesión. sendSignal() Es el método real de OpenTok para enviar una señal. Tiene dos parámetros:

  • type (Cadena) — Un parámetro opcional que puede utilizarse como filtro para los tipos de señales.

  • data (Cadena) — Los datos que se van a enviar con la señal.

Establecemos el type de la señal a SIGNAL_TYPE (una cadena que hemos decidido definir como «text-signal»). Lo veremos más adelante en el onSignalReceived() método, con el que comprobamos si la señal recibida es de este tipo. Aunque en esta aplicación este es nuestro único tipo de señal, tienes la flexibilidad de utilizar varios tipos diferentes de señales.

Paso 4: Configuración del SignalListener

Ahora tenemos que configurar el signalListener propiedad como SignalListener. En el onCreate() método de MainActivity En la clase, hemos añadido:

session.setSignalListener(signalListener);

Esto establece el signalListener objeto como implementador del SubscriberKit.SignalListener interfaz. Esta interfaz define el onSignalReceived(session, type, data, connection) método, que se invoca cuando el cliente recibe una señal de la sesión:

Paso 5: Recepción de señales con onSignalReceived

En el cuerpo del onSignalReceived)() En este método, lo primero que queremos hacer es distinguir entre las señales enviadas desde el cliente local de Android y las de otros clientes conectados a la sesión. Aunque esta comprobación no es necesaria para todas las aplicaciones, la nuestra es una aplicación de chat de texto y queremos dejar claro qué mensajes se han enviado y cuáles se han recibido.

Para ello, examinamos el objeto `Connection`. El objeto `Connection` que aparece como argumento del método procede del cliente desde el que se envió la señal. Esto solo coincidirá con el objeto `Connection` devuelto por mSession.getConnection() (que devuelve la conexión del cliente local) si la señal la envió el cliente local. El remote la variable se establece en true si la señal procede de una conexión distinta a la nuestra; en caso contrario, se establece en 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);
    }
}

A continuación, llamamos a la showMessage(messageData, remote) introduciendo remote. Río abajo, el SignalMessageAdapter por ejemplo, messageHistoryListView Utilizará esto para colocar la vista que contiene los datos de la señal en el lado derecho de la vista si se estuviera enviando, y en el lado izquierdo si se estuviera recibiendo.

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

Para obtener más información sobre las clases de Android utilizadas en esta implementación de chat de texto, consulta la documentación de referencia de Android sobre el ArrayAdaptor y ListView

¡Enhorabuena! Has completado el tutorial sobre el chat de texto para Android.
Puedes seguir probando y modificando el código que has creado aquí, o echar un vistazo a la Próximos pasos a continuación. Para obtener más información sobre la señalización, consulta el Guía para desarrolladores de señalización de OpenTok.

Próximos pasos

Cuando hayas terminado aquí, sigue desarrollando y mejorando tu aplicación de OpenTok con estos útiles recursos: