How to Unsubscribe from Real-Time Updates in Supabase

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// Create and subscribe
9const channel = supabase
10  .channel('messages-channel')
11  .on(
12    'postgres_changes',
13    { event: 'INSERT', schema: 'public', table: 'messages' },
14    (payload) => console.log('New message:', payload.new)
15  )
16  .subscribe()
17
18// Later: unsubscribe and remove the channel
19const status = await supabase.removeChannel(channel)
20console.log('Channel removed:', status) // 'ok'

1// Remove every active channel
2const statuses = await supabase.removeAllChannels()
3console.log('All channels removed:', statuses)
4// ['ok', 'ok', 'ok'] — one status per channel
5
6// Common use case: cleanup on logout
7async function handleLogout() {
8  await supabase.removeAllChannels()
9  await supabase.auth.signOut()
10  window.location.href = '/login'
11}

1import { useEffect, useState } from 'react'
2
3function ChatRoom({ roomId }: { roomId: string }) {
4  const [messages, setMessages] = useState<any[]>([])
5
6  useEffect(() => {
7    // Create subscription
8    const channel = supabase
9      .channel(`room-${roomId}`)
10      .on(
11        'postgres_changes',
12        {
13          event: 'INSERT',
14          schema: 'public',
15          table: 'messages',
16          filter: `room_id=eq.${roomId}`,
17        },
18        (payload) => {
19          setMessages((prev) => [...prev, payload.new])
20        }
21      )
22      .subscribe()
23
24    // Cleanup: remove channel on unmount or roomId change
25    return () => {
26      supabase.removeChannel(channel)
27    }
28  }, [roomId]) // Re-runs when roomId changes
29
30  return (
31    <div>
32      {messages.map((msg) => (
33        <p key={msg.id}>{msg.content}</p>
34      ))}
35    </div>
36  )
37}

1// Vue 3 Composition API
2import { onMounted, onUnmounted, ref } from 'vue'
3
4export function useRealtimeMessages(roomId: string) {
5  const messages = ref<any[]>([])
6  let channel: any = null
7
8  onMounted(() => {
9    channel = supabase
10      .channel(`room-${roomId}`)
11      .on('postgres_changes',
12        { event: 'INSERT', schema: 'public', table: 'messages',
13          filter: `room_id=eq.${roomId}` },
14        (payload) => messages.value.push(payload.new)
15      )
16      .subscribe()
17  })
18
19  onUnmounted(() => {
20    if (channel) supabase.removeChannel(channel)
21  })
22
23  return { messages }
24}
25
26// Svelte
27// <script>
28import { onDestroy } from 'svelte'
29
30const channel = supabase
31  .channel('messages')
32  .on('postgres_changes',
33    { event: 'INSERT', schema: 'public', table: 'messages' },
34    (payload) => messages = [...messages, payload.new]
35  )
36  .subscribe()
37
38onDestroy(() => {
39  supabase.removeChannel(channel)
40})
41// </script>

1// Check how many channels are active
2const channels = supabase.getChannels()
3console.log('Active channels:', channels.length)
4console.log('Channel names:', channels.map((c) => c.topic))
5
6// Log channel count on every navigation (for debugging)
7window.addEventListener('beforeunload', () => {
8  const count = supabase.getChannels().length
9  if (count > 0) {
10    console.warn(`Leaving page with ${count} active channels — potential leak!`)
11  }
12})
13
14// Nuclear option: remove everything
15await supabase.removeAllChannels()