Інтеграція Supabase Realtime для підписки на зміни даних

Інтеграція Supabase Realtime для підписки на зміни даних

Supabase Realtime дозволяє підписатися на зміни в таблицях PostgreSQL (INSERT, UPDATE, DELETE) та отримувати їх у браузері у реальному часі через WebSocket. Побудована поверх PostgreSQL Logical Replication.

Встановлення

npm install @supabase/supabase-js

Підписка на таблицю

import { createClient } from '@supabase/supabase-js';

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
);

// Підписка на всі зміни в таблиці messages
const channel = supabase
  .channel('public:messages')
  .on(
    'postgres_changes',
    {
      event: '*',           // INSERT, UPDATE, DELETE або *
      schema: 'public',
      table: 'messages',
      filter: `room_id=eq.${roomId}`  // фільтр за значенням
    },
    (payload) => {
      if (payload.eventType === 'INSERT') {
        setMessages(prev => [...prev, payload.new]);
      }
      if (payload.eventType === 'UPDATE') {
        setMessages(prev =>
          prev.map(m => m.id === payload.new.id ? payload.new : m)
        );
      }
      if (payload.eventType === 'DELETE') {
        setMessages(prev => prev.filter(m => m.id !== payload.old.id));
      }
    }
  )
  .subscribe((status) => {
    console.log('Subscription status:', status);
  });

// Відписка
return () => { supabase.removeChannel(channel); };

React Hook

function useRealtimeTable<T>(
  table: string,
  filter?: { column: string; value: string }
) {
  const [data, setData] = useState<T[]>([]);
  const supabase = useSupabaseClient();

  useEffect(() => {
    // Первоначальна загрузка
    let query = supabase.from(table).select('*');
    if (filter) query = query.eq(filter.column, filter.value);
    query.then(({ data }) => setData(data ?? []));

    // Підписка на зміни
    const channel = supabase.channel(`${table}:${filter?.value ?? 'all'}`)
      .on('postgres_changes', {
        event: '*',
        schema: 'public',
        table,
        filter: filter ? `${filter.column}=eq.${filter.value}` : undefined
      }, (payload) => {
        setData(prev => {
          if (payload.eventType === 'INSERT') return [...prev, payload.new as T];
          if (payload.eventType === 'UPDATE')
            return prev.map(item => (item as any).id === (payload.new as any).id
              ? payload.new as T : item);
          if (payload.eventType === 'DELETE')
            return prev.filter(item => (item as any).id !== (payload.old as any).id);
          return prev;
        });
      })
      .subscribe();

    return () => { supabase.removeChannel(channel); };
  }, [table, filter?.column, filter?.value]);

  return data;
}

// Використання
const messages = useRealtimeTable<Message>('messages', {
  column: 'room_id',
  value: roomId
});

Broadcast — кастомні події

Broadcast не вимагає змін у БД:

// Відправити подію всім підписникам каналу
await supabase.channel('cursor-positions').send({
  type: 'broadcast',
  event: 'cursor-moved',
  payload: { x: mouseX, y: mouseY, userId: user.id }
});

// Отримати
supabase.channel('cursor-positions')
  .on('broadcast', { event: 'cursor-moved' }, ({ payload }) => {
    updateCursorPosition(payload.userId, payload.x, payload.y);
  })
  .subscribe();

Row Level Security

Realtime поважає RLS PostgreSQL — клієнт бачить тільки рядки, до яких у нього є SELECT-доступ.

-- Приклад RLS: користувач бачить тільки свої сообщення
ALTER TABLE messages ENABLE ROW LEVEL SECURITY;

CREATE POLICY "Users see own messages"
  ON messages FOR SELECT
  USING (auth.uid() = user_id);

Часові рамки

Базова підписка + React Hook + RLS: 1–2 дні.