Supabase Realtime mit Claude Code:
Live-Daten in React 2026

# NPM
npm install @supabase/supabase-js

# Oder mit pnpm / bun
pnpm add @supabase/supabase-js
bun add @supabase/supabase-js

# TypeScript-Typen aus Supabase CLI generieren (optional, aber empfohlen)
npx supabase gen types typescript --project-id your-project-ref > types/supabase.ts

import { createClient } from '@supabase/supabase-js'
import type { Database } from '../types/supabase'

const supabaseUrl  = process.env.NEXT_PUBLIC_SUPABASE_URL!
const supabaseAnon = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!

export const supabase = createClient<Database>(supabaseUrl, supabaseAnon, {
  realtime: {
    params: {
      eventsPerSecond: 10,   // Rate-Limit clientseitig
    },
  },
})

import { supabase } from '../lib/supabase'

// Channel anlegen (Name ist frei waehlbar, muss im Projekt eindeutig sein)
const channel = supabase.channel('room:global')

// Subscription starten
channel.subscribe((status) => {
  if (status === 'SUBSCRIBED') {
    console.log('Realtime verbunden!')
  }
  if (status === 'CHANNEL_ERROR') {
    console.error('Channel-Fehler — Channel-Name pruefen')
  }
})

// Cleanup (z.B. in useEffect Return)
await supabase.removeChannel(channel)

const channel = supabase
  .channel('schema-db-changes')
  .on(
    'postgres_changes',
    {
      event:  '*',            // INSERT | UPDATE | DELETE | TRUNCATE | *
      schema: 'public',
      table:  'messages',
    },
    (payload) => {
      console.log('Change received!', payload)
      // payload.eventType: 'INSERT' | 'UPDATE' | 'DELETE'
      // payload.new: Neue Zeile (INSERT / UPDATE)
      // payload.old: Alte Zeile (UPDATE / DELETE)
      // payload.table, payload.schema, payload.commit_timestamp
    }
  )
  .subscribe()

// Nur neue Nachrichten empfangen
channel.on(
  'postgres_changes',
  { event: 'INSERT', schema: 'public', table: 'messages' },
  (payload) => appendMessage(payload.new)
)

// Nur Updates (z.B. Gelesen-Status)
channel.on(
  'postgres_changes',
  { event: 'UPDATE', schema: 'public', table: 'messages' },
  (payload) => markRead(payload.new.id)
)

// Zeilenfilter: Nur eigene Nachrichten des aktuellen Nutzers
channel.on(
  'postgres_changes',
  {
    event:  'INSERT',
    schema: 'public',
    table:  'messages',
    filter: `room_id=eq.${roomId}`,   // Serverside-Filter!
  },
  (payload) => appendMessage(payload.new)
)

-- 1. RLS fuer Tabelle aktivieren
ALTER TABLE messages ENABLE ROW LEVEL SECURITY;

-- 2. Realtime fuer diese Tabelle erlauben
ALTER PUBLICATION supabase_realtime ADD TABLE messages;

-- 3. Lese-Policy: Nutzer sieht nur Nachrichten in seinen Raeumen
CREATE POLICY "users_see_own_room_messages"
  ON messages
  FOR SELECT
  USING (
    room_id IN (
      SELECT room_id FROM room_members
      WHERE user_id = auth.uid()
    )
  );

-- 4. Realtime nutzt denselben Nutzer-Kontext wie normale Queries
--    (JWT aus supabase.auth.getSession() wird automatisch mitgesendet)

const channel = supabase.channel('room:collab-123')

// Empfaenger registrieren (vor subscribe!)
channel.on(
  'broadcast',
  { event: 'cursor' },
  (payload) => {
    renderCursor(payload.payload.userId, payload.payload.x, payload.payload.y)
  }
)

await channel.subscribe()

// Event senden (nach subscribe)
const sendCursor = (x: number, y: number) => {
  channel.send({
    type:    'broadcast',
    event:   'cursor',
    payload: { userId: currentUser.id, x, y },
  })
}

import { useEffect, useRef, useState } from 'react'
import { supabase } from '../lib/supabase'

interface CursorState {
  userId: string
  x: number
  y: number
  color: string
}

