Broadcast for custom events in Supabase - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ service_behavior

intermediate

How does Supabase broadcast custom events to clients?

Supabase allows broadcasting custom events to clients subscribed to a channel. What happens when you broadcast a custom event on a channel?

A All clients subscribed to that channel receive the event with the specified payload.

B Only the client that sent the event receives the broadcasted message.

C Clients subscribed to other channels receive the event regardless of their subscription.

D The event is stored in the database but not sent to any client.

💡 Hint

Think about how broadcasting works in a chat room: everyone in the room hears the message.

Broadcasting a custom event sends the event and its payload to all clients subscribed to the same channel, enabling real-time communication.

❓ Configuration

intermediate

Which code snippet correctly broadcasts a custom event named 'update' with payload {count: 5} on a Supabase channel?

Choose the correct JavaScript code to broadcast a custom event 'update' with payload {count: 5} on a Supabase channel named 'my-channel'.

A channel.broadcast('update', {count: 5});

B channel.send('update', {count: 5});

C channel.emit('update', {count: 5});

D channel.push('update', {count: 5});

💡 Hint

Look for the method that explicitly means sending to all subscribers.

The broadcast method sends a custom event to all clients subscribed to the channel. Other methods like send, emit, or push are not valid for broadcasting in Supabase.

❓ Architecture

advanced

What is the best architecture to ensure reliable delivery of custom broadcast events in Supabase?

In a system using Supabase real-time channels, which architecture pattern best ensures that custom broadcast events are reliably delivered to all clients even if some disconnect temporarily?

A Send events via HTTP requests instead of channels to guarantee delivery.

B Broadcast events only once without any retry or logging, relying on clients to be always connected.

C Use Supabase channels with client reconnection logic and server-side event logging for replay on reconnect.

D Use multiple channels per client to increase chances of event delivery.

💡 Hint

Think about how to handle clients that disconnect and reconnect.

Supabase channels support reconnection, but to ensure no events are missed, server-side logging and replay on reconnect is needed. Broadcasting only once without retries risks lost events. HTTP requests are not real-time broadcasts. Multiple channels per client add complexity without improving reliability.

❓ security

advanced

Which security risk is most relevant when broadcasting custom events in Supabase channels?

When broadcasting custom events on Supabase channels, what is the main security risk to consider?

A Clients receiving duplicate events due to reconnection.

B Clients sending malformed events causing server crashes.

C Broadcast events being delayed due to network latency.

D Unauthorized clients subscribing to channels and receiving sensitive event data.

💡 Hint

Consider who can listen to the events and what data they get.

If channel subscriptions are not properly secured, unauthorized clients can listen to sensitive broadcast events. Malformed events or delays are less critical security issues. Duplicate events affect user experience but not security.

✅ Best Practice

expert

What is the recommended best practice for naming custom events broadcasted in Supabase channels?

To maintain clarity and avoid conflicts, what is the best practice for naming custom events broadcasted on Supabase channels?

A Use generic names like 'event1', 'event2' to keep it short.

B Use descriptive, lowercase event names with words separated by underscores, e.g., 'user_update'.

C Use uppercase event names with spaces, e.g., 'USER UPDATE'.

D Use random strings as event names to avoid collisions.

💡 Hint

Think about readability and consistency in naming conventions.

Descriptive, lowercase names with underscores improve readability and reduce naming conflicts. Generic or random names are confusing. Uppercase with spaces can cause parsing issues.

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