Broadcast for custom events in Supabase - Step-by-Step Execution

Process Flow - Broadcast for custom events

Client A sends custom event

↓

Supabase server receives event

↓

Server broadcasts event to all subscribers

↓

Client B and others receive event

↓

Clients handle event with custom logic

Clients send custom events to Supabase server, which broadcasts them to all subscribed clients who then react accordingly.

Execution Sample

Supabase

const channel = supabase.channel('custom-events');
channel.on('broadcast', { event: 'my_event' }, (payload) => {
  console.log('Received:', payload);
});
channel.subscribe();
channel.send({ type: 'broadcast', event: 'my_event', payload: { message: 'Hello!' } });

This code subscribes to a custom event channel and broadcasts a message to all subscribers.

Process Table

Step	Action	Event Type	Payload	Result
1	Create channel 'custom-events'	-	-	Channel object ready
2	Subscribe to 'my_event' broadcast	my_event	-	Listening for 'my_event' broadcasts
3	Subscribe channel	-	-	Subscription confirmed
4	Send broadcast with event 'my_event'	my_event	{ message: 'Hello!' }	Broadcast sent to server
5	Server receives broadcast	my_event	{ message: 'Hello!' }	Server broadcasts to all subscribers
6	Client receives broadcast	my_event	{ message: 'Hello!' }	Client callback triggered, logs message
7	End	-	-	Broadcast cycle complete

💡 Broadcast cycle ends after all subscribed clients receive and handle the event.

Status Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	After Step 6	Final
channel	undefined	Channel object	Subscribed to 'my_event'	Subscription active	Broadcast sent	Broadcast received	Ready for next event
payload	undefined	undefined	undefined	undefined	{ message: 'Hello!' }	{ message: 'Hello!' }	undefined

Key Moments - 3 Insights

Why do we need to subscribe to the channel before sending a broadcast?

Subscribing ensures the client is connected and listening; otherwise, it won't receive broadcasts. See execution_table rows 2 and 3.

What happens if no clients are subscribed when a broadcast is sent?

The server still receives the broadcast but has no clients to forward it to, so no one receives the event. This is implied between steps 4 and 5.

Can a client receive its own broadcast message?

Yes, clients subscribed to the channel receive all broadcasts including their own. See execution_table row 6.

Visual Quiz - 3 Questions

Look at the execution table, at which step does the client start listening for the custom event?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Check the 'Action' and 'Result' columns in execution_table row 2.

At which step is the broadcast message actually sent to the server?

A Step 3

B Step 4

C Step 5

D Step 6

💡 Hint

Look for 'Send broadcast' action in execution_table.

If the client did not subscribe, what would be the state of 'channel' after step 3?

A Subscription active

B Broadcast sent

C Channel object created but not subscribed

D Broadcast received

💡 Hint

Refer to variable_tracker for 'channel' state after step 1 and 2.

Concept Snapshot

Broadcast for custom events in Supabase:
- Create a channel with supabase.channel(name)
- Subscribe to custom event broadcasts with channel.on('broadcast', {event}, callback)
- Call channel.subscribe() to start listening
- Send broadcasts with channel.send({type:'broadcast', event, payload})
- All subscribed clients receive the event and run the callback
- Useful for real-time communication between clients

Full Transcript

This visual execution shows how Supabase clients use broadcast channels for custom events. First, a client creates a channel and subscribes to a specific event name. Then it subscribes to start listening. When a client sends a broadcast with a payload, the Supabase server receives it and forwards it to all subscribed clients. Each client runs its callback with the payload. The variable tracker shows the channel object state and payload during the steps. Key moments clarify why subscription is needed before sending and that clients receive their own broadcasts. The quiz tests understanding of subscription timing, broadcast sending, and channel state.

Practice

1. What is the main purpose of using broadcast in Supabase custom events?

easy

A. To let different parts of your app communicate instantly

B. To store data permanently in the database

C. To create user authentication tokens

D. To schedule background jobs automatically

Solution

1. Step 1: Understand the role of broadcast

   Broadcast is used to send messages instantly between parts of an app without delay.

2. Step 2: Compare with other options

   Storing data, authentication, and scheduling jobs are unrelated to broadcast messaging.

3. Final Answer:

   To let different parts of your app communicate instantly -> Option A

