공식 패키지 · 실시간 구성 요소

티켓 오픈과 한정 판매를 위한 가상 대기실

한꺼번에 사람이 몰리면 방문자는 대기 번호를 받고, 줄이 줄어드는 것을 실시간으로 보며, 정한 속도로 입장합니다. 엣지나 서버는 서명된 패스를 확인한 뒤 페이지를 보여 줍니다.

@hibira-io/waiting-roomnpm ↗GitHub ↗

가장 빠른 방법: Hibira 플러그인과 프롬프트 하나

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분 유효합니다. 번호마다 한 번만 결제하게 하려면 결제할 때 ticketId를 기록하세요.
앱 시크릿은 앱을 만들거나 시크릿을 교체할 때 한 번만 표시됩니다. 서버에만 두고, 브라우저나 게임 빌드에는 절대 넣지 마세요.

대시보드의 앱 키를 사용하세요. 시크릿은 서버에만 둡니다. 채널, 이벤트, 인가 엔드포인트는 Pusher와 똑같이 동작합니다. 무료 계정 만들기 →