Rejoindre une session — React Native

À l'aide d'un identifiant de session et d'un jeton, vous pouvez vous connecter à une session Vonage Video à l'aide du SDK Vonage Video pour React Native.

Cette rubrique comprend les sections suivantes :

Pour plus d'informations sur la création d'un identifiant de session et d'un jeton d'authentification, consultez Création de la session et Création de jetons.

Connexion à une session

Lorsque vous ajoutez un OTSession composant, il se connecte automatiquement à la session de la Video API de Vonage.

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

Remplacer your-api-key, your-session-idet your-session-token avec votre Clé API du projet OpenTok, un Identifiant de session OpenTok, et un jeton de session.

Notez que vous devez ajouter les composants OTPublisher et OTSubscriber en tant qu'enfants du composant OTSession.

Vous pouvez passer un error et sessionConnected dans les gestionnaires d'événements de la OTSession composant. Le gestionnaire d'événements d'erreur est appelé si le client ne parvient pas à se connecter à la session. Et le sessionConnected est appelé lorsque le client se connecte à la session :

<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>

Déconnexion d'une session

Le client se déconnecte de la session lorsque vous démontez le fichier OTSession de la composante.

Détection de la déconnexion

Lorsque votre client se déconnecte d'une session, la fonction OTSession envoie un sessionDisconnected événement :

<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>

Reconnexion automatique

Les clients tenteront de se reconnecter automatiquement à une session dont ils se sont déconnectés de manière inattendue (par exemple, en raison d'une interruption de la connexion réseau). Vous n'avez pas besoin d'ajouter de code pour que les clients se reconnectent automatiquement, sauf si vous souhaitez répondre aux événements déclenchés lorsque votre client se déconnecte puis se reconnecte.

Lorsque la connexion est interrompue et que le client tente de se reconnecter, l'objet OTSession déclenche un sessionReconnecting . Lorsque la connexion est rétablie, l'objet Session envoie un événement sessionReconnected. Si le client ne peut pas rétablir la connexion, il se déconnecte de la session et l'objet Session envoie la commande sessionDisconnected.

En réponse à ces événements, votre application peut (si vous le souhaitez) afficher des notifications dans l'interface utilisateur indiquant les états de déconnexion temporaire, de reconnexion et de déconnexion :

<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.
    },
  }
>
    {/* ... */}

Lorsque votre client se déconnecte temporairement d'une session, les objets « Subscriber » des clients abonnés à un flux que vous publiez déclenchent des événements lorsque votre flux publié est interrompu et lorsque (et si) il reprend automatiquement. Pour plus d'informations, consultez Reconnexion automatique dans le guide du développeur "S'abonner à des flux".

Détection de la connexion et de la déconnexion des clients

L'objet OTSession envoie un connectionCreated lorsqu'un nouveau client (à l'exception du vôtre) se connecte à la session. L'objet OTSession envoie un connectionDestroyed événement lorsque d'autres clients quittent la session. Ces événements sont définis par la classe `ConnectionEvent`, qui dispose d'un objet `connection`, qui est un objet `Connection` correspondant à la connexion (créée ou détruite) associée à l'événement :

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}
>
    {/* ... */}

Résolution des problèmes de connexion à la session

Un grand nombre d'erreurs qui reviennent lors d'une tentative de connexion sont dues à des jetons non valides ou expirés. Veillez à respecter les bonnes pratiques en matière de jetons décrites dans le document suivant ici

Une autre cause fréquente d'échec de la connexion à une session est liée à la connexion Internet de l'utilisateur final. En voici quelques exemples :

  • L'utilisateur final a perdu sa connexion internet

  • L'utilisateur final a des ports communs bloqués parce qu'il se trouve sur un réseau restrictif.