Participando de uma sessão — React Native

Usando um ID de sessão e um token, você pode se conectar a uma sessão do Vonage Video por meio do SDK do Vonage Video para React Native.

Este tópico inclui as seguintes seções:

Para obter informações sobre como criar um ID de sessão e um token de autenticação, consulte Criação de sessão e Criação de tokens.

Conectando-se a uma sessão

Quando você adiciona um OTSession componente, ele se conecta automaticamente à sessão da Video API da Vonage.

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

Substituir your-api-key, your-session-id, e your-session-token com o seu Chave da API do projeto OpenTok, um ID da sessão do OpenTok, e um token da sessão.

Observe que os componentes OTPublisher e OTSubscriber devem ser adicionados como filhos do componente OTSession.

Você pode passar um error e sessionConnected manipuladores de eventos no OTSession componente. O manipulador de eventos de erro é chamado caso o cliente não consiga se conectar à sessão. E o sessionConnected O manipulador de eventos é chamado quando o cliente se conecta à sessão:

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

Desconectando-se de uma sessão

O cliente se desconecta da sessão quando você desmonta o OTSession componente.

Detectar quando a conexão foi interrompida

Quando seu cliente se desconecta de uma sessão, o OTSession o componente envia um 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>

Reconexão automática

Os clientes tentarão se reconectar automaticamente a uma sessão da qual tenham se desconectado inesperadamente (por exemplo, devido a uma queda na conectividade de rede). Você não precisa adicionar nenhum código para que os clientes se reconectem automaticamente, a menos que queira responder aos eventos disparados quando o seu cliente se desconectar e se reconectar.

Quando a conexão é interrompida e o cliente tenta se reconectar, o objeto OTSession dispara um sessionReconnecting evento. Quando a conexão é restabelecida, o objeto Session dispara um sessionReconnected. Se o cliente não conseguir restabelecer a conexão, ele se desconecta da sessão, e o objeto Session aciona o sessionDisconnected.

Em resposta a esses eventos, seu aplicativo pode (opcionalmente) exibir notificações na interface do usuário indicando os estados de desconexão temporária, reconexão e desconexão:

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

Quando seu cliente se desconecta temporariamente de uma sessão, os objetos Subscriber nos clientes inscritos em um fluxo publicado por você disparam eventos quando o fluxo publicado é interrompido e quando (e se) ele for retomado automaticamente. Para obter mais informações, consulte Reconexão automática no guia do desenvolvedor “Inscrição em streams”.

Detectar quando os clientes se conectam e se desconectam

O objeto OTSession despacha um connectionCreated evento que ocorre quando um novo cliente (exceto o seu próprio) se conecta à sessão. O objeto OTSession dispara um connectionDestroyed evento quando outros clientes saem da sessão. Esses eventos são definidos pela classe ConnectionEvent, que possui um objeto de conexão, que é um objeto Connection correspondente à conexão (criada ou encerrada) relacionada ao 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}
>
    {/* ... */}

Solução de problemas de conexão com a sessão

Grande parte dos erros que ocorrem ao tentar se conectar se deve a tokens inválidos ou vencidos. Certifique-se de seguir as práticas recomendadas para o uso de tokens descritas aqui

Outro motivo comum para a falha na conexão a uma sessão é a conexão à Internet do usuário final. Exemplos disso incluem:

  • O usuário final perdeu a conexão com a internet

  • O usuário final tem as portas comuns bloqueadas porque está em uma rede restritiva.