官方包 · 实时功能组件

抢票与限时特卖用的线上排队室

同时涌入太多人时，访客会拿到号码牌、实时看到队伍前进，并按你设定的速度放行。你的边缘节点或服务器会先检查签名通行证，再提供页面。

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 完全相同。 免费创建账号 →