セッションへの参加 — React Native

セッションIDとトークンを使用することで、Vonage Video React Native SDK を利用して Vonage Video セッションに接続できます。

このトピックには以下のセクションが含まれます：

セッションへの接続
セッションからの切断
セッションから切断されたことを検知する
自動再接続
クライアントの接続と切断の検出
セッション接続の問題のトラブルシューティング

セッション ID および認証トークンの作成方法については、以下を参照してください。セッション作成そしてトークン作成.

セッションへの接続

[ ] を追加すると、 OTSession コンポーネントは、自動的にVonage Video APIのセッションに接続します。

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

交換 your-api-key, your-session-idそして your-session-token あなたの OpenTok プロジェクトの API キー, ある OpenTok セッション ID, そして、セッション用トークン.

OTPublisher および OTSubscriber コンポーネント、ならびに OTSession コンポーネントの子要素を追加することに注意してください。

を渡すことができます。 error そして sessionConnected イベントハンドラ OTSession コンポーネント。クライアントがセッションへの接続に失敗した場合、エラーイベントハンドラが呼び出されます。そして、 sessionConnected イベントハンドラは、クライアントがセッションに接続したときに呼び出される：

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

セッションからの切断

をアンマウントすると、クライアントはセッションから切断される。 OTSession コンポーネントを使用している。

切断の検出

クライアントがセッションから切断すると OTSession コンポーネントは sessionDisconnected イベントを開催する：

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

自動再接続

クライアントは、予期せず接続が切断されたセッションに対して、自動的に再接続を試みます（たとえば、ネットワーク接続が途絶えた場合など）。クライアントが自動的に再接続するようにするために、特別なコードを追加する必要はありません。ただし、クライアントが切断および再接続された際にディスパッチされるイベントに対応したい場合は別です。

接続が切断され、クライアントが再接続を試みると、OTSession オブジェクトは sessionReconnecting イベントが発生します。接続が回復すると、Sessionオブジェクトは sessionReconnected.クライアントが接続を復元できない場合、クライアントはセッションから切断し、Sessionオブジェクトは sessionDisconnected.

これらのイベントに応じて、アプリケーションでは（オプションで）、一時的な切断、再接続、および切断の状態を示すユーザーインターフェース上の通知を表示することができます：

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

クライアントがセッションから一時的に切断された場合、公開したストリームを購読しているクライアントのSubscriberオブジェクトは、公開ストリームが切断されたとき、および（もしあれば）自動的に再開されたときにイベントをディスパッチします。詳細については、以下を参照してください。自動再接続を参照してください。

クライアントの接続と切断の検出

OTSessionオブジェクトは connectionCreated イベントをディスパッチします。OTSessionオブジェクトは connectionDestroyed 他のクライアントがセッションを離脱した際のイベント。これらのイベントは ConnectionEvent クラスによって定義されており、このクラスには、イベントに関連する接続（作成または破棄）の Connection オブジェクトである connection オブジェクトが含まれています：

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

セッション接続の問題のトラブルシューティング

接続しようとしたときに戻ってくるエラーの多くは、無効または期限切れのトークンが原因です。以下のトークンのベストプラクティスに従っていることを確認してください。これ

セッションへの接続に失敗するもう1つの一般的な原因は、エンドユーザーのインターネット接続にあります。その例としては、次のようなものがあります：

エンドユーザーがインターネットに接続できなくなった
エンドユーザーは、制限されたネットワーク上にいるため、一般的なポートがブロックされている。