The Channel Messaging API allows two separate scripts running in different browsing contexts attached to the same document (e.g., two IFrames, or the main document and an IFrame, or two documents via a SharedWorker) to communicate directly, passing messages between one another through two-way channels (or pipes) with a port at each end. In this article we'll explore the basics of using this technology.

API Channel messaging HTML5 MessageChannel MessagePort Tutorial

The MessageChannel() constructor of the MessageChannel interface returns a new MessageChannel object with two new MessagePort objects.

API Channel messaging Constructor MessageChannel Reference

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.

API Channel Messaging API Interface MessageChannel Reference web messaging

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.

API Channel messaging HTML5 Message Channel API MessageChannel Property Reference

The port2 read-only property of the MessageChannel interface returns 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.

API Channel messaging HTML5 MessageChannel port2 Property Reference