HTML5 - वेब संदेश

वेब मैसेजिंग सर्वर से क्लाइंट ब्राउजर तक रियलटाइम संदेश भेजने की क्षमता है। यह विभिन्न डोमेन, प्रोटोकॉल या पोर्ट में क्रॉस डोमेन संचार समस्या को ओवरराइड करता है

उदाहरण के लिए, आप अपने पेज से डेटा को कंटेनर में भेजना चाहते हैं, जिसे iframe या आवाज-वर्सा में रखा गया है, इस परिदृश्य में, ब्राउज़र सुरक्षा अपवाद को फेंकता है। वेब संदेश के साथ हम संदेश घटना के रूप में डेटा को पार कर सकते हैं।

संदेश घटना

संदेश ईवेंट्स क्रॉस-डॉक्यूमेंट मैसेजिंग, चैनल मैसेजिंग, सर्वर-सेंड इवेंट्स और वेब सॉकेट्स हैं। इसने मैसेज इवेंट इंटरफेस द्वारा वर्णित किया है।

गुण

अनु क्रमांक।	विशेषताएँ और विवरण
1	data स्ट्रिंग डेटा शामिल है
2	origin डोमेन नाम और पोर्ट समाहित करता है
3	lastEventId वर्तमान संदेश घटना के लिए अद्वितीय पहचानकर्ता शामिल है।
4	source मूल दस्तावेज़ की विंडो में A संदर्भ शामिल है
5	ports इसमें वह डेटा है जो किसी भी संदेश पोर्ट द्वारा भेजा गया है

एक क्रॉस-दस्तावेज़ संदेश भेजना

क्रॉस डॉक्यूमेंट मैसेज भेजने से पहले, हमें नए iframe या नई विंडो बनाकर एक नया वेब ब्राउज़िंग संदर्भ बनाने की आवश्यकता है। हम पोस्टमासेज () का उपयोग करके डेटा भेज सकते हैं और इसके दो तर्क हैं। वे इस प्रकार हैं -

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