MessageChannel object

Provides a two way asynchronous messaging through two related ports enabling intra, and inter-window communication.

HTML5 Web Messaging

 

Syntax

Copy 

 channel = new MessageChannel();

Members

The MessageChannel object has these types of members:

Properties

The MessageChannel object has these properties.

PropertyAccess typeDescription

port1

Read-only

Returns the first MessagePort object of a MessageChannel object.

port2

Read-only

Returns the second MessagePort object of a MessageChannel object.

 

Standards information

Remarks

When you create a new MessageChannel object, it has two connected MessagePort objects (port1 and port2). One of the ports is sent to another window or frame, and messages can be sent and received without repeated origin checking that is needed when using window.postMessage. Validation of the origin of a port and messages need only be done when a port is sent to windows other than the one that created them. MessagePort simplifies the messaging process by sending and receiving messages through two (and only those two) connected ports.

Messages are posted between the ports using postMessage. Since the ports will only accept messages between the connected ports, no further validation is required once the connection is established. MessageChannel enables asynchronous communication between IFrameElements, cross-domain windows, or same page communications.

The following example shows how a parent window can communicate directly with a worker thread that is inside an iframe by using a MessageChannel.

Examples

This example consists of three files, a parent window, an iframe, and a worker file. The first example is the "window.html" file. This file creates a new MessageChannel. One of the ports gets an onmessage event attached to receive messages from the Worker thread. The other port is sent to the iframe.

Window.html

HTML
Copy 

<!DOCTYPE html>
<html >
<head>    
    <title>MessageChannel demo - Main Window</title>
</head>
<body>    
  <iframe id="myFrame" src="iframe.html" onload="doMessage()" style="width:50%; height:35%; border:1px solid black;" ></iframe>
    <div id="display" style="font-size:large; color:Blue; "></div>
  
  <script type="text/javascript">
      function doMessage() {
      var iframeContents = document.getElementById("myFrame").contentWindow;
      if (window.MessageChannel) {
        
        // Create MessageChannel
        var m = new MessageChannel();

          // Listen on port1
          m.port1.onmessage = function (e) {
            //Report back what is received
            document.getElementById("display").innerText = "Data from worker: " + e.data;
          }

          // Send one port of the channel to the iframe.
          iframeContents.postMessage("Here is your port", "/", [m.port2]); 
      } else {

      //  MessageChannels aren't supported
      document.getElementById("maindisplay").innerText = "MessageChannels aren't supported";
      } 
    }
    </script>
</body>
</html>

This example is the "iframe.html", which creates the worker thread. The code in the iframe also uses an onmessage event that watches for a ""Here is your port"" message signaling that the main window has created the MessageChannel and MessagePort objects. The onmessage event is part of the Internet Explorer cross-document messaging feature, and not specific to MessageChannel. When the event receives that message, it passes along the ports to its Web Worker. The e.ports argument is an array that contains the ports sent from "window.html".

iframe.html

HTML
Copy 

<!DOCTYPE html>
<html>
<head>    
    <title>MessageChannel demo - Iframe</title>
</head>
<body>
    <h1>This is the Iframe</h1>
    <h2>I'll create a worker</h2>   
    <div id="display"></div> 
    <script type="text/javascript">
          //  Check for support
        if (window.Worker) {
            // Start a worker
            var worker = new Worker("worker.js");

            // Listen for messages from the parent
            onmessage = function (e) {
                // Messages here come from other windows
                if (e.data == "Here is your port") {
                    // Pass along the provided port array to the worker
                    worker.postMessage("for you", e.ports);
                }
            }

        } else {
            document.getElementById("display").innerText = "Workers aren't supported";
        }

    </script>
</body>
</html>

The last piece is the "worker.js" file, which registers an onmessage event handler. The onmessage event watches for a specific message (with a MessagePort to use) from the worker object. When the correct message is recognized, the received MessagePort is used to post a message directly back to the main window, bypassing the iframe.

worker.js

HTML
Copy 

var toWindow = null;  
onmessage = function (e) {

    // These messages comes from the worker proxy, act on matching message
    if (e.data == "for you") {
        toWindow = e.ports[0]; // Expect only one port to be sent
        // Tell the window that message was received
        toWindow.postMessage("This is the Web Worker talking directly to the parent window through a port");
    }
}

See also

Worker
Web worker demo

 

 

Show: