Cómo unirse a una sesión — React Native

Mediante un identificador de sesión y un token, puedes conectarte a una sesión de Vonage Video utilizando el SDK de Vonage Video para React Native.

Este tema incluye las siguientes secciones:

Para obtener información sobre cómo crear un identificador de sesión y un token de autenticación, consulta Creación de sesiones y Creación de fichas.

Conectarse a una sesión

Cuando añades un OTSession componente, se conecta automáticamente a la sesión de la Video API de Vonage.

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

Sustituir your-api-key, your-session-idy your-session-token con tu Clave de API del proyecto OpenTok, un ID de sesión de OpenTok, y un token de la sesión.

Ten en cuenta que debes añadir los componentes OTPublisher y OTSubscriber como elementos secundarios del componente OTSession.

Puedes pasar un error y sessionConnected controladores de eventos en el OTSession componente. El controlador de eventos de error se activa si el cliente no consigue conectarse a la sesión. Y el sessionConnected El controlador de eventos se activa cuando el cliente se conecta a la sesión:

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

Desconectarse de una sesión

El cliente se desconecta de la sesión al desmontar el OTSession componente.

Detectar cuándo te has desconectado

Cuando el cliente se desconecta de una sesión, el OTSession El componente envía un sessionDisconnected evento:

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

Reconexión automática

Los clientes intentarán volver a conectarse automáticamente a una sesión de la que se hayan desconectado de forma inesperada (por ejemplo, debido a una interrupción de la conexión de red). No es necesario añadir ningún código para que los clientes se vuelvan a conectar automáticamente, a menos que quieras responder a los eventos que se envían cuando tu cliente se desconecta y vuelve a conectarse.

Cuando se interrumpe la conexión y el cliente intenta volver a conectarse, el objeto OTSession envía un sessionReconnecting evento. Cuando se restablece la conexión, el objeto Session envía un evento sessionReconnected. Si el cliente no puede restablecer la conexión, se desconecta de la sesión y el objeto Session envía el comando sessionDisconnected.

En respuesta a estos eventos, tu aplicación puede (opcionalmente) mostrar notificaciones en la interfaz de usuario que indiquen los estados de desconexión temporal, reconexión y desconexión:

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

Cuando tu cliente se desconecta temporalmente de una sesión, los objetos «Subscriber» de los clientes suscritos a un flujo que publicas envían eventos cuando se interrumpe el flujo publicado y cuando (y si) se reanuda automáticamente. Para obtener más información, consulta Reconexión automática en la guía para desarrolladores «Suscribirse a flujos».

Detección de conexión y desconexión de clientes

El objeto OTSession envía un connectionCreated cuando un nuevo cliente (excluido el suyo) se conecta a la sesión. El objeto OTSession envía un evento connectionDestroyed evento cuando otros clientes abandonan la sesión. Estos eventos están definidos por la clase `ConnectionEvent`, que contiene un objeto de conexión, que es un objeto `Connection` correspondiente a la conexión (creada o eliminada) relacionada con el evento:

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

Solución de problemas relacionados con la conexión a la sesión

Un gran número de errores que aparecen al intentar conectarse se deben a tokens no válidos o caducados. Asegúrese de seguir las prácticas recomendadas para los tokens que se describen a continuación. aquí

Otra causa habitual por la que falla la conexión a una sesión es la conexión a Internet del usuario final. Algunos ejemplos de ello son:

  • El usuario final ha perdido la conexión a Internet

  • El usuario final tiene los puertos comunes bloqueados porque está en una red restrictiva.