HTML5 - Tin nhắn web

Nhắn tin web là khả năng gửi tin nhắn thời gian thực từ máy chủ đến trình duyệt máy khách. Nó ghi đè vấn đề giao tiếp miền chéo trong các miền, giao thức hoặc cổng khác nhau

Ví dụ: bạn muốn gửi dữ liệu từ trang của mình đến vùng chứa quảng cáo được đặt tại iframe hoặc ngược lại bằng giọng nói, trong trường hợp này, Trình duyệt đưa ra một ngoại lệ bảo mật. Với tin nhắn web, chúng ta có thể chuyển dữ liệu dưới dạng một sự kiện tin nhắn.

Sự kiện tin nhắn

Sự kiện tin nhắn kích hoạt Nhắn tin chéo tài liệu, tin nhắn kênh, sự kiện do máy chủ gửi và web sockets. Nó đã được mô tả bằng giao diện Sự kiện tin nhắn.

Thuộc tính

Sr.No.	Thuộc tính & Mô tả
1	data Chứa dữ liệu chuỗi
2	origin Chứa tên miền và cổng
3	lastEventId Chứa số nhận dạng duy nhất cho sự kiện tin nhắn hiện tại.
4	source Chứa một tham chiếu đến cửa sổ của tài liệu gốc
5	ports Chứa dữ liệu được gửi bởi bất kỳ cổng tin nhắn nào

Gửi tin nhắn liên tài liệu

Trước khi gửi tin nhắn tài liệu chéo, chúng ta cần tạo bối cảnh duyệt web mới bằng cách tạo iframe mới hoặc cửa sổ mới. Chúng ta có thể gửi dữ liệu bằng cách sử dụng postMessage () và nó có hai đối số. Họ là -

message - Tin nhắn cần gửi
targetOrigin - Tên xuất xứ

Ví dụ

Gửi tin nhắn từ iframe tới nút

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

Nhận thông báo tài liệu chéo trong tài liệu nhận

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

Nhắn tin kênh

Giao tiếp hai chiều giữa các bối cảnh duyệt được gọi là tin nhắn kênh. Nó hữu ích cho việc giao tiếp giữa nhiều nguồn gốc.

Đối tượng MessageChannel và MessagePort

Trong khi tạo messageChannel, nội bộ nó tạo ra hai cổng để gửi dữ liệu và chuyển tiếp đến một ngữ cảnh duyệt khác.

postMessage() - Đăng tin ném kênh
start() - Nó gửi dữ liệu
close() - Nó đóng các cổng

Trong trường hợp này, chúng tôi đang gửi dữ liệu từ iframe này sang iframe khác. Ở đây chúng tôi đang gọi dữ liệu trong hàm và chuyển dữ liệu đến 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ạn mã trên, nó đang lấy dữ liệu từ cổng 2, bây giờ nó sẽ chuyển dữ liệu sang iframe thứ hai

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

Bây giờ tài liệu thứ hai xử lý dữ liệu bằng cách sử dụng hàm 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);