HTML5 Web Messaging

HTML5 Web Messaging: The communication problem that occurred by events can be solved by Web Messaging. The following concepts are discussed below in detail.

• Web messaging
• Channel messaging

HTML5 Web Messaging

Web Messaging is mainly used to share the data by separating the browser context without the use of DOM and overcomes the problems in cross-domain communication in different domains, protocols or ports.
Rather than sending the data from the user’s page, you can just add content that is present in a frame or vice versa where the browser sends a security alert instead of a message event.

HTML5 Web Messaging Events

The web messaging events are used in action for cross-document messaging, channel messaging,server-sent events, web sockets.

ATTRIBUTES	DESCRIPTION
data	Used to store the string data.
origin	Used to store the domain name and port.
source	Used to store an originating document window.
ports	Used to store the is sent by any message port.
lastEventId	Used to store the unique identifier of the current message event.

Description

To send a cross-document message create a web browser using a new window or frame than by using the postMessage() method can send data and also contains 2 arguments.

• Message-to send message
• target origin- to show the targeted Origin name.

HTML5 Web Messaging Example

Here we are using iframe button to send message var

iframe = document.querySelector('iframe');
var button = document.querySelector('button');var clickHandler = function(){
iframe.contentWindow.postMessage('The message to send.','https://tutorials.freshersnow.com');
}
button.addEventListener('click',clickHandler,false);
To receive cross document message in the receiving document.
var messageEventHandler = function(event){
// check that the origin is one we want.
if(event.origin == 'https://tutorials.freshersnow.com'){
alert(event.data);
}
}
window.addEventListener('message', messageEventHandler,false);

HTML5 Channel Messaging

Channel Messaging is used for browsing context which is the two-way communication commonly used for multiple origins. If you want to create the message and it will internally create two individual ports that are used for sending and forwarding to another browser context as mentioned below.

• postMessage()- used to post the message using a channel.
• start()-used to sends data.
• close()-use to close ports.

The following code is used to send data between the iframes. In this program, the user invoked the data function and passed it to DOM.

HTML5 Channel Messaging Example

var loadHandler = function(){
var mc, portMessageHandler;
mc = new MessageChannel();
window.parent.postMessage('documentAHasLoaded','http://foo.example',[mc.port2]);
portMessageHandler = function(portMsgEvent){
alert( portMsgEvent.data );
}
mc.port1.addEventListener('message', portMessageHandler, false);
mc.port1.start();
}
window.addEventListener('DOMContentLoaded', loadHandler, false);

Example to pass the data from port 2 to iframe

The below code is used to describe the data from port2 and passed to iframe.

var loadHandler = function(){
var iframes, messageHandler;iframes = window.frames;
messageHandler = function(messageEvent){
if( messageEvent.ports.length > 0 ){
// transfer the port to iframe[1]
iframes[1].postMessage('portopen','http://foo.example',messageEvent.ports);
}
}
window.addEventListener('message',messageHandler,false);
}
window.addEventListener('DOMContentLoaded',loadHandler,false);
The following code is used to define portMessageHandler function used by second document.
var loadHandler(){
// Define our message handler function
var messageHandler = function(messageEvent){// Our form submission handler
var formHandler = function(){
var msg = 'add <foo@example.com> to game circle.';
messageEvent.ports[0].postMessage(msg);
}
document.forms[0].addEventListener('submit',formHandler,false);
}
window.addEventListener('message',messageHandler,false);
}
window.addEventListener('DOMContentLoaded',loadHandler,false);

NOTE:

1. With the help of Web Messaging data can be shared without the DOM
2. Using Channel Messaging two way communication is possible.
3. To send the document user needs to create an iframe.