官方套件 · 即時功能元件

搶票與限時特賣用的線上排隊室

同時湧入太多人時，訪客會拿到號碼牌、即時看到隊伍前進，並依你設定的速度放行。你的邊緣節點或伺服器會先檢查簽名通行證，再提供頁面。

npm 版本授權條款

@hibira-io/waiting-roomnpm ↗GitHub ↗

最快的方式：裝好 Hibira 外掛，貼上一段提示詞

在你的 AI 程式助手裝好外掛，再貼上提示詞。助手會幫你登入、需要時建立免費應用、寫好程式碼並送出測試事件。 GitHub ↗

  1. 安裝外掛

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

  2. 貼上這段提示詞

    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.

想自己動手？ 下方的步驟如下：

  1. 安裝
  2. 建立排隊室
  3. 保護頁面

其他 AI 工具與外掛內容 →

  • 託管的等候頁，支援七種語言，不用自己做頁面。
  • protect() 支援 Cloudflare Workers、Next.js 與 Vercel middleware、Deno、Bun 和 Express。
  • 可以排定開始時間、暫停、售完時關閉，或一次放行接下來的幾百人。
  • 重新整理也不會失去位置。應用達到連線上限時，頁面會改用輪詢，不會把人擋在外面。
預售的託管等候頁：訪客的號碼、前面還有幾人和預估等候時間。
預售的託管等候頁：訪客的號碼、前面還有幾人和預估等候時間。

登入後，範例程式碼會自動帶入您的叢集主機。 登入

  1. 安裝

    npm install @hibira-io/waiting-room pusher

  2. 建立排隊室

    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/'],
  },
});

  3. 保護頁面

    // 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 分鐘有效。如果每個號碼只能結帳一次，請在結帳時記錄 ticketId。
  • 應用程式的密鑰只會在建立應用程式或輪替密鑰時顯示一次。請只放在伺服器上，不要放進瀏覽器或遊戲的建置檔。

請使用儀表板中的應用程式 Key；Secret 只放在你的伺服器上。頻道、事件與授權端點的用法和 Pusher 完全相同。 免費建立帳號 →