Anleitung zum Text-Chat (Web)

Übersicht

Der Text-Chat wird mithilfe der OpenTok-Signalisierungs-API implementiert. Ein Signal wird über die signal() Methode des Session-Objekts. Um ein Signal zu empfangen, muss ein Client auf das signal Ereignis, das vom Session-Objekt ausgelöst wird.

Einrichten Ihres Projekts

Um dieses Tutorial nachzuvollziehen, klonen Sie das Repository von OpenTok Beispiel-Webanwendungen Repo auf GitHub:

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

Öffnen Sie anschließend die Signalisierung Ordner in Ihrem Code-Editor, um die Schritte nachzuvollziehen.

Den Code erkunden

In unserer Anwendung wird der folgende Code ausgeführt, sobald der Benutzer Text in das Eingabefeld eingibt:

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

Diese Methode ruft die signal() Methode des Session-Objekts, die ein Signal an alle mit der OpenTok-Sitzung verbundenen Clients sendet. Jedes Signal wird durch ein type Eigenschaft, die den Nachrichtentyp angibt (in diesem Fall "msg") und ein data Eigenschaft, die die Nachricht enthält. Der eingegebene Text wird in der Eigenschaft „data“ der Signal-Methode übermittelt.

Wenn ein anderer Client, der mit der Sitzung verbunden ist (in dieser App gibt es nur einen), eine Nachricht sendet, wird die Sitzung signal Der Ereignis-Handler wird aufgerufen:

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

Diese Methode prüft, ob das Signal vom lokalen Web-Client oder von dem anderen mit der Sitzung verbundenen Client gesendet wurde:

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

Das „Session“-Objekt repräsentiert Ihre OpenTok-Sitzung. Es verfügt über ein connection Eigenschaft, die eine connectionId Eigenschaft. Das Ereignisobjekt repräsentiert das mit diesem Signal verbundene Ereignis. Es verfügt über eine from Eigenschaft (die ein Connection-Objekt ist) mit einem connectionId Eigenschaft. Diese gibt die Verbindungs-ID des Clients an, der das Signal gesendet hat. Stimmen diese überein, wurde das Signal vom lokalen Web-Client gesendet.

Die mit dem Ereignis verbundenen Daten werden dann als untergeordnetes Element des history DOM-Element.

Diese App nutzt die OpenTok-Signalisierungs-API zur Implementierung des Text-Chats. Sie können die Signalisierungs-API jedoch auch nutzen, um Nachrichten an andere Clients (einzeln oder gemeinsam) zu senden, die mit der Sitzung verbunden sind.

Herzlichen Glückwunsch! Du hast das Tutorial zum Text-Chat für das Web abgeschlossen.
Du kannst den Code, den du hier entwickelt hast, weiter ausprobieren und anpassen oder dir die Nächste Schritte unten. Weitere Informationen zur Signalübertragung finden Sie im OpenTok-Entwicklerhandbuch zur Signalisierung.

Nächste Schritte

Wenn Sie hier fertig sind, können Sie Ihre OpenTok-Application mit diesen hilfreichen Ressourcen weiter ausbauen und verbessern: