BroadcastChannel : EventTarget

constructor

BroadcastChannel provides a simple way for different contexts (such as Windows or Workers) in the same origin to broadcast messages all other BroadcastChannels created with the same name. See also Window.postMessage and MessageChannel.

Spec

Constructors

new BroadcastChannel(name : String) : BroadcastChannel

Creates a new BroadcastChannel for the specified name.

Example:

<script id='workerCode' type='text/plain'>
  const channel = new BroadcastChannel('constructor-example');
  channel.postMessage('message from worker');
</script>
<iframe id='iframe'></iframe>
<script id='iframeCode' type='text/plain'>
  const channel = new BroadcastChannel('constructor-example');
  channel.postMessage('message from iframe');
</script>
<script>
  const channel = new BroadcastChannel('constructor-example');
  channel.onmessage = e => console.log(e.data);

  const workerCode = document.getElementById('workerCode').textContent;
  const workerBlob = new Blob([workerCode], { type: 'application/javascript' });
  const worker = new Worker(URL.createObjectURL(workerBlob));

  var iframeCode = document.getElementById('iframeCode').textContent;
  var html = '<script>' + iframeCode + '</' + 'script>';
  var iframeBlob = new Blob([html], { type: 'text/html' });
  document.querySelector('#iframe').src = URL.createObjectURL(iframeBlob);
</script>

Run

Results:

Spec

Instance Properties

name : String readonly

Returns the name of the channel.

Example:

<script>
  const channel = new BroadcastChannel('name-example');
  console.log(channel.name);
</script>

Run

Results:

Spec

Instance Methods

close() : undefined

Causes this to stop listening to message. Allows this to be garbage collected.

Example:

<script id='worker' type='text/plain'>
  const channel = new BroadcastChannel('close-example');
  for (let i = 1; i < 10; i++) {
    setTimeout(() => channel.postMessage(i), 100 * i);
   }
</script>
<script>
  const channel = new BroadcastChannel('close-example');
  channel.onmessage = e => {
    console.log(`got: ${e.data}`);

    // stop listening after 4 messages
    if (e.data === 4) {
      channel.close();
    }
  };

  const code = document.getElementById('worker').textContent;
  const blob = new Blob([code], { type: 'application/javascript' });
  const worker = new Worker(URL.createObjectURL(blob));
</script>

Run

Results:

Spec

postMessage(message : Object) : undefined

Serializes message and sends it to all other BroadcastChannels sharing the same name as this on the same origin.

Example:

<script id='worker' type='text/plain'>
  const channel = new BroadcastChannel('postMessage-example');
  // Many data types can be sent.
  channel.postMessage('foo');
  channel.postMessage(1234);
  channel.postMessage(5678n);
  channel.postMessage({foo: 'bar'});
  channel.postMessage(['a', 'b', 'c']);
</script>
<script>
  const channel = new BroadcastChannel('postMessage-example');
  channel.onmessage = e => console.log(`got ${typeof e.data}:`, e.data);

  const code = document.getElementById('worker').textContent;
  const blob = new Blob([code], { type: 'application/javascript' });
  const worker = new Worker(URL.createObjectURL(blob));
</script>

Run

Results:

Spec

Instance Events

onmessage / 'message' event

listener(event : MessageEvent) : undefined

Fired when postMessage is called on another BroadcastChannel sharing the same name as this.

Example:

<script id='workerCode' type='text/plain'>
  const channel = new BroadcastChannel('message-example');
  channel.postMessage('message from worker');
</script>
<iframe id='iframe'></iframe>
<script id='iframeCode' type='text/plain'>
  const channel = new BroadcastChannel('message-example');
  channel.postMessage('message from iframe');
</script>
<script>
  const channel = new BroadcastChannel('message-example');
  channel.onmessage = e => console.log(e.data);

  const workerCode = document.getElementById('workerCode').textContent;
  const workerBlob = new Blob([workerCode], { type: 'application/javascript' });
  const worker = new Worker(URL.createObjectURL(workerBlob));

  var iframeCode = document.getElementById('iframeCode').textContent;
  var html = '<script>' + iframeCode + '</' + 'script>';
  var iframeBlob = new Blob([html], { type: 'text/html' });
  document.querySelector('#iframe').src = URL.createObjectURL(iframeBlob);
</script>

Run

Results:

Spec

onmessageerror / 'messageerror' event

listener(event : MessageEvent) : undefined

Fired when unable to deserialize a message from another BroadcastChannel in this' context.

Spec

home license contribute feedback toggle light/dark mode