本文へ移動
ドキュメント

Live セッションを退出する

ユーザー操作やページ終了時に Live セッションを正しく退出します。

Markdown を表示
このページの内容

ヒント

音声付きセッションを退出すると、標準では音声接続も切断します。

主に次の 2 つを処理します:

  • 1. ユーザーが自分で退出する

exit() を呼んで await します。参加者が正常に退出すると Promise が解決します。
業務上の理由でアプリが exit() を呼ぶ場合も、自発的な退出として扱います。

  • 2. ルームが閉じられる

builtinEvent を購読し、action が RoomClose かを確認するとルーム終了を判別できます。

以下で各状況の扱いを説明します。

フレームワークなしの例

ネイティブの js | ts で開発する場合の例です。

退出メソッドを呼ぶ

情報

exit() でセッションを退出します。

// With a simple `console.log(live)`, make sure you have actually obtained the `live` instance.
live.exit().then(() => {
  console.log("Left the live session");
});

ルーム終了を監視する

import { BuiltinActionType } from "@realsee/live";

live.on("builtinEvent", (builtinMsg) => {
  if (builtinMsg.action === BuiltinActionType.RoomClose) {
    // The live room is closed; leave the live session
  }
});

退出成功を確認する

ヒント

コンソールでも退出成功を確認できます。

Live 退出後の room_change close を示す Chrome DevTools

参加者の退出は live.exit() の正常終了で確認します。BUILTIN_MSG の event type が room_change、action が close の場合は、ルームオーナーが閉じたことを表します。

React のサンプル

React フレームワークで開発する場合の例です。

退出メソッドを呼ぶ

情報

useLiveAction フックで exit() を呼びます。

// highlight-start
import { useLiveAction } from "./LiveReact";
// highlight-end

function ExitBtn() {
  // highlight-start
  const { exit } = useLiveAction();
  // highlight-end

  const handleExit = () => {
    exit().then(() => {
      console.log("Left the live session");
    });
  };

  return <button onClick={handleExit}>Example exit button</button>;
}

ルーム終了を監視する

import { BuiltinActionType } from "@realsee/live";
import LiveReact from "./LiveReact";

const { useLiveEventCallback } = LiveReact;

useLiveEventCallback("builtinEvent", (builtinMsg) => {
  switch (builtinMsg.action) {
    // highlight-start
    case BuiltinActionType.RoomClose:
      console.log("__Live room closed__");
      break;
    // highlight-end
    case BuiltinActionType.UserStatus:
      console.log(builtinMsg.data);
      console.log("builtinEvent: user state change");
      break;
    case BuiltinActionType.UserInfo:
      console.log("builtinEven: user info change");
      break;
    case BuiltinActionType.UserMicroStatus:
      console.log("builtinEvent: user micro change");
      break;
    case BuiltinActionType.UserPermission:
      console.log("builtinEvent: user permission change");
      break;
    default: // debug
      console.log("builtinEvent: another change not in the enum!");
      break;
  }
});

退出成功を確認する

ヒント

コンソールでも退出成功を確認できます。

Live 退出後の room_change close を示す Chrome DevTools

参加者の退出は exit() の正常終了で確認します。BUILTIN_MSG の event type が room_change、action が close の場合は、ルームオーナーが閉じたことを表します。