Presence for online status in Supabase - Step-by-Step Execution

Process Flow - Presence for online status

User connects

↓

Client subscribes to presence channel

↓

Server marks user as online

↓

Other clients receive online status update

↓

User disconnects

↓

Server marks user as offline

↓

Other clients receive offline status update

This flow shows how a user connects, is marked online, and how others get updated, then disconnects and is marked offline.

Execution Sample

Supabase

const presenceChannel = supabase.channel('presence')
  .on('presence', { event: 'sync' }, () => {
    console.log('Presence synced')
  })
  .subscribe()

presenceChannel.track({ user_id: 'user123' })

This code subscribes to a presence channel and tracks the user as online.

Process Table

Step	Action	User Status	Server State	Client Notification
1	User connects and subscribes to presence channel	Connecting	No user marked online	No notification
2	Client calls track() to mark user online	Online	User 'user123' marked online	Other clients notified: user123 online
3	Other clients receive presence update	Online	User 'user123' marked online	UI updates to show user123 online
4	User disconnects	Disconnecting	User 'user123' still online until timeout	No immediate notification
5	Server detects disconnect and marks user offline	Offline	User 'user123' marked offline	Other clients notified: user123 offline
6	Other clients receive offline update	Offline	User 'user123' marked offline	UI updates to show user123 offline

💡 User disconnects and server updates presence to offline, ending the online status.

Status Tracker

Variable	Start	After Step 2	After Step 5	Final
userStatus	undefined	online	offline	offline
serverPresenceState	empty	{ user123: online }	{ user123: offline }	{ user123: offline }
clientNotification	none	user123 online	user123 offline	user123 offline

Key Moments - 2 Insights

Why does the server still show the user as online immediately after disconnect?

Because the server waits for a timeout or confirmation before marking offline, as seen in step 4 of the execution_table.

How do other clients know when a user goes offline?

They receive a presence update notification from the server after it marks the user offline, shown in steps 5 and 6.

Visual Quiz - 3 Questions

Look at the execution_table at step 2, what is the userStatus value?

A online

B offline

C connecting

D undefined

💡 Hint

Check the 'User Status' column at step 2 in the execution_table.

At which step does the server mark the user as offline?

A Step 3

B Step 4

C Step 5

D Step 6

💡 Hint

Look at the 'Server State' column to find when user123 is marked offline.

If the client never calls track(), what happens to the user status?

A User is marked online anyway

B User remains undefined and not shown online

C Server marks user offline immediately

D Other clients get notified user is online

💡 Hint

Refer to the 'userStatus' variable in variable_tracker before step 2.

Concept Snapshot

Presence for online status in Supabase:
- Subscribe to a presence channel
- Call track() to mark user online
- Server updates presence state
- Other clients receive updates
- On disconnect, server marks offline
- Clients update UI accordingly

Full Transcript

Presence for online status in Supabase works by clients subscribing to a presence channel and calling track() to mark themselves online. The server keeps track of who is online and notifies other clients when users connect or disconnect. When a user disconnects, the server waits for a timeout before marking them offline and sending updates. This ensures all clients have the current online status of users.

Practice

1. What is the main purpose of using presence in Supabase realtime channels?

easy

A. To show which users are currently online in real-time

B. To store user passwords securely

C. To send emails to users

D. To create database backups automatically

Solution

1. Step 1: Understand presence feature

   Presence in Supabase is designed to track and show who is online at any moment.

2. Step 2: Identify main use case

   It helps applications display real-time online user lists, not for security or backups.

3. Final Answer:

   To show which users are currently online in real-time -> Option A

4. Quick Check:

   Presence = Online user tracking [OK]

Hint: Presence means tracking who is online live [OK]

Common Mistakes:

• Confusing presence with security features
• Thinking presence handles backups
• Assuming presence sends emails

2. Which of the following is the correct way to listen for presence updates in Supabase realtime channels?

easy

A. channel.on('presence', callback)

B. channel.on('update', callback)

C. channel.on('message', callback)

D. channel.on('sync', callback)

Solution

1. Step 1: Recall Supabase presence event names

   Supabase presence uses the 'sync' event to notify when presence data updates.

2. Step 2: Match event to correct listener

   The 'sync' event triggers the callback with the updated online user list.

3. Final Answer:

   channel.on('sync', callback) -> Option D

4. Quick Check:

   Presence updates use 'sync' event [OK]

Hint: Presence updates come from 'sync' event, not 'presence' [OK]

Common Mistakes:

• Using 'presence' event which does not exist
• Confusing 'message' event with presence updates
• Using 'update' event which is unrelated

3. Given this code snippet, what will be logged when a user joins the presence channel?

const channel = supabase.channel('online-users').on('presence', () => {
  console.log(channel.presenceState())
}).subscribe()

medium

A. An object showing all currently online users

B. An error because presenceState() is not a function

C. An empty array always

D. A string message 'User joined'

Solution

1. Step 1: Understand presenceState() method

   presenceState() returns the current presence data, showing online users grouped by user ID.

2. Step 2: Analyze code behavior on 'presence' event

   When a user joins, 'presence' triggers and logs the updated presence state object.

3. Final Answer:

   An object showing all currently online users -> Option A

4. Quick Check:

   presenceState() = online users object [OK]

Hint: presenceState() returns online users object on presence event [OK]

Common Mistakes:

• Thinking presenceState() is undefined
• Expecting a string message instead of object
• Assuming it returns an empty array always

4. You wrote this code to track online users but no updates appear:

const channel = supabase.channel('online-users')
channel.on('presence', () => {
  console.log('Users online:', channel.presenceState())
})

What is the likely problem?

medium

A. The event name 'presence' is incorrect

B. You forgot to call subscribe() on the channel

C. presenceState() does not exist on channel

D. You need to use 'message' event instead

Solution

1. Step 1: Check channel subscription

   Without calling subscribe(), the channel does not connect and receive events.

2. Step 2: Confirm event and method correctness

   'presence' event and presenceState() are correct, so missing subscribe() is the issue.

3. Final Answer:

   You forgot to call subscribe() on the channel -> Option B

4. Quick Check:

   Must call subscribe() to receive events [OK]

Hint: Always call subscribe() after setting up channel listeners [OK]

Common Mistakes:

• Skipping subscribe() call
• Using wrong event name
• Expecting presenceState() without subscription

5. You want to show a live list of online users with their usernames using Supabase presence. Which approach correctly combines presence tracking and user data fetching?

hard

A. Subscribe to 'update' events and update UI without querying user data

B. Query user profiles once on page load, then listen to 'message' events for updates

C. Listen to 'presence' event, get user IDs from presenceState(), then query user profiles from database

D. Use presenceState() to get usernames directly without extra queries

Solution

1. Step 1: Understand presenceState() data

   presenceState() gives user IDs and metadata, but not full usernames.

2. Step 2: Combine presence with database queries

   After getting IDs from presenceState(), query the database to fetch usernames for display.

3. Final Answer:

   Listen to 'presence' event, get user IDs from presenceState(), then query user profiles from database -> Option C

4. Quick Check:

   Presence + DB query = live usernames [OK]

Hint: Use presenceState() IDs then query DB for usernames [OK]

Common Mistakes:

• Expecting presenceState() to contain usernames
• Not querying user profiles after presence update
• Listening to wrong events like 'message' or 'update'