ページリロード時の離脱を防止する

以下のコードは、beforeunload イベントを契機として、ページがリロードされたりタブが閉じられたりする際に確認ダイアログを表示しユーザの離脱防止を図る機能の実装です。

addEventListener('beforeunload', (event) => {
  event.preventDefault();
});

JavaScript SDK のデフォルト挙動では、beforeunload イベントが発火した時点で即座に通話から退出します。 そのため、上記のコードでユーザの離脱防止機能を実装した場合、ユーザがページをリロードしたりやタブを閉じたりする動作をキャンセルしても通話が途切れてしまいます。

そこで JavaScript SDK では、ページリロード時などに Member が即座に通話から退出するか否かを選択できるオプションが存在します。 このオプションを利用することで、上記のようなページ離脱防止機能を実装した際に、SkyWay の通話を継続させることが可能です。

ページリロード時に即座に通話から退出するか否かを選択するオプションの利用方法

Room に入室する際に、LocalMemberConfig の preventAutoLeaveOnBeforeUnload （デフォルト値 false ）を true に設定します。 本設定は JavaScript SDK v1.15.0 以降で利用可能です。

Room ライブラリの場合

const me = await room.join({
  preventAutoLeaveOnBeforeUnload: true,
});

これにより、beforeunload イベントが発火した際に SkyWay の通話から即座に退出する挙動が回避され、SkyWay の通話を継続できます。

リロード後に Member を leave させる

preventAutoLeaveOnBeforeUnload を true に設定した場合、beforeunload イベント発火時に Member が通話から退出しなくなります。 そのため、ユーザがページをリロードしたりタブを閉じたりした場合、SkyWay の通話上で不要な Member が残り続けます。 一方で、現在のブラウザの仕様では、ページをリロードしたりタブを閉じたりした時に即座にメモリが解放されるため、そのタイミングで明示的に leave を実行することは困難です。

そこで、残った Member が消去されるタイミングを LocalMemberConfig でコントロールしてください。 具体的には、keepaliveIntervalSec（デフォルト値 30）と keepaliveIntervalGapSec（デフォルト値 30）を調整します。

Member の生存確認は keepaliveIntervalSec 秒ごとにクライアントからサーバーへの応答の有無で行われており、応答がないまま keepaliveIntervalGapSec 秒経過した場合 Member の leave が行われます。

そのため、例えば keepaliveIntervalSec を 30 秒、keepaliveIntervalGapSec を 5 秒とすることで、リロードなどの実行から最短で 5 秒後、最長で 35 秒後に Member を自動的に leave させることができます。

Room ライブラリの場合

const me = await room.join({
  preventAutoLeaveOnBeforeUnload: true,
  keepAliveIntervalSec: 30,
  keepAliveIntervalGapSec: 5,
});

iOS Safari をご利用の場合も同様の注意事項が存在します。 詳しくは「iOS Safari でブラウザのウィンドウやタブを閉じたとき、またはページを更新したとき Member が Room から leave しない」をご参照ください。