Presence and Broadcast Channels
Go beyond table changes with Supabase Realtime Presence to track who is online and Broadcast to send ephemeral messages between clients.
Presence and Broadcast Channels is a free Supabase Backend as a Service lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Supabase Backend as a Service learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Two More Realtime Features
Besides Postgres change streams, Supabase Realtime offers Presence (track online users) and Broadcast (send transient messages). Neither requires a database table.
What Is Presence?
Presence lets each client share small state (like a username or cursor position) and see everyone else's state in the same channel in real time.
Creating a Channel
A channel is a named room clients join.
const room = supabase.channel('room-1', {
config: { presence: { key: 'user-42' } }
});Tracking Presence
After subscribing, call track to publish your state to everyone in the channel.
room.subscribe(async (status) => {
if (status === 'SUBSCRIBED') {
await room.track({ name: 'Ada', online_at: Date.now() });
}
});Reading Who Is Online
Listen for sync events and read the current presence state of all members.
room.on('presence', { event: 'sync' }, () => {
const state = room.presenceState();
console.log('Online:', Object.keys(state).length);
});Join and Leave Events
Presence emits join and leave events so you can animate users appearing and disappearing.
room.on('presence', { event: 'join' }, ({ newPresences }) => {
console.log('Joined:', newPresences.length);
});What Is Broadcast?
Broadcast sends low-latency messages to everyone in a channel without storing them. Great for cursors, typing indicators, and game moves.
Sending a Broadcast
Use send with a custom event name and payload.
room.send({
type: 'broadcast',
event: 'cursor',
payload: { x: 120, y: 80 }
});Receiving a Broadcast
Subscribe to the same event name to handle incoming messages.
room.on('broadcast', { event: 'cursor' }, ({ payload }) => {
console.log('Cursor at', payload.x, payload.y);
});Cleaning Up
Always remove channels when a component unmounts to free connections.
function cleanup(channel, supabase) {
supabase.removeChannel(channel);
return 'removed';
}
console.log(cleanup('chan', { removeChannel: () => {} }));Choosing the Right Tool
Use Postgres changes for persisted data, Presence for online status, and Broadcast for fast disposable messages.
Quick Check
Test your understanding of Presence and Broadcast.
Recap
You learned to track online users with Presence and send ephemeral messages with Broadcast, plus when to use each versus Postgres change streams, and to clean up channels.
Frequently asked questions
Is the “Presence and Broadcast Channels” lesson free?
Yes — the full text of “Presence and Broadcast Channels” is free to read here on the web, and the Supabase Backend as a Service course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Supabase Backend as a Service course, upgrade to CoddyKit PRO.
What will I learn in “Presence and Broadcast Channels”?
Go beyond table changes with Supabase Realtime Presence to track who is online and Broadcast to send ephemeral messages between clients. You practise Supabase Backend as a Service with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Supabase Backend as a Service?
No prior experience is required. Supabase Backend as a Service on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Presence and Broadcast Channels” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Supabase Backend as a Service lesson?
Yes. Every Supabase Backend as a Service lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Understanding Realtime Subscriptions
- Subscribing to Table Changes
- Building a Live Chat Feature
- Presence and Broadcast Channels