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()