Supabase ile Gerçek Zamanlı (Realtime) Bildirim Sistemi Kurulumu

Neden Supabase Realtime?

Eskiden veritabanındaki bir değişikliği frontend'de (istemcide) anında göstermek için Socket.io gibi ayrı bir websocket sunucusu kurmamız, state'leri eşitlememiz ve sürekli kopan bağlantılarla uğraşmamız gerekirdi. Supabase, PostgreSQL'in kendi log (WAL) yeteneklerini kullanarak, veritabanına yapılan ekleme, silme ve güncellemeleri saniyeler içinde doğrudan React/Next.js bileşenlerinize yayınlar.

Adım 1: Veritabanında Realtime'ı Aktif Etmek

Supabase panelinizde notifications adında bir tablonuz olduğunu varsayalım. Bu tablodaki değişiklikleri dinleyebilmek için SQL konsolundan veya arayüzden Replication ayarlarını açmalısınız:

-- SQL Konsolu üzerinden bildirimler tablosunu realtime'a açma
alter publication supabase_realtime add table notifications;

Adım 2: Frontend Tarafında Değişiklikleri Dinlemek (React Hook)

Sisteminizde yeni bir bildirim eklendiğinde (INSERT), bunu sayfa yenilenmeden kullanıcıya Toast mesajı olarak göstermek için aşağıdaki kodu kullanabilirsiniz.

"use client"
import { useEffect, useState } from 'react';
import { supabase } from '@/lib/supabase';
import toast from 'react-hot-toast';

export default function NotificationListener({ userId }) {
  const [notifications, setNotifications] = useState([]);

  useEffect(() => {
    // 1. Supabase kanalını oluştur ve dinlemeye başla
    const channel = supabase
      .channel('schema-db-changes')
      .on(
        'postgres_changes',
        {
          event: 'INSERT', // Sadece yeni eklemeleri dinle
          schema: 'public',
          table: 'notifications',
          filter: `user_id=eq.${userId}` // Sadece giriş yapan kullanıcıya ait olanlar
        },
        (payload) => {
          console.log('Yeni Bildirim Geldi!', payload.new);
          
          // Toast ile ekranda göster
          toast.success(payload.new.message);
          
          // State'e ekleyerek bildirimler menüsünü güncelle
          setNotifications((prev) => [payload.new, ...prev]);
        }
      )
      .subscribe();

    // 2. Component unmount olduğunda kanalı kapatarak bellek sızıntısını önle
    return () => {
      supabase.removeChannel(channel);
    };
  }, [userId]);

  return null; // Arayüzü bozmaması için null dönüyoruz
}