Tutoriel sur le chat textuel (Web)

Vue d'ensemble

Le chat textuel est mis en œuvre à l'aide de l'API de signalisation OpenTok. Un signal est envoyé à l'aide de la signal() méthode de l'objet Session. Pour recevoir un signal, un client doit être à l'écoute de la signal événement déclenché par l'objet de session.

Configuration de votre projet

Pour suivre ce tutoriel, clonez le dépôt OpenTok Exemples d'applications Web référentiel sur GitHub :

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

Ensuite, ouvrez le Signalisation dossier dans votre éditeur de code pour suivre les étapes.

Découverte du code

Dans notre application, lorsque l'utilisateur saisit du texte dans le champ de saisie, le code suivant est exécuté :

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

Cette méthode appelle la signal() méthode de l'objet Session, qui envoie un signal à tous les clients connectés à la session OpenTok. Chaque signal est défini par un type propriété identifiant le type de message (dans ce cas "msg") et un data propriété contenant le message. Le texte saisi est envoyé dans la propriété « data » de la méthode « signal ».

Lorsqu'un autre client connecté à la session (dans cette application, il n'y en a qu'un) envoie un message, la session signal la fonction de gestion d'événement est appelée :

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

Cette méthode vérifie si le signal a été envoyé par le client Web local ou par l'autre client connecté à la session :

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

L'objet `Session` représente votre session OpenTok. Il dispose d'un connection propriété, qui possède une connectionId propriété. L'objet « event » représente l'événement associé à ce signal. Il possède une from propriété (qui est un objet Connection) avec un connectionId propriété. Elle correspond à l'identifiant de connexion du client qui envoie le signal. Si ces identifiants correspondent, cela signifie que le signal a été envoyé par le client Web local.

Les données associées à l'événement sont ensuite ajoutées en tant qu'élément enfant de l' history Élément DOM.

Cette application utilise l'API de signalisation OpenTok pour mettre en œuvre le chat textuel. Cependant, vous pouvez utiliser cette API de signalisation pour envoyer des messages à d'autres clients (individuellement ou collectivement) connectés à la session.

Félicitations ! Vous venez de terminer le tutoriel sur le chat textuel pour le Web.
Vous pouvez continuer à tester et à modifier le code que vous avez développé ici, ou consulter le Prochaines étapes ci-dessous. Pour plus d'informations sur la signalisation, consultez le Guide du développeur sur la signalisation OpenTok.

Prochaines étapes

Une fois que vous aurez terminé cette étape, poursuivez le développement et l'amélioration de votre application OpenTok à l'aide des ressources utiles suivantes :