JavaScript: Subscribe to channel

Creates an event handler that listens to changes.

• By default, Broadcast and Presence are enabled for all projects.
• By default, listening to database changes is disabled for new projects due to database performance and security concerns. You can turn it on by managing Realtime's replication.
• You can receive the "previous" data for updates and deletes by setting the table's REPLICA IDENTITY to FULL (e.g., ALTER TABLE your_table REPLICA IDENTITY FULL;).
• Row level security is not applied to delete statements. When RLS is enabled and replica identity is set to full, only the primary key is sent to clients.

Parameters

• type

  (Required)

• filter

  (Required)

• callback

  (Required)

Examples

Listen to broadcast messages

const channel = supabase.channel("room1")

channel.on("broadcast", { event: "cursor-pos" }, (payload) => {
  console.log("Cursor position received!", payload);
}).subscribe((status) => {
  if (status === "SUBSCRIBED") {
    channel.send({
      type: "broadcast",
      event: "cursor-pos",
      payload: { x: Math.random(), y: Math.random() },
    });
  }
});

Listen to presence sync

const channel = supabase.channel('room1')
channel
  .on('presence', { event: 'sync' }, () => {
    console.log('Synced presence state: ', channel.presenceState())
  })
  .subscribe(async (status) => {
    if (status === 'SUBSCRIBED') {
      await channel.track({ online_at: new Date().toISOString() })
    }
  })

Listen to presence join

const channel = supabase.channel('room1')
channel
  .on('presence', { event: 'join' }, ({ newPresences }) => {
    console.log('Newly joined presences: ', newPresences)
  })
  .subscribe(async (status) => {
    if (status === 'SUBSCRIBED') {
      await channel.track({ online_at: new Date().toISOString() })
    }
  })

Listen to presence leave

const channel = supabase.channel('room1')
channel
  .on('presence', { event: 'leave' }, ({ leftPresences }) => {
    console.log('Newly left presences: ', leftPresences)
  })
  .subscribe(async (status) => {
    if (status === 'SUBSCRIBED') {
      await channel.track({ online_at: new Date().toISOString() })
      await channel.untrack()
    }
  })

Listen to all database changes

supabase
  .channel('room1')
  .on('postgres_changes', { event: '*', schema: '*' }, payload => {
    console.log('Change received!', payload)
  })
  .subscribe()

Listen to a specific table

supabase
  .channel('room1')
  .on('postgres_changes', { event: '*', schema: 'public', table: 'countries' }, payload => {
    console.log('Change received!', payload)
  })
  .subscribe()

Listen to inserts

supabase
  .channel('room1')
  .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'countries' }, payload => {
    console.log('Change received!', payload)
  })
  .subscribe()

Listen to updates

supabase
  .channel('room1')
  .on('postgres_changes', { event: 'UPDATE', schema: 'public', table: 'countries' }, payload => {
    console.log('Change received!', payload)
  })
  .subscribe()

Listen to deletes

supabase
  .channel('room1')
  .on('postgres_changes', { event: 'DELETE', schema: 'public', table: 'countries' }, payload => {
    console.log('Change received!', payload)
  })
  .subscribe()

Listen to multiple events

supabase
  .channel('room1')
  .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'countries' }, handleRecordInserted)
  .on('postgres_changes', { event: 'DELETE', schema: 'public', table: 'countries' }, handleRecordDeleted)
  .subscribe()

Listen to row level changes

supabase
  .channel('room1')
  .on('postgres_changes', { event: 'UPDATE', schema: 'public', table: 'countries', filter: 'id=eq.200' }, handleRecordUpdated)
  .subscribe()