Tutorial de bate-papo por texto (Web)

Visão geral

O chat de texto é implementado por meio da API de sinalização do OpenTok. Um sinal é enviado usando o signal() método do objeto Session. Para receber um sinal, um cliente precisa escutar o signal evento disparado pelo objeto de sessão.

Configurando seu projeto

Para acompanhar este tutorial, clone o repositório do OpenTok Aplicativos de exemplo na Web repositório no GitHub:

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

Em seguida, abra o Sinalização pasta no seu editor de código para acompanhar o passo a passo.

Explorando o código

Em nosso aplicativo, quando o usuário digita um texto no campo de entrada, o código a seguir é executado:

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 = '';
      }
    });
  });
});

Esse método chama o signal() método do objeto Session, que envia um sinal a todos os clientes conectados à sessão do OpenTok. Cada sinal é definido por um type propriedade que identifica o tipo de mensagem (neste caso "msg") e um data propriedade que contém a mensagem. O texto digitado é enviado na propriedade “data” do método “signal”.

Quando outro cliente conectado à sessão (neste aplicativo, há apenas um) envia uma mensagem, a sessão signal o manipulador de eventos é chamado:

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 verifica se o sinal foi enviado pelo cliente web local ou pelo outro cliente conectado à sessão:

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

O objeto Session representa sua sessão do OpenTok. Ele possui um connection propriedade, que possui um connectionId propriedade. O objeto de evento representa o evento associado a este sinal. Ele possui um from propriedade (que é um objeto Connection) com um connectionId propriedade. Isso representa o ID da conexão do cliente que enviou o sinal. Se esses valores coincidirem, o sinal foi enviado pelo cliente web local.

Os dados associados ao evento são, então, anexados como um elemento filho do history Elemento DOM.

Este aplicativo utiliza a API de sinalização do OpenTok para implementar o chat de texto. No entanto, é possível usar a API de sinalização para enviar mensagens a outros clientes (individualmente ou em grupo) conectados à sessão.

Parabéns! Você concluiu o tutorial sobre bate-papo por texto para a Web.
Você pode continuar experimentando e ajustando o código que desenvolveu aqui, ou conferir o Próximos passos abaixo. Para obter mais informações sobre sinalização, consulte o Guia do desenvolvedor de sinalização do OpenTok.

Próximos passos

Quando terminar esta seção, continue desenvolvendo e aprimorando seu aplicativo OpenTok com estes recursos úteis: