TIL about the Broadcast Channel API

POSTED ON: Mar 09, 2022

TAGS: javascript browser

The Broadcast Channel API allows communication between browsing contexts (windows, tabs, iframes) and workers on the same origin.

Think of a use-case like, once you logout from an app running in a browser tab, you want to broadcast it to the app instances opened in other tabs of the same browser.

Creating the Broadcast #

First step is to create a broadcast channel by giving it a unique name. Also define the content(message) you want to broadcast.

const CHANNEL_NAME = "greenroots_channel";
 const bc = new BroadcastChannel(CHANNEL_NAME);
 const message = 'I am wonderful!';

Broadcasting #

To broadcast a message, call the method postMessage() on the channel by passing the message.

const sendMessage = () => {
   bc.postMessage(message);
}

Listening for the Broadcast #

At the receiving end, whoever is listening to the broadcast will be notified with the message sent.

 const CHANNEL_NAME = "greenroots_channel";
 const bc = new BroadcastChannel(CHANNEL_NAME);

 bc.addEventListener('message', function(event) {
    console.log(`Received message, "${event.data}", on the channel, "${CHANNEL_NAME}"`);
    const output = document.getElementById('msg');
    output.innerText = event.data;
 });

Direct link to the demo: https://demo.greenroots.info/web-apis/web-apis-broadcast/

via Tapas Adhikary's 10 lesser-known Web APIs you may want to use

Related TILs

Tagged: javascript

• Next: TIL Blogpost, What New Hires think aboutNew hires come in with a lot of unknowns. They also don't have psychological safety to open up.
• Previous: TIL ELI5 for Async AwaitIf you make a call to a friend across the world, it'll take 20 seconds before they respond. You can't just wait 20 seconds. So you run other code.