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

การเปลี่ยนแปลงในตาราง Supabase เป็นอีเวนต์แบบเรียลไทม์

ส่งการเปลี่ยนแปลงในตาราง Supabase ไปยังเบราว์เซอร์และแอปเป็นอีเวนต์ของ Hibira: Database Webhook เรียก Edge Function ที่เป็นผู้เผยแพร่อีเวนต์

Edge FunctionsSupabase ↗

• Database Webhook ส่งทุกการเพิ่ม แก้ไข และลบไปยัง Edge Function ซึ่งเผยแพร่ด้วยแพ็กเกจ pusher จาก npm
• แต่ละตารางเป็นช่อง และแต่ละการเปลี่ยนแปลงเป็นอีเวนต์ (insert, update, delete) เบราว์เซอร์และแอปจึงสมัครรับได้ด้วย pusher-js หรือไคลเอนต์ Pusher ใดก็ได้

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

1. ตั้งค่า

   supabase functions new hibira-broadcast
   supabase secrets set HIBIRA_APP_ID=YOUR_APP_ID HIBIRA_APP_KEY=YOUR_APP_KEY \
     HIBIRA_APP_SECRET=YOUR_APP_SECRET HIBIRA_HOST=ws.hibira.io \
     WEBHOOK_SECRET=a-long-random-string

2. เผยแพร่การเปลี่ยนแปลงตารางจากฟังก์ชัน

   // supabase/functions/hibira-broadcast/index.ts
   import Pusher from 'npm:pusher@5';
   
   const env = (k: string) => Deno.env.get(k) ?? '';
   const pusher = new Pusher({
     appId: env('HIBIRA_APP_ID'),
     key: env('HIBIRA_APP_KEY'),
     secret: env('HIBIRA_APP_SECRET'),
     host: env('HIBIRA_HOST'),
     port: '443',
     useTLS: true,
   });
   
   // A Database Webhook posts { type, table, record, old_record }.
   Deno.serve(async (req) => {
     if (req.headers.get('x-webhook-secret') !== env('WEBHOOK_SECRET')) {
       return new Response('forbidden', { status: 403 });
     }
     const { type, table, record, old_record } = await req.json();
     // orders → channel "orders", event "insert" / "update" / "delete"
     await pusher.trigger(table, type.toLowerCase(), record ?? old_record);
     return new Response('ok');
   });

3. ส่งการเปลี่ยนแปลงตารางไปยังฟังก์ชัน

   ; supabase functions deploy hibira-broadcast --no-verify-jwt
   ; Then in the Supabase dashboard: Database → Webhooks → Create a new hook
   Table = public.orders
   Events = Insert, Update, Delete
   Type = Supabase Edge Functions
   Edge Function = hibira-broadcast
   HTTP Headers = x-webhook-secret: a-long-random-string

4. ใช้งาน

   import Pusher from 'pusher-js';
   
   const pusher = new Pusher('YOUR_APP_KEY', {
     cluster: 'hkg',
     wsHost: 'ws.hibira.io',
     wsPort: 443,
     wssPort: 443,
     forceTLS: true,
     enabledTransports: ['ws', 'wss'],
   });
   
   pusher.subscribe('orders').bind('insert', (row) => {
     console.log('New order', row);
   });

ก่อนเริ่ม

• ฟังก์ชันถูก deploy ด้วย --no-verify-jwt เพื่อให้ Database Webhook เรียกได้ จึงต้องตรวจเฮดเดอร์รหัสลับที่ใช้ร่วมกันในทุกคำขอ
• เผยแพร่แถวบนช่องสาธารณะเฉพาะเมื่อใครก็ดูได้ ข้อมูลรายผู้ใช้ให้เผยแพร่ไปที่ช่อง private-user-<id> และลงนามการสมัครรับใน Edge Function อีกตัวที่ตรวจเซสชัน Supabase

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