แพ็กเกจอย่างเป็นทางการ · ระบบอัตโนมัติและโครงสร้างพื้นฐาน

Vercel integration สำหรับแอป Next.js แบบเรียลไทม์

เพิ่ม Hibira integration ให้โปรเจกต์ Vercel แล้วเลือกแอปหรือสร้างใหม่ App ID, key, secret และ host ของแอปจะถูกเพิ่มเป็นตัวแปรสภาพแวดล้อมของโปรเจกต์ deploy ใหม่ แล้วเผยแพร่จาก route handler และสมัครรับด้วย pusher-js

Vercel integrationGitHub ↗Vercel ↗

• เขียน HIBIRA_APP_ID, HIBIRA_APP_KEY, HIBIRA_APP_SECRET, HIBIRA_HOST และ HIBIRA_CLUSTER รวมถึง NEXT_PUBLIC_HIBIRA_APP_KEY และ NEXT_PUBLIC_HIBIRA_HOST สำหรับเบราว์เซอร์ ลงใน Production, Preview และ Development
• แอปใหม่รับการเชื่อมต่อจากโดเมน .vercel.app ของแต่ละโปรเจกต์ เพิ่มโดเมนของคุณเองและ URL พรีวิวได้ที่ Allowed origins ในหน้าของแอป
• ปุ่ม Deploy with Vercel ในตัวอย่าง Next.js ของเราจะติดตั้ง integration นี้ให้ เดโมที่ clone ไปจึงทำงานได้โดยไม่ต้องคัดลอกคีย์

ลงชื่อเข้าใช้เพื่อดูโค้ดตัวอย่างเหล่านี้พร้อมโฮสต์คลัสเตอร์ของคุณเอง ลงชื่อเข้าใช้

1. ติดตั้ง

   https://vercel.com/integrations/hibira/new
     → Add Integration → pick a team and its projects
     → sign in to Hibira → pick an app or create one → Connect
   Redeploy the projects so they load the new variables.

2. เผยแพร่จาก route handler

   // app/api/orders/route.js
   import Pusher from 'pusher';
   
   const pusher = new Pusher({
     appId: process.env.HIBIRA_APP_ID,
     key: process.env.HIBIRA_APP_KEY,
     secret: process.env.HIBIRA_APP_SECRET,
     host: process.env.HIBIRA_HOST,
     useTLS: true,
   });
   
   export async function POST(req) {
     const order = await req.json();
     await pusher.trigger('orders', 'order.created', order);
     return Response.json({ ok: true });
   }

3. ใช้งาน

   'use client';
   import Pusher from 'pusher-js';
   
   const pusher = new Pusher(process.env.NEXT_PUBLIC_HIBIRA_APP_KEY, {
     cluster: 'hkg',
     wsHost: process.env.NEXT_PUBLIC_HIBIRA_HOST,
     forceTLS: true,
     enabledTransports: ['ws', 'wss'],
   });
   
   pusher.subscribe('orders').bind('order.created', (order) => {
     console.log('New order', order);
   });

ก่อนเริ่ม

• ตัวแปรจะถูกเขียนตอนเชื่อมต่อ หากหมุนเวียน secret ของแอปภายหลัง ให้อัปเดต HIBIRA_APP_SECRET ในการตั้งค่าโปรเจกต์แล้ว deploy ใหม่
• เผยแพร่จากโค้ดฝั่งเซิร์ฟเวอร์เท่านั้น (route handler, server action) และห้ามให้ HIBIRA_APP_SECRET ไปถึง client component

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