HTML5 - การส่งข้อความทางเว็บ

การส่งข้อความทางเว็บคือความสามารถในการส่งข้อความเรียลไทม์จากเซิร์ฟเวอร์ไปยังเบราว์เซอร์ไคลเอนต์ จะลบล้างปัญหาการสื่อสารข้ามโดเมนในโดเมนโปรโตคอลหรือพอร์ตต่างๆ

ตัวอย่างเช่นคุณต้องการส่งข้อมูลจากเพจของคุณไปยังคอนเทนเนอร์โฆษณาซึ่งวางไว้ที่ iframe หรือในทางกลับกันในกรณีนี้เบราว์เซอร์จะแสดงข้อยกเว้นด้านความปลอดภัย ด้วยการส่งข้อความทางเว็บเราสามารถส่งผ่านข้อมูลเป็นเหตุการณ์ข้อความได้

เหตุการณ์ข้อความ

เหตุการณ์ข้อความทำให้การส่งข้อความข้ามเอกสารการส่งข้อความแชนเนลเหตุการณ์ที่เซิร์ฟเวอร์ส่งและเว็บซ็อกเก็ตได้อธิบายไว้โดยอินเทอร์เฟซ Message Event

คุณลักษณะ

ซีเนียร์	คุณสมบัติและคำอธิบาย
1	data มีข้อมูลสตริง
2	origin มีชื่อโดเมนและพอร์ต
3	lastEventId มีตัวระบุเฉพาะสำหรับเหตุการณ์ข้อความปัจจุบัน
4	source ประกอบด้วยการอ้างอิงถึงหน้าต่างของเอกสารต้นทาง
5	ports มีข้อมูลที่ส่งโดยพอร์ตข้อความใด ๆ

การส่งข้อความข้ามเอกสาร

ก่อนที่จะส่งข้อความข้ามเอกสารเราต้องสร้างบริบทการท่องเว็บใหม่โดยการสร้าง iframe ใหม่หรือหน้าต่างใหม่ เราสามารถส่งข้อมูลโดยใช้กับ postMessage () และมีสองอาร์กิวเมนต์ พวกเขาเป็น -

• message - ข้อความที่จะส่ง
• targetOrigin - ชื่อแหล่งกำเนิด

ตัวอย่าง

การส่งข้อความจาก iframe ไปยังปุ่ม

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

การรับข้อความข้ามเอกสารในเอกสารการรับ

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

การส่งข้อความช่อง

การสื่อสารสองทางระหว่างบริบทการสืบค้นเรียกว่าการส่งข้อความช่อง มันมีประโยชน์สำหรับการสื่อสารข้ามแหล่งกำเนิดต่างๆ

วัตถุ MessageChannel และ MessagePort

ในขณะที่สร้าง messageChannel ภายในจะสร้างสองพอร์ตเพื่อส่งข้อมูลและส่งต่อไปยังบริบทการสืบค้นอื่น

• postMessage() - โพสต์ช่องโยนข้อความ

• start() - มันส่งข้อมูล

• close() - มันปิดพอร์ต

ในสถานการณ์นี้เรากำลังส่งข้อมูลจาก iframe หนึ่งไปยัง iframe อื่น ที่นี่เรากำลังเรียกใช้ข้อมูลในฟังก์ชันและส่งข้อมูลไปยัง 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);

โค้ดด้านบนกำลังรับข้อมูลจากพอร์ต 2 ตอนนี้จะส่งข้อมูลไปยัง 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);

ตอนนี้เอกสารที่สองจัดการข้อมูลโดยใช้ฟังก์ชัน 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);