How to Use Subscriptions in Supabase

1-- Add a table to the realtime publication
2alter publication supabase_realtime add table messages;
3
4-- Add multiple tables
5alter publication supabase_realtime add table messages, reactions, typing_indicators;
6
7-- Verify which tables are in the publication
8select * from pg_publication_tables
9where pubname = 'supabase_realtime';

1import { supabase } from './lib/supabase'
2
3const channel = supabase
4  .channel('messages-all')
5  .on(
6    'postgres_changes',
7    { event: '*', schema: 'public', table: 'messages' },
8    (payload) => {
9      console.log('Event:', payload.eventType)
10      console.log('New record:', payload.new)
11      console.log('Old record:', payload.old)
12
13      switch (payload.eventType) {
14        case 'INSERT':
15          // Add new message to UI
16          break
17        case 'UPDATE':
18          // Update existing message in UI
19          break
20        case 'DELETE':
21          // Remove message from UI
22          break
23      }
24    }
25  )
26  .subscribe()

1const channel = supabase
2  .channel('messages-filtered')
3  // Only listen for new messages
4  .on(
5    'postgres_changes',
6    { event: 'INSERT', schema: 'public', table: 'messages' },
7    (payload) => {
8      console.log('New message:', payload.new)
9    }
10  )
11  // Listen for updates to a specific room
12  .on(
13    'postgres_changes',
14    {
15      event: 'UPDATE',
16      schema: 'public',
17      table: 'messages',
18      filter: 'room_id=eq.123',
19    },
20    (payload) => {
21      console.log('Message updated in room 123:', payload.new)
22    }
23  )
24  .subscribe()

1const channel = supabase.channel('room:lobby')
2
3// Listen for broadcast events
4channel.on('broadcast', { event: 'typing' }, (payload) => {
5  console.log(`${payload.payload.user} is typing...`)
6})
7
8channel.subscribe(async (status) => {
9  if (status === 'SUBSCRIBED') {
10    // Send a broadcast event
11    await channel.send({
12      type: 'broadcast',
13      event: 'typing',
14      payload: { user: 'Alice', isTyping: true },
15    })
16  }
17})

1const channel = supabase.channel('room:lobby')
2
3channel
4  .on('presence', { event: 'sync' }, () => {
5    const state = channel.presenceState()
6    console.log('All online users:', state)
7  })
8  .on('presence', { event: 'join' }, ({ key, newPresences }) => {
9    console.log('User joined:', key, newPresences)
10  })
11  .on('presence', { event: 'leave' }, ({ key, leftPresences }) => {
12    console.log('User left:', key, leftPresences)
13  })
14  .subscribe(async (status) => {
15    if (status === 'SUBSCRIBED') {
16      await channel.track({
17        user: 'Alice',
18        online_at: new Date().toISOString(),
19      })
20    }
21  })

1// React cleanup
2import { useEffect } from 'react'
3import { supabase } from './lib/supabase'
4
5function ChatRoom({ roomId }: { roomId: string }) {
6  useEffect(() => {
7    const channel = supabase
8      .channel(`room-${roomId}`)
9      .on('postgres_changes',
10        { event: 'INSERT', schema: 'public', table: 'messages',
11          filter: `room_id=eq.${roomId}` },
12        (payload) => { /* handle new message */ }
13      )
14      .subscribe()
15
16    // Cleanup when component unmounts or roomId changes
17    return () => {
18      supabase.removeChannel(channel)
19    }
20  }, [roomId])
21
22  return <div>Chat messages here</div>
23}
24
25// Remove all channels at once (e.g., on logout)
26supabase.removeAllChannels()