👶 👍🏽 🥛 ब्राउज़र टैब को सिंक करने के तरीके 👨🏽‍🔬 👥 🕕

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

नीचे मैं ऐसी समस्याओं को हल करने के विभिन्न तरीकों का वर्णन करूंगा।

बढ़ती जटिलता के क्रम में ब्राउज़र टैब को सिंक्रनाइज़ करने के सबसे लोकप्रिय तरीकों पर विचार करें।

स्थानीय भंडारण

लोकलस्टोरेज - लोकल स्टोरेज, विंडो ऑब्जेक्ट की एक प्रॉपर्टी, आपको लोकल स्टोरेज ऑब्जेक्ट को एक्सेस करने की अनुमति देती है। यह उपयोगकर्ता सत्रों के बीच डेटा संग्रहीत कर सकता है। एक समान संपत्ति है - sessionStorage , लेकिन यह केवल पृष्ठ सत्र की अवधि के लिए डेटा संग्रहीत करता है।
डेटा को सेट इट विधि का उपयोग करके स्टोरेज में जोड़ा जाता है।

localStorage.setItem('key', 'value');

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

 window.addEventListener('storage', function(event) { console.log(event.key); });

ईवेंट टैब पर काम नहीं करता है, जो परिवर्तन करता है, लेकिन ब्राउज़र में डोमेन के शेष टैब पर फायर करता है।

भंडारण घटना पीढ़ी

स्थानीयस्टोरेज और सेशनस्टोर के लिए ब्राउज़रों के अलग-अलग स्टोरेज स्तर होते हैं:

क्रोम, फ़ायरफ़ॉक्स और ओपेरा ~ 5 एमबी।
IE ~ 4.8 MB
आईओएस सफारी, ओएस एक्स सफारी ~ 2.5 एमबी।
एंड्रॉइड ~ 5 एमबी।

कमियों के बीच, कोई भी ब्राउज़र स्टोरेज वॉल्यूम को नोट कर सकता है, और जब यह भरा होता है, तो एक नया ऑब्जेक्ट रिकॉर्ड नहीं किया जाएगा।
ओपेरा मिनी को छोड़कर सभी ब्राउज़रों में यह विधि काम करती है।

संदेश पोस्ट करें

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

 const win = window.frames.target; win.postMessage('send message', 'http://javascript.ru');

प्रेषित डेटा कोई भी ऑब्जेक्ट हो सकता है जो क्लोनिंग (स्ट्रिंग, ऑब्जेक्ट, एरे, मैप, डेट ...) का समर्थन करता है। लेकिन IE केवल स्ट्रिंग्स का समर्थन करता है।

यूआरएल इंगित करता है कि इस स्रोत से केवल खिड़कियां संदेश प्राप्त कर सकती हैं।
संदेश प्राप्त करने के लिए, विंडो को ऑनस्मेज ईवेंट की सदस्यता लेनी चाहिए।

 window.addEventListener('message', function(event) { if (event.origin != 'http://javascript.ru') { return; } console.log(event.data); });

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

IE में, पोस्टमैसेज इंटरफ़ेस केवल iframes के साथ काम करता है और टैब और विंडो के बीच काम नहीं करता है।

प्रसारण चैनल एपीआई

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

 const bc = new BroadcastChannel('test_channel');

पोस्टमैसेज विधि चैनल को एक संदेश पोस्ट करती है। तर्क एक प्रकार है जो क्लोनिंग का समर्थन करता है ।

 bc.postMessage('This is a test message.');

जब कोई संदेश प्रकाशित होता है, तो इस चैनल से जुड़ी प्रत्येक वस्तु को एक संदेश घटना भेजा जाएगा।

 bc.addEventListener('message', function (e) { console.log(e); })

विभिन्न संदर्भों के लिए एक चैनल को एक संदेश प्रकाशित करें।

एपीआई बहुत सरल है, यह एक साधारण संदेश बस के रूप में सोचा जा सकता है। लेकिन विधि में एक गंभीर खामी है: सफारी और आईई के लिए कोई समर्थन नहीं है।

पहली नज़र में, आप डेटा ट्रांसफर के कई समान तरीके (उदाहरण के लिए MessageChannel, WebSocket) पा सकते हैं, लेकिन उनमें से प्रत्येक एक विशिष्ट उद्देश्य - उनकी तुलना करता है ।

वेब कार्यकर्ता

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

उपयोगकर्ता इंटरफ़ेस को धीमा किए बिना भारी कंप्यूटिंग संचालन करने के लिए श्रमिक महान हैं ।
लेकिन सिंक्रनाइज़ेशन के साथ, केवल दो प्रकार के कार्यकर्ता मदद कर सकते हैं।

