Gói chính thức · Tự động hóa và hạ tầng

Thay đổi trong bảng Supabase thành sự kiện thời gian thực

Gửi thay đổi trong bảng Supabase tới trình duyệt và ứng dụng dưới dạng sự kiện Hibira: Database Webhook gọi một Edge Function để phát chúng.

Edge FunctionsSupabase ↗

• Database Webhook gửi mỗi lần thêm, sửa, xóa tới một Edge Function, hàm này phát sự kiện bằng gói pusher trên npm.
• Mỗi bảng là một kênh, mỗi thay đổi là một sự kiện (insert, update, delete), nên trình duyệt và ứng dụng đăng ký bằng pusher-js hoặc bất kỳ client Pusher nào.

Đăng nhập để xem các đoạn mã này với host cụm của riêng bạn. Đăng nhập

1. Thiết lập

   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. Phát thay đổi của bảng từ hàm

   // 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. Gửi thay đổi của bảng tới hàm

   ; 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. Sử dụng

   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);
   });

Trước khi bắt đầu

• Hàm được triển khai với --no-verify-jwt để Database Webhook gọi được, nên nó kiểm tra header bí mật dùng chung ở mọi yêu cầu.
• Chỉ phát các dòng lên kênh công khai khi ai cũng được xem. Với dữ liệu riêng của từng người dùng, hãy phát tới kênh private-user-<id> và ký đăng ký trong một Edge Function khác có kiểm tra phiên Supabase.

Dùng app key từ bảng điều khiển; secret chỉ để trên máy chủ của bạn. Kênh, sự kiện và endpoint xác thực hoạt động y như với Pusher. Tạo tài khoản miễn phí →