Channel messaging

Internet Explorer 10 and Windows Store 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 Store apps using JavaScript, the Channel Messaging API supports the following interfaces.

The MessageChannel interface

Returns a new MessageChannel object with two new MessagePort objects.

AttributeTypeDescription
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.

MethodDescription

postMessage( in any message, in optional ports);

Posts a message through the channel.

start

Begins dispatching messages.

close

Disconnects the port.

 

The following event is supported.

EventDescription

onmessage

Message data received.

 

API Reference

Web Messaging

Internet Explorer Test Drive demos

The Web Worker Fountains

IEBlog posts

Web Workers in IE10: Background JavaScript Makes Web Apps Faster

Specification

HTML5 Web Messaging: Section 5

 

 

Show:
© 2014 Microsoft