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

チケット発売やフラッシュセール向けのバーチャル待合室

一度に大勢が来たとき、訪問者は整理番号を受け取り、列の進みをリアルタイムで見ながら、設定したペースで入場します。エッジやサーバーは署名付きパスを確認してからページを返します。

@hibira-io/waiting-roomnpm ↗GitHub ↗

最速の方法：Hibira プラグインとプロンプト 1 つ

AI コーディングエージェントにプラグインを入れて、プロンプトを貼り付けるだけ。エージェントがサインインし、必要なら無料アプリを作成し、コードを書いてテストイベントを送ります。 GitHub ↗

プラグインをインストール

claude plugin marketplace add hibira-io/agent-plugin
claude plugin install hibira@hibira

このプロンプトを貼り付け

Add Hibira Waiting room (@hibira-io/waiting-room) to this project.
Follow https://hibira.io/guides/waiting-room, adapted to how this project is already set up.
If I have no Hibira app yet, create a Free one that allows http://localhost so I can test right away.
Keep the app key and secret in environment variables, add placeholders to .env.example, and never commit real values or send the secret to a browser.
When you are done, send a test event, show me it arriving, and list the files you changed.

自分で設定したい場合 以下の手順です：

インストール
待合室を作成
ページを保護

他の AI ツールとプラグインの中身 →

7 言語のホスト型待機ページ。自前のページは不要。
protect() は Cloudflare Workers、Next.js と Vercel の middleware、Deno、Bun、Express に対応。
開始時刻の予約、一時停止、売り切れ時の終了、次の数百人の一括入場ができます。
再読み込みしても順番は保たれます。アプリが接続数の上限に達すると、誰も締め出さずポーリングに切り替えます。

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

インストール

npm install @hibira-io/waiting-room pusher

待合室を作成

import Pusher from 'pusher';

const pusher = new Pusher({
  appId: process.env.HIBIRA_APP_ID,
  key: process.env.HIBIRA_KEY,
  secret: process.env.HIBIRA_SECRET,
  host: 'ws.hibira.io',
  useTLS: true,
});

await pusher.post({
  path: '/waiting_rooms/presale',
  body: {
    admit_per_minute: 300,
    state: 'open', // or 'paused', 'closed'
    title: 'Winter tour presale',
    return_urls: ['https://shop.example.com/'],
  },
});

ページを保護

// middleware.js (Next.js)
import { NextResponse } from 'next/server';
import { protect } from '@hibira-io/waiting-room/server';

export async function middleware(request) {
  const blocked = await protect(request, {
    appKey: process.env.HIBIRA_KEY,
    secret: process.env.HIBIRA_SECRET,
    room: 'presale',
  });
  return blocked ?? NextResponse.next();
}

export const config = { matcher: ['/drop/:path*'] };

始める前に

return_urls には戻り先のページを含めてください。含めないと待機ページはそこへ送りません。
パスの有効期限は既定で 30 分。番号ごとに 1 回だけ購入させるなら、購入時に ticketId を記録してください。
アプリのシークレットは、アプリの作成時とシークレットのローテーション時に一度だけ表示されます。サーバーにだけ置き、ブラウザやゲームのビルドには入れないでください。

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