⚡Echtzeit

Realtime Subscriptions

Live-Updates ohne Seite neu laden

Deine App soll Aenderungen sofort anzeigen ohne Reload? Mit Supabase Realtime abonnierst du Datenbank-Aenderungen und bekommst Updates in Echtzeit. Chat-Apps, Live-Dashboards, kollaborative Tools, alles moeglich.

Pro-Tip — Der schnelle Weg
Aktiviere Row Level Security bevor du Realtime nutzt. Ohne RLS kann jeder Client alle Aenderungen in der Tabelle sehen, auch die von anderen Usern.
Seite 1
1

Realtime aktivieren

In Supabase Dashboard geh zu Database > Replication und aktiviere Realtime fuer die gewuenschte Tabelle. Alternativ per SQL.

ALTER PUBLICATION supabase_realtime ADD TABLE messages;
2

Subscription erstellen

Im Frontend abonnierst du Aenderungen mit dem Supabase Client. Du kannst auf INSERT, UPDATE und DELETE reagieren, einzeln oder kombiniert.

const channel = supabase
 .channel('messages')
 .on('postgres_changes', {
 event: 'INSERT',
 schema: 'public',
 table: 'messages'
 }, (payload) => {
 console.log('Neue Nachricht:', payload.new)
 })
 .subscribe()
3

React State updaten

Verbinde die Subscription mit deinem React State. Neue Eintraege werden sofort in der UI angezeigt ohne dass der User die Seite neu laden muss.

useEffect(() => {
 const channel = supabase.channel('messages')
 .on('postgres_changes', {
 event: 'INSERT', schema: 'public', table: 'messages'
 }, (payload) => {
 setMessages(prev => [...prev, payload.new])
 }).subscribe()
 return () => { supabase.removeChannel(channel) }
}, [])
4

Filter setzen

Du willst nicht alle Aenderungen sehen, nur die relevanten. Nutz Filter um nur bestimmte Zeilen zu abonnieren, zum Beispiel nur Nachrichten in einem bestimmten Chat-Room.

.on('postgres_changes', {
 event: '*',
 schema: 'public',
 table: 'messages',
 filter: 'room_id=eq.123'
}, callback)
Seite 2
Warum das funktioniert
  • WebSocket-Verbindung ist effizienter als Polling
  • Supabase handhabt die komplette Infrastruktur
  • Datenbank-Trigger garantieren dass kein Update verloren geht
  • Filter reduzieren Traffic auf relevante Aenderungen
Tipps
  • Vergiss nicht die Subscription im useEffect Cleanup aufzuraeumen
  • Broadcast-Channel fuer User-Presence wie wer ist online
  • Realtime funktioniert auch mit Row Level Security Policies
  • Teste Realtime lokal mit zwei Browser-Tabs nebeneinander
Seite 3
Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen