Skip to content

The BroadcastChannel API

Learn the basics of 1-to-many communication using the BroadcastChannel API

The Channel Messaging API is a great way to send 1-to-1 messages from a window to an iframe, from a window to a Web Worker, and so on.

The BroadcastChannel API can be used to send 1-to-many messages, communicating to multiple entities at the same time.

You start by initializing a BroadcastChannel object:

const channel = new BroadcastChannel('thechannel')

To send a message on the channel you use the postMessage() method:

channel.postMessage('Hey!')

A message can be any of those supported values:

To receive messages from the channel, listen to the message event:

channel.onmessage = (event) => {
  console.log('Received', event.data)
}

This event is fired for all listeners, except the one that is sending the message.

You can close the channel using:

channel.close()

→ Here's my latest YouTube video

→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter

JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025

Bootcamp 2025

Join the waiting list