आइफ्रेम और मुख्य विंडो के बीच संचार के लिए प्रोटोकॉल

समय-समय पर, डेवलपर्स को एक टैब से दूसरे में संदेश भेजने और प्रतिक्रियाएं प्राप्त करने में सक्षम होने के लिए कई ब्राउज़र टैब के बीच संचार स्थापित करने की आवश्यकता होती है। हमने कुछ बिंदु पर इस आवश्यकता का भी सामना किया है।

कुछ समाधान पहले से मौजूद हैं (उदाहरण के लिए, ब्रॉडकास्टनेल एपीआई)। हालाँकि, इसका ब्राउज़र समर्थन वांछित होने के लिए बहुत कुछ छोड़ देता है , इसलिए हमने अपनी लाइब्रेरी का उपयोग करने का निर्णय लिया। जब पुस्तकालय तैयार था, तो उस कार्यक्षमता की आवश्यकता नहीं थी। फिर भी, एक और कार्य उभरा: एक आइफ्रेम और मुख्य विंडो के बीच संचार।

बारीकी से जांच करने पर, यह पता चला कि दो-तिहाई लाइब्रेरी को बदलना नहीं होगा - केवल कुछ कोड रीफैक्टरिंग आवश्यक था। पुस्तकालय एक संचार PROTOCOL है जो पाठ डेटा के साथ काम कर सकता है। यह उन सभी मामलों में लागू किया जा सकता है जिनमें पाठ स्थानांतरित किया जाता है, जैसे कि iframes, window.open, कार्यकर्ता, ब्राउज़र टैब या वेबबोर्ड।

यह कैसे काम करता है

वर्तमान में, प्रोटोकॉल के दो कार्य हैं: घटनाओं को संदेश और सदस्यता भेजना। प्रोटोकॉल में कोई भी संदेश एक डेटा ऑब्जेक्ट है। हमारे लिए, उस वस्तु का मुख्य क्षेत्र प्रकार है , जो हमें बताता है कि यह किस प्रकार का संदेश है। निम्न मानों के साथ प्रकार फ़ील्ड एक एनम है :

• 0 - संदेश भेजना
• 1 - एक अनुरोध भेज रहा है
• 2 - प्रतिक्रिया प्राप्त करना।

संदेश भेजना

संदेश भेजना प्रतिक्रिया का अर्थ नहीं है। संदेश भेजने के लिए, हम निम्नलिखित फ़ील्ड के साथ एक ऑब्जेक्ट बनाते हैं:

• प्रकार - घटना प्रकार ०
• नाम - उपयोगकर्ता घटना का नाम
• डेटा - उपयोगकर्ता डेटा (JSON-like)।

प्रकार फ़ील्ड 0 के साथ दूसरी तरफ एक संदेश प्राप्त करने पर, हम जानते हैं कि यह एक घटना है, जिसमें एक मौजूदा घटना नाम और डेटा है। हमें बस इतना करना है कि घटना को प्रसारित किया जाए (लगभग एक मानक EventEmitter पैटर्न)।

यह एक साधारण स्कीमा में कैसे काम करता है:

निवेदन भेजना

अनुरोध भेजने का तात्पर्य है कि पुस्तकालय के भीतर, एक अनुरोध आईडी बनाई जाती है और पुस्तकालय आईडी के साथ प्रतिक्रिया की प्रतीक्षा करेगा। सफलतापूर्वक प्रतिक्रिया प्राप्त करने पर, सभी सहायक फ़ील्ड इसे से हटा दिए जाएंगे, और प्रतिक्रिया उपयोगकर्ता को वापस कर दी जाएगी। साथ ही, अधिकतम प्रतिक्रिया समय निर्धारित किया जा सकता है।

अनुरोधों के लिए, यह थोड़ा अधिक जटिल है। किसी अनुरोध का जवाब देने के लिए, आपको उन तरीकों की घोषणा करने की आवश्यकता है जो हमारे प्रोटोकॉल में उपलब्ध हैं। यह registerRequestHandler विधि से किया जाता है। यह एक प्रतिक्रिया के लिए एक अनुरोध के नाम को स्वीकार करता है और एक फ़ंक्शन जो प्रतिक्रिया देता है। अनुरोध बनाने के लिए, हमें एक आईडी की आवश्यकता होती है, और हम मूल रूप से टाइमस्टैम्प का उपयोग कर सकते हैं, लेकिन यह समायोजित करने के लिए बहुत सुविधाजनक नहीं है। तो, यह एक क्लास आईडी है जो एक प्रतिक्रिया + प्रतिक्रिया संख्या + स्ट्रिंग शाब्दिक भेजता है। अब हम निम्नलिखित क्षेत्रों के साथ एक ऑब्जेक्ट बनाते हैं: आईडी , टाइप = 1 , नाम के रूप में नाम और उपयोगकर्ता डेटा के रूप में डेटा (JSON-like)।

अनुरोध प्राप्त करने पर, हम जांचते हैं कि क्या हमारे पास इस अनुरोध का जवाब देने के लिए एपीआई है, और यदि हम नहीं करते हैं, तो हम एक त्रुटि संदेश देते हैं। यदि हमारे पास एक एपीआई है, तो हम संबंधित अनुरोध नाम के साथ, रजिस्टर RequestHandler से फ़ंक्शन निष्पादित करने का परिणाम वापस करते हैं।

प्रतिक्रिया के लिए, हम फ़ील्ड के साथ एक ऑब्जेक्ट बनाते हैं: टाइप करें = 2, आईडी को उस संदेश की आईडी के रूप में जिसकी हम प्रतिक्रिया करते हैं, एक फ़ील्ड के रूप में स्थिति जो कहती है कि यदि यह प्रतिक्रिया एक त्रुटि है (यदि हमारे पास एपीआई नहीं है, तो) या हैंडलर ने एक त्रुटि की, या उपयोगकर्ता ने एक अस्वीकृत वादा वापस कर दिया, या एक और त्रुटि उत्पन्न होती है (क्रमबद्ध), और प्रतिक्रिया डेटा के रूप में सामग्री ।

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

• सेंड एक ऐसा तरीका है जो मूल रूप से संदेश भेजने के लिए जिम्मेदार है
• addListener घटनाओं की सदस्यता के लिए एक विधि है
• नष्ट बस को हटाने के समय सदस्यता हटाने के लिए एक विधि है।

एडेप्टर। प्रोटोकॉल का निष्पादन

प्रोटोकॉल लॉन्च करने के लिए, वर्तमान में, केवल iframe / विंडो के साथ काम करने के लिए एडाप्टर तैयार है। यह PostMessage और addEventListener का उपयोग करता है। यह बहुत सरल है: आपको एक संदेश को एक सही मूल के साथ पोस्टमासेज में भेजने और "संदेश" घटना पर addEventListener पर संदेशों को सुनने की आवश्यकता है।

हमने कुछ बारीकियों का सामना किया:

• आपको हमेशा अपनी विंडो पर प्रतिक्रियाओं को सुनना चाहिए और उन्हें अन्य विंडो (iframe, opener, parent, worker, आदि) पर भेजना चाहिए। यदि आप अन्य विंडो पर एक संदेश सुनने की कोशिश करते हैं और मूल वर्तमान से भिन्न होता है, तो एक त्रुटि होगी।
• एक संदेश प्राप्त करने पर, सुनिश्चित करें कि यह आपके लिए निर्देशित किया गया था: विंडो कई एनालिटिक्स संदेशों, वेबस्टॉर्म (यदि आप इसका उपयोग करते हैं) और अन्य iframes को समायोजित कर सकते हैं, इसलिए आपको यह सुनिश्चित करने की आवश्यकता है कि घटना आपके प्रोटोकॉल में है और आपके लिए इरादा है।
• आप विंडो प्रति के साथ एक वादा वापस नहीं कर सकते, क्योंकि परिणाम वापस करते समय वादा करते हैं, यह जांचने की कोशिश करेंगे कि क्या परिणाम की विधि है। यदि आपके पास विंडो तक पहुँच नहीं है (उदाहरण के लिए, किसी अन्य मूल के साथ एक विंडो), तो एक त्रुटि होगी (हालांकि सभी ब्राउज़रों में नहीं)। इस समस्या से बचने के लिए, ऑब्जेक्ट में विंडो को लपेटना और उस ऑब्जेक्ट को वादे में रखना पर्याप्त होगा जिसमें सही विंडो का लिंक हो।

उपयोग के उदाहरण:

लाइब्रेरी एनपीएम में उपलब्ध है और आप इसे आसानी से अपने पैकेज मैनेजर - @ वेव्स / वेव्स-ब्राउज़र-बस के माध्यम से स्थापित कर सकते हैं

एक iframe के साथ दो-तरफ़ा संचार स्थापित करने के लिए, यह इस कोड का उपयोग करने के लिए पर्याप्त है:

import { Bus, WindowAdapter } from '@waves/waves-browser-bus'; const url = 'https://some-iframe-content-url.com'; const iframe = document.createElement('iframe'); WindowAdapter.createSimpleWindowAdapter(iframe).then(adapter => { const bus = new Bus(adapter); bus.once('ready', () => { // A message from iframe received }); }); iframe.src = url; // It's preferable to assign a url after calling WindowAdapter.createSimpleWindowAdapter document.body.appendChild(iframe); 

अंदर iframe:

 import { Bus, WindowAdapter } from '@waves/waves-browser-bus'; WindowAdapter.createSimpleWindowAdapter().then(adapter => { const bus = new Bus(adapter); bus.dispatchEvent('ready', null); // A message has been sent to the parent window }); 

आगे क्या है?

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