HTML5 - Messaggistica web

La messaggistica Web è la capacità di inviare messaggi in tempo reale dal server al browser del client. Ignora il problema di comunicazione tra domini in diversi domini, protocolli o porte

Ad esempio, se desideri inviare i dati dalla tua pagina a un contenitore di annunci che si trova in iframe o voice-versa, in questo scenario, il browser genera un'eccezione di sicurezza. Con la messaggistica web possiamo trasmettere i dati come un evento di messaggio.

Evento messaggio

Gli eventi dei messaggi vengono attivati ​​Messaggistica tra documenti, messaggistica di canale, eventi inviati dal server e web sockets.it ha descritto dall'interfaccia Message Event.

Attributi

Sr.No.	Attributi e descrizione
1	data Contiene dati di stringa
2	origin Contiene il nome di dominio e la porta
3	lastEventId Contiene un identificatore univoco per l'evento del messaggio corrente.
4	source Contiene un riferimento alla finestra del documento di origine
5	ports Contiene i dati inviati da qualsiasi porta di messaggi

Invio di un messaggio di documenti incrociati

Prima di inviare un messaggio di documenti incrociati, dobbiamo creare un nuovo contesto di navigazione web creando un nuovo iframe o una nuova finestra. Possiamo inviare i dati usando postMessage () e ha due argomenti. Sono come ...

• message - Il messaggio da inviare
• targetOrigin - Nome di origine

Esempi

Invio messaggio da iframe a pulsante

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

Ricezione di un messaggio di documenti incrociati nel documento ricevente

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

Messaggi di canale

La comunicazione bidirezionale tra i contesti di navigazione è chiamata messaggistica di canale. È utile per la comunicazione tra più origini.

Gli oggetti MessageChannel e MessagePort

Durante la creazione di messageChannel, crea internamente due porte per inviare i dati e inoltrarli a un altro contesto di navigazione.

• postMessage() - Pubblica il canale di lancio del messaggio

• start() - Invia i dati

• close() - Chiude le porte

In questo scenario, inviamo i dati da un iframe a un altro iframe. Qui stiamo invocando i dati in funzione e passando i dati a 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);

Sopra il codice, sta prendendo i dati dalla porta 2, ora passerà i dati al secondo 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);

Ora il secondo documento gestisce i dati utilizzando la funzione 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);