Broadcast Channel API

JavaScript | Mon Aug 26 2024 | 3 min read

JavaScript offer many APIs for communication across different sections of an web application or with other web applications.

Broadcast channel
MessageChannel API
Window.postMessage()
Shared workers.

In this blog, we'll try to understand usages and use cases for BroadcastChannel.

Step 1: Feature detection

javascript

if ('BroadcastChannel' in self) {
    // BroadcastChannel API supported!
}

Step 2: Create a channel

javascript

var bc = new BroadcastChannel('sample_app_channel'); // channel name

Step 3: Sending message

javascript

 bc.postMessage("Sample message");

Step 4: Listening/receiving message

javascript

  bc.onmessage = (messageEvent) => {
      title.innerHTML = messageEvent.data;
  }

How Broadcast Channel

If the hosts are different it won’t work:
- https://techcookies.com
- https://www.techcookies.com
If the ports are different it won’t work:
- https://techcookies.com
- https://techcookies.com:8080
If the schemes are different it won’t work. That is similar to different ports since the standard is that http and https respectively use port 80 and 443:
- http://techcookies.io
- https://techcookies.io
Broadcast channels will not work if one of the windows is in incognito mode or across browsers (e.g. Firefox to Chrome).
A channel won't broadcast to itself. So if you have an onmessage listener on the same page as a postMessage() to the same channel, that message event doesn't fire.

What can be passed as message

All primitive types except symbols (Boolean, Null, Undefined, Number, BigInt, String, Dates)
Blobs
Files, FileLists
ArrayBuffers, ArrayBufferViews
ImageBitmaps, ImageDatas
Arrays, Objects, Maps and Sets

Use cases

Detect user actions in other tabs
Know when a user logs into an account in another window/tab.
Instruct a worker to perform some background work
Know when a service is done performing some action.
When the user uploads a photo in one window, pass it around to other open pages.

Complete example

javascript

//index.html
 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sender document</title>
</head>

<body>
  <label>Enter your name</label>
  <input id="name-field" placeholder="Enter Your Name" />
</body>

<script>

  var bc = new BroadcastChannel('sample_app_channel');

  (() => {
    const nameField = document.getElementById('name-field');

    nameField.onchange = (e) => {
      const inputValue = e.target.value;
      bc.postMessage(inputValue);
    }
  })()
</script>
</body>

</html>

javascript

//index2.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Receiver document</title>
</head>

<body>
    <h1 id="title">Hi</h1>
</body>
<script>
    var bc = new BroadcastChannel('sample_app_channel');
    (() => {
        const title = document.getElementById('title');
        const setTitle = (name) => {
            title.innerHTML = 'Hi ' + name;
        }

        bc.onmessage = (messageEvent) => {
            setTitle(messageEvent.data);
        }
    })()
</script>
</body>

</html>