HTML5 - Perpesanan web

Perpesanan web adalah kemampuan untuk mengirim pesan waktu nyata dari server ke browser klien. Ini mengesampingkan masalah komunikasi lintas domain di domain, protokol, atau port yang berbeda

Misalnya, Anda ingin mengirim data dari halaman Anda ke penampung iklan yang ditempatkan di iframe atau voice-versa, dalam skenario ini, Browser memberikan pengecualian keamanan. Dengan perpesanan web, kami dapat mengirimkan data sebagai acara pesan.

Pesan Acara

Peristiwa pesan diaktifkan Perpesanan lintas dokumen, perpesanan saluran, peristiwa yang dikirim server, dan soket web. Ini dijelaskan oleh antarmuka Peristiwa Pesan.

Atribut

Sr.No.	Atribut & Deskripsi
1	data Berisi data string
2	origin Berisi nama domain dan port
3	lastEventId Berisi pengenal unik untuk acara pesan saat ini.
4	source Berisi referensi ke jendela dokumen asal
5	ports Berisi data yang dikirim oleh port pesan apa pun

Mengirim pesan lintas dokumen

Sebelum mengirim pesan lintas dokumen, kita perlu membuat konteks penjelajahan web baru baik dengan membuat iframe baru atau jendela baru. Kita bisa mengirim data menggunakan dengan postMessage () dan itu memiliki dua argumen. Mereka adalah sebagai -

• message - Pesan yang akan dikirim
• targetOrigin - Nama asal

Contoh

Mengirim pesan dari iframe ke tombol

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

Menerima pesan lintas dokumen di dokumen penerima

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

Pesan saluran

Komunikasi dua arah antara konteks penelusuran disebut pesan saluran. Ini berguna untuk komunikasi lintas berbagai sumber.

Objek MessageChannel dan MessagePort

Saat membuat messageChannel, secara internal membuat dua port untuk mengirim data dan diteruskan ke konteks penelusuran lain.

• postMessage() - Posting saluran lempar pesan

• start() - Ini mengirimkan data

• close() - Ini menutup port

Dalam skenario ini, kami mengirim data dari satu iframe ke iframe lain. Di sini kita memanggil data dalam fungsi dan meneruskan data ke 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);

Kode di atas, mengambil data dari port 2, sekarang akan meneruskan data ke iframe kedua

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

Sekarang dokumen kedua menangani data dengan menggunakan fungsi 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);