Presence
Share state between users with Realtime Presence.
Let's explore how to implement Realtime Presence to track state between multiple users.
Usage
You can use the Supabase client libraries to track Presence state between users.
Initialize the client
Go to your Supabase project's API Settings and grab the URL and anon public API key.
_10import { createClient } from '@supabase/supabase-js'_10_10const SUPABASE_URL = 'https://<project>.supabase.co'_10const SUPABASE_KEY = '<your-anon-key>'_10_10const supabase = createClient(SUPABASE_URL, SUPABASE_KEY)
Sync and track state
Listen to the sync, join, and leave events triggered whenever any client joins or leaves the channel or changes their slice of state:
_14const roomOne = supabase.channel('room_01')_14_14roomOne_14 .on('presence', { event: 'sync' }, () => {_14 const newState = roomOne.presenceState()_14 console.log('sync', newState)_14 })_14 .on('presence', { event: 'join' }, ({ key, newPresences }) => {_14 console.log('join', key, newPresences)_14 })_14 .on('presence', { event: 'leave' }, ({ key, leftPresences }) => {_14 console.log('leave', key, leftPresences)_14 })_14 .subscribe()
Sending state
You can send state to all subscribers using track():
_13const roomOne = supabase.channel('room_01')_13_13const userStatus = {_13 user: 'user-1',_13 online_at: new Date().toISOString(),_13}_13_13roomOne.subscribe(async (status) => {_13 if (status !== 'SUBSCRIBED') { return }_13_13 const presenceTrackStatus = await roomOne.track(userStatus)_13 console.log(presenceTrackStatus)_13})
A client will receive state from any other client that is subscribed to the same topic (in this case room_01). It will also automatically trigger its own sync and join event handlers.
Stop tracking
You can stop tracking presence using the untrack() method. This will trigger the sync and leave event handlers.
_10const untrackPresence = async () => {_10 const presenceUntrackStatus = await roomOne.untrack()_10 console.log(presenceUntrackStatus)_10}_10_10untrackPresence()
Presence options
You can pass configuration options while initializing the Supabase Client.
Presence key
By default, Presence will generate a unique UUIDv1 key on the server to track a client channel's state. If you prefer, you can provide a custom key when creating the channel. This key should be unique among clients.
_10import { createClient } from '@supabase/supabase-js'_10_10const channelC = supabase.channel('test', {_10 config: {_10 presence: {_10 key: 'userId-123',_10 },_10 },_10})