An einer Sitzung teilnehmen — React Native

Mithilfe einer Sitzungs-ID und eines Tokens können Sie über das Vonage Video React Native SDK eine Verbindung zu einer Vonage Video-Sitzung herstellen.

Dieses Thema umfasst die folgenden Abschnitte:

Informationen zum Erstellen einer Sitzungs-ID und eines Authentifizierungstokens finden Sie unter Erstellung von Sitzungen und Token-Erstellung.

Verbinden mit einer Sitzung

Wenn Sie ein OTSession Komponente stellt automatisch eine Verbindung zur Vonage Video API-Sitzung her.

<OTSession
  apiKey="your-api-key"
  sessionId="your-session-id"
  token="your-session-token"
>
  <OTPublisher/>
  <OTSubscriber/>
</OTSession>

Ersetzen Sie your-api-key, your-session-idund your-session-token mit deinem OpenTok-Projekt-API-Schlüssel, ein OpenTok-Sitzungs-ID, und ein Sitzungstoken.

Beachten Sie, dass Sie die Komponenten „OTPublisher“ und „OTSubscriber“ sowie die untergeordneten Elemente der Komponente „OTSession“ hinzufügen.

Sie können eine error und sessionConnected Ereignisbehandler in der OTSession Komponente. Der Fehler-Event-Handler wird aufgerufen, wenn der Client keine Verbindung zur Sitzung herstellen kann. Und der sessionConnected wird aufgerufen, wenn der Client eine Verbindung zur Sitzung herstellt:

<OTSession
  apiKey="your-api-key"
  sessionId="your-session-id"
  token="your-session-token"
  eventHandlers={{
    error: event => {
        console.log('error', event);
      },
    sessionConnected: event => {
      console.log('session connected', event);
    },
  }}
>
  <OTPublisher style={{ width: 100, height: 100 }}/>
  <OTSubscriber style={{ width: 100, height: 100 }} />
</OTSession>

Trennen der Verbindung zu einer Sitzung

Der Client trennt die Verbindung zur Sitzung, wenn Sie die Verbindung zum OTSession Komponente.

Erkennen, wenn Sie die Verbindung unterbrochen haben

Wenn Ihr Client die Verbindung zu einer Sitzung trennt, wird die OTSession Komponente versendet eine sessionDisconnected Veranstaltung:

<OTSession
  apiKey="your-api-key"
  sessionId="your-session-id"
  token="your-session-token"
  eventHandlers={{
    sessionDisconnected: event => {
        console.log('disconnected', event);
      },
    connected: event => {
      console.log('subscriber connected', event);
    },
  }}
>
  <OTPublisher style={{ width: 100, height: 100 }}/>
  <OTSubscriber style={{ width: 100, height: 100 }} />
</OTSession>

Automatische Wiedereinschaltung

Clients versuchen, automatisch wieder eine Verbindung zu einer Sitzung herzustellen, von der sie unerwartet getrennt wurden (beispielsweise aufgrund einer Unterbrechung der Netzwerkverbindung). Sie müssen keinen zusätzlichen Code hinzufügen, damit die Clients automatisch wieder eine Verbindung herstellen, es sei denn, Sie möchten auf Ereignisse reagieren, die ausgelöst werden, wenn Ihr Client die Verbindung verliert und wieder herstellt.

Wenn die Verbindung unterbrochen wird und der Client versucht, die Verbindung wiederherzustellen, löst das OTSession-Objekt ein sessionReconnecting Ereignis. Wenn die Verbindung wiederhergestellt ist, sendet das Session-Objekt ein sessionReconnected. Wenn der Client die Verbindung nicht wiederherstellen kann, trennt der Client die Verbindung zur Sitzung, und das Sitzungsobjekt sendet die sessionDisconnected.

Als Reaktion auf diese Ereignisse kann Ihre Anwendung (optional) Benachrichtigungen in der Benutzeroberfläche anzeigen, die auf den Status „vorübergehende Unterbrechung“, „Wiederverbindung“ und „Unterbrechung“ hinweisen:

<OTSession
  apiKey={this.apiKey}
  sessionId={this.sessionId}
  token={this.token}
  eventHandlers={{
    sessionReconnecting: event => {
      // Display a user interface notification.
    },
    sessionReconnected: event => {
      // Adjust user interface.
    },
    sessionDisconnected: event => {
      // Adjust user interface.
    },
  }
>
    {/* ... */}

Wenn Ihr Client vorübergehend die Verbindung zu einer Sitzung unterbricht, lösen die Subscriber-Objekte in den Clients, die einen von Ihnen veröffentlichten Stream abonnieren, Ereignisse aus, sobald Ihr veröffentlichter Stream unterbrochen wird und wenn (und falls) er automatisch wieder aufgenommen wird. Weitere Informationen finden Sie unter Automatische Wiedereinschaltung in der Entwickleranleitung "Streams abonnieren".

Erkennen, wenn Clients eine Verbindung hergestellt und getrennt haben

Das OTSession-Objekt sendet eine connectionCreated Ereignis, wenn sich ein neuer Client (außer Ihrem eigenen) mit der Sitzung verbindet. Das OTSession-Objekt sendet ein connectionDestroyed Ereignis, wenn andere Clients die Sitzung verlassen. Diese Ereignisse werden durch die Klasse „ConnectionEvent“ definiert, die über ein Verbindungsobjekt verfügt, bei dem es sich um ein „Connection“-Objekt für die Verbindung handelt (die erstellt oder gelöscht wurde), auf die sich das Ereignis bezieht:

let this.connectionCount = 0;
const this.sessionEventHandlers = {
  connectionCreated: function (event) {
    connectionCount++;
    if (event.connection.connectionId != session.connection.connectionId) {
      console.log('Another client connected. ' + connectionCount + ' total.');
    }
  },
  connectionDestroyed: function connectionDestroyedHandler(event) {
    connectionCount--;
    console.log('A client disconnected. ' + connectionCount + ' total.');
  }
  sessionConnected: function (event) {
    // include your own client's connection in the count
    connectionCount++;
  },
};

// reference later in JSX:

<OTSession
  apiKey={this.apiKey}
  sessionId={this.sessionId}
  token={this.token}
  eventHandlers={this.sessionEventHandlers}
>
    {/* ... */}

Fehlerbehebung bei Sitzungsverbindungsproblemen

Viele Fehler, die bei Verbindungsversuchen auftreten, sind auf ungültige oder abgelaufene Token zurückzuführen. Stellen Sie sicher, dass Sie die bewährten Praktiken für Token befolgen, die wie folgt beschrieben sind hier

Ein weiterer häufiger Grund für das Scheitern einer Verbindungsherstellung zu einer Sitzung liegt in der Internetverbindung des Endnutzers. Beispiele hierfür sind:

  • Der Endnutzer hat seine Internetverbindung verloren

  • Der Endbenutzer hat gemeinsame Ports blockiert, weil er sich in einem restriktiven Netzwerk befindet.