JavaScript: Subscribe to channel | Supabase Docs (original) (raw)

• Introduction
• Installing
• Initializing
• TypeScript support
• Database
• Fetch data
• Insert data
• Update data
• Upsert data
• Delete data
• Call a Postgres function
• Using filters
• Column is equal to a value
• Column is not equal to a value
• Column is greater than a value
• Column is greater than or equal to a value
• Column is less than a value
• Column is less than or equal to a value
• Column matches a pattern
• Column matches a case-insensitive pattern
• Column is a value
• Column is in an array
• Column contains every element in a value
• Contained by value
• Greater than a range
• Greater than or equal to a range
• Less than a range
• Less than or equal to a range
• Mutually exclusive to a range
• With a common element
• Match a string
• Match an associated value
• Don't match the filter
• Match at least one filter
• Match the filter
• Using modifiers
• Return data after inserting
• Order the results
• Limit the number of rows returned
• Limit the query to a range
• Set an abort signal
• Retrieve one row of data
• Retrieve zero or one row of data
• Retrieve as a CSV
• Override type of successful response
• Partially override or replace type of successful response
• Using explain
• Auth
• Overview
• Create a new user
• Listen to auth events
• Create an anonymous user
• Sign in a user
• Sign in with ID Token
• Sign in a user through OTP
• Sign in a user through OAuth
• Sign in a user through SSO
• Sign out a user
• Send a password reset request
• Verify and log in through OTP
• Retrieve a session
• Retrieve a new session
• Retrieve a user
• Update a user
• Retrieve identities linked to a user
• Link an identity to a user
• Unlink an identity from a user
• Send a password reauthentication nonce
• Resend an OTP
• Set the session data
• Exchange an auth code for a session
• Start auto-refresh session (non-browser)
• Stop auto-refresh session (non-browser)
• Auth MFA
• Enroll a factor
• Create a challenge
• Verify a challenge
• Create and verify a challenge
• Unenroll a factor
• Get Authenticator Assurance Level
• Auth Admin
• Retrieve a user
• List all users
• Create a user
• Delete a user
• Send an email invite link
• Generate an email link
• Update a user
• Delete a factor for a user
• Edge Functions
• Invokes a Supabase Edge Function.
• Realtime
• Subscribe to channel
• Unsubscribe from a channel
• Unsubscribe from all channels
• Retrieve all channels
• Broadcast a message
• Storage
• Create a bucket
• Retrieve a bucket
• List all buckets
• Update a bucket
• Delete a bucket
• Empty a bucket
• Upload a file
• Download a file
• List all files in a bucket
• Replace an existing file
• Move an existing file
• Copy an existing file
• Delete files in a bucket
• Create a signed URL
• Create signed URLs
• Create signed upload URL
• Upload to a signed URL
• Retrieve public URL
• Misc
• Release Notes

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