Tutorial sobre el chat de texto (web)

Visión general

El chat de texto se ha implementado mediante la API de señalización de OpenTok. Se envía una señal utilizando el signal() método del objeto Session. Para recibir una señal, un cliente debe estar a la escucha del signal evento enviado por el objeto de sesión.

Configuración de tu proyecto

Para seguir este tutorial, clona el repositorio de OpenTok Aplicaciones de ejemplo web repositorio en GitHub:

git clone https://github.com/Vonage-Community/video-api-web-samples.git

A continuación, abre el Señalización carpeta en tu editor de código para seguir el ejemplo.

Explorar el código

En nuestra aplicación, cuando el usuario introduce texto en el campo de texto de entrada, se ejecuta el siguiente código:

form.addEventListener('submit', function(event) {
  event.preventDefault();

    session.signal({
        type: 'msg',
        data: msgTxt.value
      }, function(error) {
      if (error) {
        console.log('Error sending signal:', error.name, error.message);
      } else {
        msgTxt.value = '';
      }
    });
  });
});

Este método llama a la signal() método del objeto Session, que envía una señal a todos los clientes conectados a la sesión de OpenTok. Cada señal viene definida por un type propiedad que identifica el tipo de mensaje (en este caso "msg") y un data propiedad que contiene el mensaje. El texto introducido se envía en la propiedad «data» del método «signal».

Cuando otro cliente conectado a la sesión (en esta aplicación solo hay uno) envía un mensaje, la sesión signal Se invoca el controlador de eventos:

session.on('signal:msg', function(event) {
  var msg = document.createElement('p');
  msg.innerText = event.data;
  msg.className = event.from.connectionId === session.connection.connectionId ? 'mine' : 'theirs';
  msgHistory.appendChild(msg);
  msg.scrollIntoView();
});

Este método comprueba si la señal ha sido enviada por el cliente web local o por el otro cliente conectado a la sesión:

event.from.connectionId === session.connection.connectionId ? 'mine' : 'theirs';

El objeto «Session» representa tu sesión de OpenTok. Tiene un connection propiedad, que tiene un connectionId propiedad. El objeto de evento representa el evento asociado a esta señal. Tiene una from propiedad (que es un objeto Connection) con un connectionId propiedad. Representa el ID de conexión del cliente que envía la señal. Si coinciden, la señal ha sido enviada por el cliente web local.

A continuación, los datos asociados al evento se añaden como elemento secundario del history Elemento DOM.

Esta aplicación utiliza la API de señalización de OpenTok para implementar el chat de texto. No obstante, puedes utilizar la API de señalización para enviar mensajes a otros clientes (de forma individual o colectiva) conectados a la sesión.

¡Enhorabuena! Has completado el tutorial sobre el chat de texto para web.
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: