MessageChannel

Lesson 1 · ~8 minutes · no iframe yet

Two entangled ports

A private pipe is two ends that already know each other. You do not address a window. You do not join a named bus. You hold a port.

new MessageChannel() returns two MessagePorts, port1 and port2. The constructor entangles them: a message posted on one is delivered at the other, and vice versa, as a DOM message event. That is the whole topology — a two-way pipe, not a room. (HTML §9.4.1)

port1you keep

port2you can hand off

There is no targetOrigin on a port. There is no origin to check on the MessageEvent it fires. The permission is the port itself: whoever holds an end can talk on that channel. The spec calls this an object-capability model. (HTML §9.4.1.2)

Not those other pipes

Tool	You already have	Who hears
window.postMessage	A window handle (parent, opener, iframe.contentWindow)	That window — after you pick targetOrigin and they check event.origin
BroadcastChannel	A string name	Every same-origin context that joined that name
A function / React callback	The same JS world	Whoever you called. No channel.
MessageChannel	Nothing but the pair you just minted	Only the other port

Feel the pair

This lab is a real MessageChannel in this page. Send from port1; it must show up only on port2. Then the other way. Same-page use is a teaching trick — two React components in one document should just call a function.

Check

What does new MessageChannel() give you?

Two private ports One public window One named channel Two cloned frames

Check

You post a string on port1. Where does it land?

Reaches the other port Reaches every same tab Reaches the iframe win Reaches both page ends

Check

A parent will keep one end and give the other to an iframe, then talk only on the end it kept. Which tool?

address window broadcast name entangled pair local function

Check

Logout must notify every same-origin tab. Which tool?

address window broadcast name entangled pair local function

Check

You have iframe.contentWindow and need one “ready?” message, with an origin check. Which tool?

address window broadcast name entangled pair local function

Check

Two React components in the same document need to share a selected id. Which tool?

address window broadcast name entangled pair local function

Check

Primary source

Read the non-normative intro: HTML Living Standard §9.4.1 Channel messaging. Stop before the contacts/game capability story if you want — we will use that mental model when we transfer a port.

Ask the teacher

If a distinction here is mushy — especially “I already have a window, why would I mint a pair?” — ask. Next: the port API (postMessage, onmessage vs start(), close()). Pocket card: entangled ports.