公式パッケージ · リアルタイムの部品

WebSocket で作るゲームのルームとロビー

プレゼンスチャンネルの上に作るルーム。入室順の席、退室時に引き継がれるホスト、準備完了フラグ、設定、キック、開始、ルームチャット。サーバー側は席への署名と空いているルームの一覧を担当します。

@hibira-io/lobbyライブデモ ↗npm ↗GitHub ↗

  • ブラウザ、React Native、JavaScript が動くゲームエンジンで使えます。
  • authorizeRoom() がルームの定員を守り、listRooms() が空いているルームを返します。
  • Unity と Godot のルームも同じイベントを使うので、どのエンジンのプレイヤーも 1 つのルームで会えます。

サインインすると、コード例にご自身のクラスターホストが入ります。 サインイン

  1. インストール

    npm install @hibira-io/lobby pusher-js

  2. 使う

    import { Room } from '@hibira-io/lobby';

const pusher = new Pusher('YOUR_APP_KEY', {
  cluster: 'hkg',
  wsHost: 'ws.hibira.io',
  channelAuthorization: { endpoint: '/rooms/auth' },
});
const room = Room.join(pusher, 'presence-room-42', { capacity: 4 });
room.on('members', ({ players }) => render(players));
room.setReady(true);

始める前に

  • アプリの設定で「クライアントイベントを許可」をオンにすると、プレイヤー同士で操作やタップを送り合えます。
  • プライベートチャンネルとプレゼンスチャンネルには、pusher-js と同じく、アプリのシークレットで購読に署名する認可エンドポイントがバックエンドに必要です。

ダッシュボードのアプリキーを使ってください。シークレットはサーバー側だけに置きます。チャンネル、イベント、認可エンドポイントは Pusher とまったく同じように動作します。 無料でアカウントを作成 →