JavaScript SDK

ネットワーク切断時のハンドリング

一時的なネットワーク切断時のハンドリング

通話中に一時的なネットワーク切断が生じた際、JavaScript SDKは自動的に再接続処理を行います。

このときに生じる通信状態の変化を Publication.onConnectionStateChanged または Subscription.onConnectionStateChanged イベントから取得することができます。

Publicationの場合

const publication = await localMember.publish(video);
publication.onConnectionStateChanged.add(({state, remoteMember}) => {
  // 通信状態が変化した際に実施したい処理
});

※SFU をご利用の場合はremoteMemberを取得することはできません。

Subscriptionの場合

const { stream, subscription } = await localMember.subscribe(publication.id);
subscription.onConnectionStateChanged.add((state) => {
  // 通信状態が変化した際に実施したい処理
});

上記の例において、引数として渡される state が通信状態を示します。通信状態は以下のように変化します。

connected: 接続が完了している状態
reconnecting: 再接続処理中
disconnected: 通信が切断され、再接続処理が行われない状態

reconnecting に遷移した後、再接続が完了した場合は connected の状態に戻ります。 reconnecting に遷移してから一定時間内に再接続が完了しない場合は disconnected に遷移し、再接続処理は行われない状態になります。その場合は以下の項目の手順から再接続処理を行ってください。

なお、Subscription オブジェクトは subscribe() の完了後に取得されるため、初回接続時の state 変化がイベントリスナー追加前に発生する場合があります。そのため、getConnectionState() を併用し、次のように状態を扱うことを推奨します。

subscribe() 完了後すぐに getConnectionState() を呼び出して初期状態を取得する
onConnectionStateChanged にイベントリスナーを登録して、その後の状態変化を監視する

以下は、これを考慮して接続状態を UI に表示する実装の例です。

const statusElement = document.getElementById('subscription-connection-state');

const { subscription } = await localMember.subscribe(publication.id);

const renderState = (state: string) => {
  statusElement.textContent = state;
};

renderState(subscription.getConnectionState());

subscription.onConnectionStateChanged.add((state) => {
  renderState(state);
});

v2.5.0 より前のバージョンを利用している場合、一部ケースにおいて Subscription の接続状態を正しく取得できない不具合が確認されています。接続状態を正しく扱う必要がある場合は、JavaScript SDK v2.5.0 以降のバージョンをご利用ください。

その他に state が取り得る値の詳細は、JavaScript SDK リファレンス:TransportConnectionState を参照してください。

長時間ネットワークが切断された場合(onFatalError)のハンドリング

JavaScript SDK では短時間のネットワーク切断時に自動的に再接続処理を行っています。しかし長時間ネットワークが切断されたなどの理由で onFatalError が呼ばれるとこの処理が中断されます。再度接続を行いたい場合はアプリケーション側での実装が必要です。

JavaScript SDK リファレンス:onFatalError

onFatalError をうけて再接続を行う例を以下に示します。変数名はご自身のアプリケーションの定義で読み替えてください。

SkyWayContext.onFatalError を受け取った場合、以下の操作を実施する
- SkyWayContext.dispose で SkyWay の利用を停止する
- SkyWayContext.Create を実施して SkyWay の利用を再開する
- SkyWayRoom.FindOrCreate で以前入っていた Room を取得する( Room ライブラリを利用している場合)
- room.join で Room に再参加する

/*
...
// 事前のroom.join処理
let context = await SkyWayContext.Create(tokenString);
let room = await SkyWayRoom.FindOrCreate(context, {
  name: "YourRoomName",
});
let me = await room.join();
...
*/

context.onFatalError.add(async () => {
  context.dispose();
  context = await SkyWayContext.Create(tokenString);

  room = await SkyWayRoom.FindOrCreate(context, {
    name: "YourRoomName",
  });
  me = await room.join();
});

100人規模の会議アプリを作る

ログの設定