آموزش HTML - پیام‌رسانی وب

پیام‌رسانی وب (Web Messaging) روشی برای سندها در محیط‌های مرور مختلف (browsing contexts) است تا بتوانند بدون نیاز به DOM داده‌ها را با یکدیگر به اشتراک بگذارند. این ویژگی مشکل ارتباط بین دامنه‌ای (cross domain) را در دامنه‌ها، پروتکل‌ها یا پورت‌های متفاوت برطرف می‌کند.

به عنوان مثال، اگر بخواهیم داده‌ها را از صفحه خود به یک کانتینر تبلیغاتی که داخل iframe قرار دارد ارسال کنیم یا برعکس، در این وضعیت مرورگر یک خطای امنیتی (security exception) صادر می‌کند. با پیام‌رسانی وب می‌توانیم داده‌ها را به عنوان یک رویداد پیام (message event) منتقل کنیم.

رویداد پیام (Message Event)

رویدادهای پیام در پیام‌رسانی بین اسنادی (Cross-document messaging)، پیام‌رسانی کانالی (channel messaging)، رویدادهای ارسالی از سرور (server-sent events) و وب‌سوکت‌ها (web sockets) اجرا می‌شوند. این رویداد توسط رابط Message Event توصیف می‌شود.

ویژگی‌های Message Event

جدول زیر شامل فهرستی از ویژگی‌های Message Event است −

ارسال پیام بین اسنادی

قبل از ارسال پیام بین اسنادی، باید با ایجاد یک iframe جدید یا یک پنجره جدید، یک محیط مرور وب جدید ایجاد کنیم. ما می‌توانیم داده‌ها را با استفاده از postMessage() ارسال کنیم که دارای دو آرگومان است. آن‌ها عبارت‌اند از:

• message − پیامی که باید ارسال شود

• targetOrigin − نام مبدا (Origin)

مثال‌ها

ارسال پیام از 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);

پیام‌رسانی کانالی (Channel messaging)

ارتباط دوطرفه بین محیط‌های مرور، پیام‌رسانی کانالی نامیده می‌شود. این ویژگی برای ارتباط در چند مبدا مختلف مفید است.

اشیای 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 <foo@example.com> 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);