साझा कार्यकर्ता

यह एक विशेष प्रकार का कार्यकर्ता है जिसे कई ब्राउज़र संदर्भों से एक्सेस किया जा सकता है। आइए टैब के लिए एक साझा जेएस फाइल लिखते हैं, उदाहरण के लिए साझा कार्यकर्ता- js।

 const worker = new SharedWorker('shared-worker.js');

प्रत्येक टैब कार्यकर्ता के माध्यम से कार्यकर्ता के साथ संवाद कर सकता है। कार्यकर्ता की पटकथा भी अपने बंदरगाहों तक पहुँचती है। हर बार जब टैब कार्यकर्ता से जुड़ता है, तो कनेक्ट घटना स्क्रिप्ट में निकाल दी जाती है।

 // shared-worker.js const connections = []; onconnect = function(e) { const port = e.ports[0]; connections.push(port); };

एक साझा कार्यकर्ता को टैब डेटा भेजने के लिए पोस्टमैसेज पद्धति बनाई गई थी।

 worker.port.postMessage('test message');

आप संदेश घटना का उपयोग कर कार्यकर्ता डेटा को पुनः प्राप्त कर सकते हैं।

 worker.port.onmessage = function (e) { console.log(e.data); };

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

केवल क्रोम और एफएफ में काम करता है।

सेवा कर्मी

यह एक इवेंट-संचालित कार्यकर्ता है जो नेटवर्क अनुरोधों की निगरानी, अवरोधन और संशोधन कर सकता है और उन्हें कैश कर सकता है।
श्रमिक पंजीकरण:

 if ('serviceWorker' in navigator) { navigator.serviceWorker.register('service-worker.js') .then(function() { return navigator.serviceWorker.ready; }) .catch(function(error) { console.error('registration error : ', error); }); }

संदेश घटना का उपयोग करते हुए, टैब कार्यकर्ता जेएस फ़ाइल से डेटा प्राप्त कर सकते हैं, और सिंकटैबस्टेट फ़ंक्शन का उपयोग संदेश को संसाधित करने के लिए किया जाता है।

 self.addEventListener('message', function(e){ const data = e.data; const tabId = e.source.id self.syncTabState(data, tabId); });

SendTabState फ़ंक्शन को संदेशों को टैब पर भेजने के लिए डिज़ाइन किया गया है।

 self.sendTabState = function(client, data){ client.postMessage(data); }

विस्तृत उपयोग और कई उदाहरण यहाँ ।

सभी वेब कर्मचारियों के पास विंडो और दस्तावेज़ ऑब्जेक्ट तक पहुंच नहीं है।

सेवा कर्मचारी IE और ओपेरा मिनी में काम नहीं करता है।

सिंक्रनाइज़ेशन लाइब्रेरीज़

यह उन लोगों के लिए एक रास्ता है जो बाइक नहीं चाहते हैं और मौजूदा समाधानों पर विचार करने के लिए तैयार हैं।

टैब-राउटर , कुकी और स्थानीय भंडारण का उपयोग करता है;
हेमीज़ , साझाडॉर्कर का उपयोग करता है;
दृश्यता , पृष्ठ दृश्यता API का उपयोग करता है ;
द्वंद्व , लोकल स्टोरेज और वेबसॉकेट का उपयोग करता है;
__SE__ , वर्कर और लोकलस्टोरेज का उपयोग करता है;

उनका नुकसान यह है कि पुस्तकालय ज्यादातर सार्वभौमिक होते हैं, इसलिए वे हमेशा संकीर्ण समाधानों के लिए उपयुक्त नहीं होते हैं।

परिणाम

संक्षेप में, आइए ब्राउज़र समर्थन के तरीकों की तुलना नेत्रहीन करें।

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

साझा राज्य ताले और साझा फ़ाइलों के प्रबंधन के लिए साझा कार्यकर्ता और सेवा कार्यकर्ता सबसे उपयुक्त समाधान हैं।

और वेब प्लेयर के साथ कार्य के लिए, लोकलस्टोरेज को चुना गया था, क्योंकि IE के लिए समर्थन है।
मुझे उम्मीद है कि इस लेख ने आपको सही सिंक्रनाइज़ेशन विधि चुनने में मदद की है।

मैं पोस्टर टीम को उनकी मदद और समर्थन के लिए धन्यवाद देता हूं!

प्रयुक्त लेख:

ब्राउज़र टैब को सिंक करने के तरीके