4. Quick Check:

   Broadcast = instant app communication [OK]

Hint: Broadcast means instant messaging inside your app [OK]

Common Mistakes:

• Confusing broadcast with database storage
• Thinking broadcast handles authentication
• Assuming broadcast schedules tasks

2. Which of the following is the correct way to listen for a broadcast event on a Supabase channel?

easy

A. channel.subscribe('broadcast', callbackFunction)

B. channel.listen('broadcast', callbackFunction)

C. channel.on('broadcast', callbackFunction)

D. channel.receive('broadcast', callbackFunction)

Solution

1. Step 1: Recall Supabase broadcast listening syntax

   The correct method to listen for broadcast events is on('broadcast', callback).

2. Step 2: Check other options

   Methods like listen, receive, and subscribe are not valid for broadcast events in Supabase.

3. Final Answer:

   channel.on('broadcast', callbackFunction) -> Option C

4. Quick Check:

   Listen with on('broadcast') = channel.on('broadcast', callbackFunction) [OK]

Hint: Use on('broadcast') to listen for events [OK]

Common Mistakes:

• Using listen() instead of on()
• Confusing subscribe() with on()
• Trying receive() which is invalid

3. Given the following code snippet, what will be logged when the broadcast event is sent?

const channel = supabase.channel('chat');
channel.on('broadcast', (payload) => {
  console.log('Received:', payload.message);
});
channel.send({ type: 'broadcast', message: 'Hello!' });

medium

A. Received: Hello!

B. Received: undefined

C. Error: send method not found

D. No output

Solution

1. Step 1: Understand the broadcast sending and listening

   The channel sends a broadcast with message 'Hello!'. The listener logs payload.message.

2. Step 2: Trace the output

   The listener receives the payload and logs 'Received: Hello!'.

3. Final Answer:

   Received: Hello! -> Option A

4. Quick Check:

   Broadcast send triggers on() callback with message [OK]

Hint: send() triggers on('broadcast') with payload [OK]

Common Mistakes:

• Expecting no output because of missing subscription
• Confusing payload structure causing undefined
• Assuming send() method does not exist

4. Identify the error in this Supabase broadcast code snippet:

const channel = supabase.channel('updates');
channel.send({ type: 'broadcast', message: 'Update!' });
channel.on('broadcast', (payload) => {
  console.log(payload.message);
});

medium

A. The send method requires a callback function

B. The payload object must include a 'channel' property

C. The channel name must be 'broadcast' to send broadcast events

D. The listener is set after sending the broadcast, so it misses the message

Solution

1. Step 1: Check the order of send and listen

   The code sends the broadcast before setting the listener, so the listener misses the event.

2. Step 2: Validate other options

   Send does not require a callback; channel name can be any string; payload does not need a 'channel' property.

3. Final Answer:

   The listener is set after sending the broadcast, so it misses the message -> Option D

4. Quick Check:

   Listener must be set before send to catch events [OK]

Hint: Set listener before sending broadcast [OK]

Common Mistakes:

• Sending before listening causes missed events
• Thinking send needs a callback
• Assuming channel name must be 'broadcast'

5. You want to broadcast a custom event to multiple parts of your app grouped under a channel named 'notifications'. Which steps correctly implement this using Supabase's broadcast feature?

hard

A. Use subscribe('notifications') to listen and emit('broadcast') to send events

B. Create a channel 'notifications', set listeners with on('broadcast'), then send events with send({ type: 'broadcast', ... })

C. Create multiple channels for each listener, then send events individually to each channel

D. Broadcast events without creating a channel; listeners listen globally by default

Solution

1. Step 1: Group listeners and senders with a channel

   Create a channel named 'notifications' to group app parts.

2. Step 2: Use on('broadcast') to listen and send() to broadcast

   Listeners use on('broadcast') and senders use send({ type: 'broadcast', ... }) to communicate.

3. Final Answer:

   Create a channel 'notifications', set listeners with on('broadcast'), then send events with send({ type: 'broadcast', ... }) -> Option B

4. Quick Check:

   Channel + on('broadcast') + send() = correct broadcast setup [OK]

Hint: Use one channel with on('broadcast') and send() for group messaging [OK]

Common Mistakes:

• Creating multiple channels unnecessarily
• Using subscribe() or emit() which are invalid
• Assuming broadcast works without channels