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

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

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

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

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

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

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

संदेश भेजना

संदेश भेजना प्रतिक्रिया का अर्थ नहीं है। एक घटना भेजने के लिए, हम खेतों के साथ एक वस्तु का निर्माण करते हैं:

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

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

घटनाओं के साथ काम करने की योजना:

प्रस्तुत करने का अनुरोध

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

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

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

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

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

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

एडेप्टर। प्रोटोकॉल कार्यान्वयन।

यह सब शुरू करने के लिए, केवल iframe / विंडो के साथ काम करने के लिए एडेप्टर तैयार है। यह पोस्टमेसेज और एडवेंटलिस्टनर पर काम करता है। यहां सब कुछ काफी सरल है: आपको सही मूल के साथ पोस्टमैसेज को एक संदेश भेजने और इवेंट "संदेश" पर addEventListener के माध्यम से संदेश सुनने की आवश्यकता है।

छोटी सूक्ष्मताएँ जिनका हमने सामना किया:

• आपको हमेशा अपनी खिड़की पर उत्तर सुनना चाहिए, और उन्हें किसी और को भेजना चाहिए (iframe, opener, माता-पिता, कार्यकर्ता, ...)।
  तथ्य यह है कि जब आप किसी और की खिड़की पर एक संदेश सुनने की कोशिश करते हैं, यदि मूल वर्तमान से अलग होता है, तो एक त्रुटि होगी।
• जब आप एक संदेश प्राप्त करते हैं, तो सुनिश्चित करें कि यह आपके लिए भेजा गया है (खिड़की पर विश्लेषिकी से संदेशों का एक गुच्छा शुरू हो रहा है)
  WebStrom (यदि आप इसका उपयोग करते हैं), विदेशी 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', () => { //    iframe }); }); iframe.src = url; //   url   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); //      }); 

आगे क्या है?

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

यदि आप पुस्तकालय की कार्यक्षमता पर विकास या विचारों से जुड़ने की इच्छा रखते हैं - तो आपका स्वागत है ।