Channel messaging

Artigo
11/03/2017

Internet Explorer 10 and Windows apps using JavaScript introduce support for channel messaging. Channel messaging enables code in different browsing contexts to communicate directly via ports. After the ports are created, the endpoints communicate by using a combination of the postMessage method and the onmessage event.

The channel object

To open a channel, create a new MessageChannel object as follows.

var channel = new MessageChannel();

The channel object contains both port1 and port2 endpoints. Typically, one port is kept as the local port, and the other is sent to the remote window or worker. Ports can also enable communication between workers.

Here's an example of sending a port to be used for cross-document communication. Be aware that the array of ports must be the last argument.

otherWindow.postMessage('hello', 'http://example.com', [channel.port2]);

Similarly, you can send a port endpoint to a worker thread by using postMessage, as follows.

worker.postMessage({code:"port"}, [channel.port2]);

The array of ports is sent in the ports property of the event. A port can be used once and closed, or it can be saved locally and used repeatedly, as necessary. The following example shows how a worker thread might receive and use a port.

// Worker Thread 
onmessage = function (event) {
    if (event.data.code == "port") {
        event.ports[0].postMessage("Port received.");
    }
}

After the port is received, additional communication occurs on the port using postMessage and onmessage events. The following code defines an event handler and sends a message using a channel-messaging port.

channel.port1.onmessage = function (event) {
  // Message is in event.data
  alert("Message is: " + event.data);
}

channel.port1.postMessage('hello');

Channel messaging is used to coordinate lighting effects between worker threads in the Web Worker Fountains demo. Check it out on the IE Test Drive. For a full messaging demo, see the MessageChannel object reference page.

Supported APIs

In Internet Explorer 10 and Windows apps using JavaScript, the Channel Messaging API supports the following interfaces.

The MessageChannel interface

Returns a new MessageChannel object with two new MessagePort objects.

Attribute	Type	Description
port1	MessagePort	The first port.
port2	MessagePort	The second port.

The MessagePort interface

Each channel has two message ports. Data sent through either port is received by the other.

The following methods are supported.

Method	Description
postMessage( in any message, in optional ports);	Posts a message through the channel.
start	Begins dispatching messages.
close	Disconnects the port.