官方包 · 自动化与基础设施

把 Supabase 数据表变更变成实时事件

把 Supabase 数据表的变更实时推送到浏览器和 App:Database Webhook 调用 Edge Function,由它发布 Hibira 事件。

  • 每次插入、更新、删除,Database Webhook 都会调用 Edge Function,由它用 npm 的 pusher 包发布。
  • 每个数据表是一个频道,每次变更是一个事件(insert、update、delete),浏览器和 App 用 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);
    });

开始之前

  • 为了让 Database Webhook 能调用,函数以 --no-verify-jwt 部署,所以每个请求都要检查共享密钥请求头。
  • 只有任何人都能看的数据行才发布到公开频道。个人数据请发布到 private-user-<id> 频道,并用另一个检查 Supabase 会话的 Edge Function 签署订阅。

请使用控制台中应用的 Key;Secret 只放在你的服务器上。频道、事件与授权端点的用法与 Pusher 完全相同。 免费创建账号 →