export function useCursorShare(roomId: string, userId: string) {
  const [cursors, setCursors] = useState<Record<string, CursorState>>({})
  const channelRef = useRef<any>(null)
  const throttleRef = useRef<number>(0)

  useEffect(() => {
    const channel = supabase.channel(`cursors:${roomId}`)
    channelRef.current = channel

    channel
      .on('broadcast', { event: 'cursor-move' }, ({ payload }) => {
        if (payload.userId === userId) return   // eigene ignorieren
        setCursors((prev) => ({ ...prev, [payload.userId]: payload }))
      })
      .subscribe()

    return () => { supabase.removeChannel(channel) }
  }, [roomId, userId])

  const trackCursor = (x: number, y: number) => {
    const now = Date.now()
    if (now - throttleRef.current < 50) return   // Max 20 Events/s
    throttleRef.current = now
    channelRef.current?.send({
      type: 'broadcast', event: 'cursor-move',
      payload: { userId, x, y, color: '#7c3aed' },
    })
  }

  return { cursors, trackCursor }
}

// self: true → eigene Broadcasts auch lokal empfangen (Standard: false)
const channel = supabase.channel('room:test', {
  config: {
    broadcast: { self: true, ack: false },
    // ack: true → send() gibt Promise zurueck, das resolved wenn Server Event bestätigt
    // ack: false → fire-and-forget (Standard, niedrigere Latenz)
  },
})

interface UserPresence {
  userId:    string
  username:  string
  avatar:    string
  joinedAt:  string
}

const channel = supabase.channel('room:presence-demo', {
  config: { presence: { key: currentUser.id } },  // Eindeutiger Key pro Nutzer
})

// sync: wird bei jeder State-Aenderung gefeuert (initiales Sync + join/leave)
channel.on('presence', { event: 'sync' }, () => {
  const state = channel.presenceState<UserPresence>()
  // state = { [key: string]: UserPresence[] } (Array wegen Multi-Tab)
  const onlineUsers = Object.values(state).flat()
  setOnlineUsers(onlineUsers)
})

// join: neuer Nutzer tritt bei
channel.on('presence', { event: 'join' }, ({ key, newPresences }) => {
  console.log(`${newPresences[0].username} ist beigetreten`)
})

// leave: Nutzer verlässt (auch bei Verbindungsabbruch!)
channel.on('presence', { event: 'leave' }, ({ key, leftPresences }) => {
  console.log(`${leftPresences[0].username} hat verlassen`)
})

await channel.subscribe()

// Eigenen Zustand registrieren (nach subscribe!)
await channel.track({
  userId:   currentUser.id,
  username: currentUser.name,
  avatar:   currentUser.avatarUrl,
  joinedAt: new Date().toISOString(),
})

// Zustand aktualisieren (z.B. Aktivitaet tracken)
await channel.track({
  ...currentPresence,
  lastActivity: new Date().toISOString(),
  currentPage:  window.location.pathname,
})

// Presence beenden (Nutzer meldet sich bewusst ab)
await channel.untrack()

// Alle aktuell verbundenen Nutzer abrufen (synchron nach sync-Event)
const state   = channel.presenceState<UserPresence>()
const online  = Object.values(state).flat()
const count   = online.length

import { useEffect, useState } from 'react'
import { supabase } from '../lib/supabase'

function LiveMessages({ roomId }: { roomId: string }) {
  const [messages, setMessages] = useState<Message[]>([])

  useEffect(() => {
    // 1. Initiale Daten laden
    supabase
      .from('messages')
      .select('*')
      .eq('room_id', roomId)
      .order('created_at')
      .then(({ data }) => setMessages(data ?? []))

    // 2. Realtime-Subscription
    const channel = supabase
      .channel(`messages:${roomId}`)
      .on('postgres_changes', {
        event:  'INSERT',
        schema: 'public',
        table:  'messages',
        filter: `room_id=eq.${roomId}`,
      }, (payload) => {
        setMessages((prev) => [...prev, payload.new as Message])
      })
      .subscribe()

    // 3. PFLICHT: Cleanup beim Unmount / roomId-Wechsel
    return () => {
      supabase.removeChannel(channel)
    }
  }, [roomId])  // roomId in Dependency-Array — bei Wechsel neu subscriben

  return (
    <ul>
      {messages.map((m) => <li key={m.id}>{m.content}</li>)}
    </ul>
  )
}

import { useEffect, useState, useCallback } from 'react'
import { supabase } from '../lib/supabase'
import type { RealtimePostgresChangesPayload } from '@supabase/supabase-js'

interface UseLiveTableOptions<T> {
  table:      string
  schema?:    string
  filter?:    string
  onInsert?:  (row: T) => void
  onUpdate?:  (row: T) => void
  onDelete?:  (row: Partial<T>) => void
  initialFetch?: () => Promise<T[]>
}

