Widely available Supported across all major browsers. Safe to use in production.

Channel messaging

The MessageChannel interface of the Channel Messaging API allows us to create a new message channel and send data through it via its two MessagePort properties.

Messaging and Workers

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
MessageChannel
2
12
41
5
18
4.2
MessageChannel

The MessageChannel() constructor of the MessageChannel interface returns a new MessageChannel object with two new MessagePort objects.
2
12
41
5
18
4.2
port1

The port1 read-only property of the MessageChannel interface returns the first port of the message channel — the port attached to the context that originated the channel.
2
12
41
5
18
4.2
port2

The port2 read-only property of the MessageChannel interface returns the second port of the message channel — the port attached to the context at the other end of the channel, which the message is initially sent to.
2
12
41
5
18
4.2
ports

The ports read-only property of the MessageEvent interface is an array of MessagePort objects containing all MessagePort objects sent with the message, in order.
4
12
3
4
18
3.2
MessagePort

The MessagePort interface of the Channel Messaging API represents one of the two ports of a MessageChannel, allowing messages to be sent from one port and listening out for them arriving at the other.
2
12
41
5
18
4.2
close

The close() method of the MessagePort interface disconnects the port, so it is no longer active. This stops the flow of messages to that port.
2
12
41
5
18
4.2
message_event

The message event is fired on a MessagePort object when a message arrives on that channel.
2
12
41
5
18
4.2
postMessage

The postMessage() method of the MessagePort interface sends a message from the port, and optionally, transfers ownership of objects to other browsing contexts.
2
12
41
5
18
4.2
start

The start() method of the MessagePort interface starts the sending of messages queued on the port. This method is only needed when using EventTarget.addEventListener; it is implied when using MessagePort.message_event.
2
12
41
5
18
4.2
worker_support

Available in workers
4
12
41
5
18
4.2
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

JAVASCRIPT 
const channel = new MessageChannel();
const output = document.querySelector(".output");
const iframe = document.querySelector("iframe");

// Wait for the iframe to load
iframe.addEventListener("load", onLoad);

function onLoad() {
  // Listen for messages on port1
  channel.port1.onmessage = onMessage;

  // Transfer port2 to the iframe
  iframe.contentWindow.postMessage("Hello from the main page!", "*", [
    channel.port2,
  ]);
}

// Handle messages received on port1
function onMessage(e) {
  output.innerHTML = e.data;
}

Use cases

  • Using Channel messaging

    The MessageChannel interface of the Channel Messaging API allows us to create a new message channel and send data through it via its two MessagePort properties.

Cautions

  • May not be supported in older browsers.

Implementation notes

  • Some APIs require a secure context (HTTPS) or user activation. Check the requirements before use.

Related links