MessageChannel : Object

constructor

A message channel allows sending messages between contexts, such as two Workers, by transferring the MessageChannel's MessagePorts to the workers. See also Window.postMessage and BroadcastChannel.

Spec

Constructors

new MessageChannel() : MessageChannel

Example:

<script id='worker1' type='text/plain'>
  onmessage = e => {
    const port2 = e.data;
    port2.onmessage = e => {
      postMessage(`worker1 got: ${e.data}`);
    };
    port2.postMessage('message from 1 to 2');
  };
</script>
<script id='worker2' type='text/plain'>
  onmessage = e => {
    const port1 = e.data;
    port1.onmessage = e => {
      postMessage(`worker2 got: ${e.data}`);
    };
    port1.postMessage('message from 2 to 1');
  };
</script>
<script>
  const channel = new MessageChannel();
  const makeWorker = (id, port) => {
    const code = document.getElementById(id).textContent;
    const blob = new Blob([code], { type: 'application/javascript' });
    const worker = new Worker(URL.createObjectURL(blob));

    worker.onmessage = e => console.log(e.data);

    // Transfer the port to the worker
    worker.postMessage(port, [port]);
  };
  makeWorker('worker1', channel.port1);
  makeWorker('worker2', channel.port2);
</script>

Run

Results:

Instance Properties

port1 : MessagePort readonly

The first port the channel.

port2 : MessagePort readonly

The second port the channel.

home license contribute feedback toggle light/dark mode