export function useLiveTable<T extends { id: string }>(
  options: UseLiveTableOptions<T>
) {
  const { table, schema = 'public', filter, onInsert, onUpdate, onDelete, initialFetch } = options
  const [rows, setRows]       = useState<T[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError]     = useState<Error | null>(null)

  useEffect(() => {
    let mounted = true

    // Initiale Daten
    if (initialFetch) {
      initialFetch()
        .then((data) => { if (mounted) { setRows(data); setLoading(false) } })
        .catch((e)   => { if (mounted) { setError(e);  setLoading(false) } })
    } else {
      setLoading(false)
    }

    const handleChange = (payload: RealtimePostgresChangesPayload<T>) => {
      if (!mounted) return
      if (payload.eventType === 'INSERT') {
        setRows((p) => [...p, payload.new])
        onInsert?.(payload.new)
      }
      if (payload.eventType === 'UPDATE') {
        setRows((p) => p.map((r) => r.id === payload.new.id ? payload.new : r))
        onUpdate?.(payload.new)
      }
      if (payload.eventType === 'DELETE') {
        setRows((p) => p.filter((r) => r.id !== (payload.old as T).id))
        onDelete?.(payload.old as Partial<T>)
      }
    }

    const channelName = `live-${table}-${filter ?? 'all'}`
    const channel = supabase
      .channel(channelName)
      .on('postgres_changes', { event: '*', schema, table, filter }, handleChange)
      .subscribe()

    return () => {
      mounted = false
      supabase.removeChannel(channel)
    }
  }, [table, schema, filter])  // Callbacks absichtlich nicht in Deps (stabil halten)

  return { rows, loading, error }
}

// Verwendung:
// const { rows, loading } = useLiveTable<Todo>({
//   table: 'todos',
//   filter: `user_id=eq.${userId}`,
//   initialFetch: () => supabase.from('todos').select().eq('user_id', userId).then(r => r.data ?? []),
// })

// Generischer Throttle fuer Realtime-Events (z.B. Cursor, Scroll, Resize)
export function throttle<T extends (...args: any[]) => any>(
  fn: T,
  limitMs: number
): T {
  let last = 0
  return ((...args) => {
    const now = Date.now()
    if (now - last < limitMs) return
    last = now
    return fn(...args)
  }) as T
}

// Verwendung:
const sendCursorThrottled = throttle(sendCursor, 50)   // Max 20 Events/s
document.addEventListener('mousemove', (e) => {
  sendCursorThrottled(e.clientX, e.clientY)
})

import { useRef, useEffect } from 'react'
import { supabase } from '../lib/supabase'
import type { RealtimeChannel } from '@supabase/supabase-js'

// Singleton-Map: verhindert doppelte Channel-Subscriptions (z.B. React StrictMode)
const channelRegistry = new Map<string, RealtimeChannel>()

export function getOrCreateChannel(name: string): RealtimeChannel {
  if (channelRegistry.has(name)) {
    return channelRegistry.get(name)!
  }
  const channel = supabase.channel(name)
  channelRegistry.set(name, channel)
  return channel
}

export async function releaseChannel(name: string): Promise<void> {
  const channel = channelRegistry.get(name)
  if (channel) {
    await supabase.removeChannel(channel)
    channelRegistry.delete(name)
  }
}

// Alle aktiven Channels beim App-Unload aufraeumen
if (typeof window !== 'undefined') {
  window.addEventListener('beforeunload', () => {
    channelRegistry.forEach((ch) => supabase.removeChannel(ch))
  })
}

import { flushSync, startTransition } from 'react'

// Fuer zeitkritische Updates (z.B. eigene Nachrichten sofort anzeigen)
const handleInsert = (payload: any) => {
  flushSync(() => setMessages((p) => [...p, payload.new]))
}

// Fuer nicht-dringende Updates (z.B. Background-Feed, Analytics)
const handleBulkUpdate = (payload: any) => {
  startTransition(() => setFeedItems((p) => [...p, payload.new]))
}

// React 18 batcht Updates in Event-Handlern automatisch —
// bei async Callbacks (Realtime-Events) muss man das selbst steuern

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

const supabase = createClient(url, anonKey, {
  realtime: {
    logger: (level, msg, data) => {
      if (process.env.NODE_ENV === 'development') {
        console.log(`[Realtime][${level}] ${msg}`, data)
      }
    },
  },
})

// Aktive Channels inspizieren
const activeChannels = supabase.getChannels()
console.log(`Aktive Channels: ${activeChannels.length}`)
activeChannels.forEach((ch) => {
  console.log(`- ${ch.topic}: ${ch.state}`)
})