공식 패키지 · 자동화와 인프라

Supabase 테이블 변경을 실시간 이벤트로

Supabase 테이블 변경을 Hibira 이벤트로 브라우저와 앱에 보냅니다. Database Webhook이 Edge Function을 호출하고, 함수가 이벤트를 발행합니다.

Edge FunctionsSupabase ↗

• Database Webhook이 삽입, 수정, 삭제마다 Edge Function을 호출하고, 함수가 npm pusher 패키지로 발행합니다.
• 테이블은 채널, 변경은 이벤트(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);
   });

시작하기 전에

• Database Webhook이 호출할 수 있도록 함수를 --no-verify-jwt로 배포하므로, 모든 요청에서 공유 비밀 헤더를 확인합니다.
• 누구나 봐도 되는 행만 공개 채널에 발행하세요. 사용자별 데이터는 private-user-<id> 채널에 발행하고, Supabase 세션을 확인하는 다른 Edge Function에서 구독을 서명합니다.

대시보드의 앱 키를 사용하세요. 시크릿은 서버에만 둡니다. 채널, 이벤트, 인가 엔드포인트는 Pusher와 똑같이 동작합니다. 무료 계정 만들기 →