HTML5 - mensagens da web

O sistema de mensagens da Web é a capacidade de enviar mensagens em tempo real do servidor para o navegador do cliente. Ele substitui o problema de comunicação entre domínios em diferentes domínios, protocolos ou portas

Por exemplo, você deseja enviar os dados de sua página para um recipiente de anúncio que é colocado em iframe ou voz-versa; neste cenário, o navegador lança uma exceção de segurança. Com as mensagens da web, podemos passar os dados como um evento de mensagem.

Evento de Mensagem

Os eventos de mensagem disparam mensagens entre documentos, mensagens de canal, eventos enviados pelo servidor e web sockets.it descritos na interface Message Event.

Atributos

Sr. Não.	Atributos e descrição
1	data Contém dados de string
2	origin Contém nome de domínio e porta
3	lastEventId Contém identificador exclusivo para o evento de mensagem atual.
4	source Contém uma referência à janela do documento de origem
5	ports Contém os dados que são enviados por qualquer porta de mensagem

Enviando uma mensagem entre documentos

Antes de enviar a mensagem entre documentos, precisamos criar um novo contexto de navegação na web criando um novo iframe ou uma nova janela. Podemos enviar os dados usando postMessage () e tem dois argumentos. Eles são como -

• message - A mensagem a enviar
• targetOrigin - Nome de origem

Exemplos

Enviando mensagem do iframe para o botão

var iframe = document.querySelector('iframe');
var button = document.querySelector('button');

var clickHandler = function() {
   iframe.contentWindow.postMessage('The message to send.',
      'https://www.tutorialspoint.com);
}
button.addEventListener('click',clickHandler,false);

Receber uma mensagem entre documentos no documento de recebimento

var messageEventHandler = function(event){
   
   // check that the origin is one we want.
   if(event.origin == 'https://www.tutorialspoint.com') {
      alert(event.data);
   }
}
window.addEventListener('message', messageEventHandler,false);

Canal de mensagens

A comunicação bidirecional entre os contextos de navegação é chamada de mensagem de canal. É útil para comunicação entre origens múltiplas.

Os objetos MessageChannel e MessagePort

Ao criar messageChannel, ele cria internamente duas portas para enviar os dados e encaminhá-los para outro contexto de navegação.

• postMessage() - Publique o canal de lançamento de mensagem

• start() - Envia os dados

• close() - Fecha as portas

Neste cenário, estamos enviando os dados de um iframe para outro iframe. Aqui, estamos invocando os dados em função e passando os dados para o DOM.

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);

O código acima está pegando os dados da porta 2, agora vai passar os dados para o segundo 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);

Agora, o segundo documento trata os dados usando a função portMsgHandler.

var loadHandler() {
   
   // Define our message handler function
   var messageHandler = function(messageEvent) {
   
      // Our form submission handler
      
      var formHandler = function() {
         var msg = 'add <[email protected]> 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);