Broadcast for custom events in Supabase - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to broadcast a custom event named 'update' using Supabase client.

Supabase

supabase.channel('custom-channel').[1]('update', { message: 'Hello!' });

Drag options to blanks, or click blank then click option'

Abroadcast

Bemit

Csend

Dpublish

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'send' or 'emit' which are not valid Supabase channel methods.

Using 'publish' which is not a method on Supabase channels.

The broadcast method sends a custom event to all subscribers of the channel.

2fill in blank

medium

Complete the code to listen for the 'update' event on a Supabase channel.

Supabase

supabase.channel('custom-channel').on('broadcast', { event: '[1]' }, payload => console.log(payload)).subscribe();

Drag options to blanks, or click blank then click option'

Aupdate

Bbroadcast

Cmessage

Dcustom-event

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'broadcast' or 'message' which are not event names.

Using a different event name than the one broadcasted.

The on method listens for the broadcast event filtered by the event name 'update'.

3fill in blank

hard

Fix the error in the code to correctly broadcast a custom event with Supabase.

Supabase

supabase.channel('custom-channel').[1]('update', { data: 'test' });

Drag options to blanks, or click blank then click option'

Aon

Bsubscribe

Cbroadcast

Dlisten

Attempts:

3 left

💡 Hint

Common Mistakes

Calling subscribe directly on broadcast method.

Using 'on' or 'listen' to send events.

The broadcast method sends the event; subscribe is called separately to listen.

4fill in blank

hard

Fill both blanks to create a Supabase channel, broadcast an event, and subscribe to it.

Supabase

const channel = supabase.channel('[1]');
channel.[2]('refresh', { info: 'data' });
channel.subscribe();

Drag options to blanks, or click blank then click option'

Acustom-channel

Bsend

Cbroadcast

Dmain-channel

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'send' instead of 'broadcast'.

Using a different channel name than intended.

Create a channel named 'custom-channel' and use broadcast to send the 'refresh' event.

5fill in blank

hard

Fill all three blanks to listen for a custom event and log its payload.

Supabase

supabase.channel('[1]').on('broadcast', { event: '[2]' }, payload => {
  console.log('[3]:', payload);
}).subscribe();

Drag options to blanks, or click blank then click option'

Acustom-channel

Brefresh

Cevent

Dpayload

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong event or channel names.

Logging a string instead of the payload variable.

Listen on 'custom-channel' for the broadcast event filtered by the 'refresh' event name and log the payload variable.

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