แพ็กเกจอย่างเป็นทางการ · ชิ้นส่วนเรียลไทม์

ห้องรอคิวออนไลน์สำหรับเปิดขายตั๋วและแฟลชเซล

เมื่อคนเข้ามาพร้อมกันมากเกินไป ผู้เข้าชมจะได้หมายเลขคิว เห็นคิวขยับแบบสด และได้เข้าตามอัตราที่คุณกำหนด เอดจ์หรือเซิร์ฟเวอร์ของคุณจะตรวจบัตรผ่านที่ลงนามก่อนแสดงหน้า

@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 อื่นและสิ่งที่อยู่ในปลั๊กอิน →

หน้ารอคิวแบบโฮสต์ให้เจ็ดภาษา ไม่ต้องสร้างหน้าเอง
protect() ใช้ได้กับ Cloudflare Workers, middleware ของ Next.js และ Vercel, 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 ตอนชำระเงิน
ซีเคร็ตของแอปจะแสดงเพียงครั้งเดียว ตอนสร้างแอปหรือตอนหมุนเวียนซีเคร็ต เก็บไว้บนเซิร์ฟเวอร์เท่านั้น ห้ามใส่ในเบราว์เซอร์หรือไฟล์บิลด์ของเกม

ใช้ app key จากแดชบอร์ดของคุณ ส่วน secret ให้เก็บไว้บนเซิร์ฟเวอร์เท่านั้น ช่อง อีเวนต์ และ endpoint การยืนยันสิทธิ์ทำงานเหมือนกับที่ใช้กับ Pusher ทุกประการ สร้างบัญชีฟรีของคุณ →