How to Set Up Real-Time Listeners in Supabase

1-- Add a single table to the realtime publication
2ALTER PUBLICATION supabase_realtime ADD TABLE messages;
3
4-- Add multiple tables at once
5ALTER PUBLICATION supabase_realtime ADD TABLE messages, notifications, chat_rooms;
6
7-- Verify which tables are in the publication
8SELECT * FROM pg_publication_tables WHERE pubname = 'supabase_realtime';

1import { createClient } from '@supabase/supabase-js'
2
3const supabase = createClient(
4  process.env.NEXT_PUBLIC_SUPABASE_URL!,
5  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
6)
7
8// Subscribe to all changes on the messages table
9const channel = supabase
10  .channel('messages-all-changes')
11  .on(
12    'postgres_changes',
13    { event: '*', schema: 'public', table: 'messages' },
14    (payload) => {
15      console.log('Event type:', payload.eventType)
16      console.log('New data:', payload.new)
17      console.log('Old data:', payload.old)
18    }
19  )
20  .subscribe((status) => {
21    console.log('Subscription status:', status)
22    // SUBSCRIBED, CHANNEL_ERROR, TIMED_OUT, CLOSED
23  })

1const channel = supabase
2  .channel('messages-specific')
3  .on(
4    'postgres_changes',
5    { event: 'INSERT', schema: 'public', table: 'messages' },
6    (payload) => {
7      console.log('New message:', payload.new)
8      // Append to message list
9    }
10  )
11  .on(
12    'postgres_changes',
13    { event: 'UPDATE', schema: 'public', table: 'messages' },
14    (payload) => {
15      console.log('Updated message:', payload.new)
16      // Replace in message list
17    }
18  )
19  .on(
20    'postgres_changes',
21    { event: 'DELETE', schema: 'public', table: 'messages' },
22    (payload) => {
23      console.log('Deleted message ID:', payload.old.id)
24      // Remove from message list
25    }
26  )
27  .subscribe()

1// Only receive messages for a specific chat room
2const roomId = 'room-123'
3
4const channel = supabase
5  .channel(`room-${roomId}`)
6  .on(
7    'postgres_changes',
8    {
9      event: '*',
10      schema: 'public',
11      table: 'messages',
12      filter: `room_id=eq.${roomId}`,
13    },
14    (payload) => {
15      console.log('Message in room:', payload.new)
16    }
17  )
18  .subscribe()
19
20// Filter supports eq, neq, gt, gte, lt, lte, in
21// Examples:
22// filter: 'status=eq.active'
23// filter: 'priority=gt.5'
24// filter: 'type=in.(message,notification)'

1import { useEffect, useState } from 'react'
2
3function ChatRoom({ roomId }: { roomId: string }) {
4  const [messages, setMessages] = useState<any[]>([])
5
6  // Fetch initial messages
7  useEffect(() => {
8    supabase
9      .from('messages')
10      .select('*')
11      .eq('room_id', roomId)
12      .order('created_at', { ascending: true })
13      .then(({ data }) => { if (data) setMessages(data) })
14  }, [roomId])
15
16  // Subscribe to real-time changes
17  useEffect(() => {
18    const channel = supabase
19      .channel(`room-${roomId}`)
20      .on(
21        'postgres_changes',
22        {
23          event: 'INSERT',
24          schema: 'public',
25          table: 'messages',
26          filter: `room_id=eq.${roomId}`,
27        },
28        (payload) => {
29          setMessages((prev) => [...prev, payload.new])
30        }
31      )
32      .subscribe()
33
34    // Cleanup on unmount or roomId change
35    return () => {
36      supabase.removeChannel(channel)
37    }
38  }, [roomId])
39
40  return (
41    <div>
42      {messages.map((msg) => (
43        <p key={msg.id}>{msg.content}</p>
44      ))}
45    </div>
46  )
47}