Two way communication between the browsing contexts in HTML5

Two-way communication between browsing contexts in HTML5 is achieved through Channel Messaging API. This allows secure communication between different origins, iframes, web workers, and windows.

The MessageChannel creates two connected ports that can send messages to each other. When you create a MessageChannel, it internally generates two ports - one for sending data and another that gets forwarded to the target browsing context.

Key Methods

• postMessage() ? Posts the message through the channel
• start() ? Starts listening for messages on the port
• close() ? Closes the communication ports

Basic Syntax

// Create a new MessageChannel
const channel = new MessageChannel();

// port1 and port2 are the two ends of the channel
const port1 = channel.port1;
const port2 = channel.port2;

// Send port2 to another context
targetWindow.postMessage('init', '*', [port2]);

// Listen for messages on port1
port1.onmessage = function(event) {
    console.log('Received:', event.data);
};

port1.start();

Example: Communication Between Iframes

Here's how to set up two-way communication between parent window and iframe:

// Code for iframe (child context)
var loadHandler = function(){
    var mc, portMessageHandler;
    
    // Create new MessageChannel
    mc = new MessageChannel();
    
    // Send port2 to parent window
    window.parent.postMessage('documentAHasLoaded', 'http://foo.example', [mc.port2]);
    
    // Handle messages received on port1
    portMessageHandler = function(portMsgEvent){
        alert('Iframe received: ' + portMsgEvent.data);
    }
    
    // Listen for messages on port1
    mc.port1.addEventListener('message', portMessageHandler, false);
    mc.port1.start();
}

window.addEventListener('DOMContentLoaded', loadHandler, false);

// Code for parent window
window.addEventListener('message', function(event) {
    if (event.data === 'documentAHasLoaded') {
        // Get the port from the iframe
        const port = event.ports[0];
        
        // Send message to iframe through the port
        port.postMessage('Hello from parent!');
        
        // Listen for messages from iframe
        port.onmessage = function(e) {
            console.log('Parent received:', e.data);
        };
        
        port.start();
    }
}, false);

How Channel Messaging Works

Key Points

• Channel Messaging provides secure two-way communication between different origins
• Each MessageChannel has exactly two ports (port1 and port2)
• Ports must be explicitly started with start() method
• Messages are transferred, not copied, making it efficient for large data
• Ports can be transferred to other contexts using postMessage()

Browser Compatibility

Channel Messaging API is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. It's part of the HTML5 specification and provides a standardized way for cross-origin communication.

Conclusion

Channel Messaging API enables secure, efficient two-way communication between different browsing contexts. It's particularly useful for iframe communication and web worker messaging where traditional postMessage limitations need to be overcome.