वेब वर्कर्स जावास्क्रिप्ट एपीआई का एक परिचय

वेब वर्कर्स एक जावास्क्रिप्ट एपीआई है जो आपको अनुमति देता है स्क्रिप्ट को मुख्य एक से अलग थ्रेड में चलाएँ. यह तब काम आ सकता है जब आप पृष्ठभूमि-एस्क स्क्रिप्ट के कारण मुख्य स्क्रिप्ट के निष्पादन में कोई बाधा नहीं चाहते हैं.

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

बक्सों का इस्तेमाल करें

मान लीजिए कि एक स्क्रिप्ट है जो एक फ़ाइल को लाता है और संसाधित करता है. यदि कोई फ़ाइल है काफी बड़े इसे संसाधित होने में लंबा समय लगेगा! जो अन्य स्क्रिप्टों को रोक सकता है जिन्हें बाद में निष्पादित होने से पहले लागू किया गया था.

हालाँकि, यदि फ़ाइल प्रसंस्करण को पृष्ठभूमि थ्रेड में ले जाया जाता है, के रूप में जाना कार्यकर्ता धागा, अन्य घटनाओं को तब तक अवरुद्ध नहीं किया जाएगा जब तक कि पूर्व खत्म न हो जाए.

लिपी एक पृष्ठभूमि कार्यकर्ता धागे में निष्पादित के रूप में जाना जाता है कार्यकर्ता स्क्रिप्ट या सिर्फ द मज़दूर.

एक अन्य उदाहरण के लिए, कल्पना कीजिए कि ए बड़े रूप, टैब में व्यवस्थित. यह एक तरह से स्क्रिप्टेड है जो एक टैब में नियंत्रण को अद्यतन करता है दूसरों में कुछ नियंत्रणों को प्रभावित करता है.

यदि अन्य टैब का अपडेट उपयोगकर्ता को कुछ समय लगता है वर्तमान टैब का लगातार उपयोग नहीं कर सकते बिना इसकी घटनाओं को ताक पर रखकर। यह यूजर्स को फ्रीज करने के लिए यूआई को फ्रीज कर सकता है.

चूंकि एक उपयोगकर्ता एक करंट भरने के दौरान दूसरे टैब को नहीं देख रहा होगा, आप कर सकते हैं पृष्ठभूमि थ्रेड में अन्य टैब के नियंत्रण को अद्यतन करें. इस तरह, उपयोगकर्ता उस टैब का उपयोग करना जारी रख सकता है, जिसे वह भर रहा है, बिना उसकी कोई स्क्रिप्ट अन्य टैब में नियंत्रण की अद्यतन प्रक्रिया द्वारा अवरुद्ध हो रही है.

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

स्कोप और श्रमिकों के प्रकार

वेब वर्कर्स एपीआई संभवतः काम करने वाले सबसे सरल एपीआई में से एक है। यह करने के लिए बहुत सरल तरीके हैं कार्यकर्ता सूत्र बनाएँ तथा मुख्य स्क्रिप्ट से उनके साथ संवाद करें.

वर्कर थ्रेड का वैश्विक दायरा मुख्य थ्रेड से अलग संदर्भ में है। आप के तरीकों और गुणों तक नहीं पहुँच सकते खिड़की वस्तु जैसे कि चेतावनी () एक श्रमिक सूत्र के अंदर। तुम भी DOM को सीधे नहीं बदल सकते एक कार्यकर्ता सूत्र से.

हालाँकि, आप कर सकते हैं के तहत आने वाले कई एपीआई का उपयोग करें खिड़की, उदाहरण के लिए पक्का वादा तथा लाना, अपने कार्यकर्ता सूत्र में (पूरी सूची देखें).

आप भी कर सकते हैं नेस्टेड वर्कर थ्रेड्स: श्रमिक सूत्र दूसरे श्रमिक धागे से निर्मित। किसी अन्य द्वारा बनाए गए कार्यकर्ता को कहा जाता है subworker.

वे भी हैं अनेक प्रकार श्रमिकों की. दो मुख्य हैं समर्पित और साझा कार्यकर्ता.

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

इस ट्यूटोरियल में उदाहरण होगा समर्पित कार्यकर्ता के बारे में, जो सबसे आम प्रकार है.

एपीआई तरीके

नीचे दिए गए आरेख को देखें a सभी मुख्य विधियों का त्वरित अवलोकन यह वेब वर्कर्स एपीआई का गठन करता है.

कार्यकर्ता () निर्माता एक समर्पित कार्यकर्ता धागा बनाता है तथा अपनी संदर्भ वस्तु लौटाता है. फिर, हम इस ऑब्जेक्ट का उपयोग उस विशिष्ट कार्यकर्ता के साथ संवाद करने के लिए करते हैं.

संदेश भेजें() मेथड को मेन और वर्कर स्क्रिप्ट दोनों में प्रयोग किया जाता है एक दूसरे को डेटा भेजें. भेजे गए डेटा को दूसरी तरफ से प्राप्त किया जाता है onmessage आयोजन प्रबंधकर्ता.

समाप्त () तरीका मुख्य स्क्रिप्ट से एक कार्यकर्ता धागा समाप्त होता है. यह समाप्ति है तुरंत: कोई भी वर्तमान स्क्रिप्ट निष्पादन और लंबित स्क्रिप्ट रद्द कर दी जाएगी। बंद करे() विधि एक ही काम करता है, लेकिन यह है कार्यकर्ता धागा द्वारा खुद को बंद करने का आह्वान किया.

उदाहरण कोड

अब, कुछ नमूना कोड देखते हैं। index.html पेज रखती है मुख्य स्क्रिप्ट अंदर एक

हम इसके साथ शुरू करते हैं मुख्य लिपि से श्रमिक सूत्र का निर्माण.

  डब्ल्यू = नए कार्यकर्ता ('कार्यकर्ता.जेएस'); 
  कार्यकर्ता () निर्माता कार्यकर्ता फ़ाइल के URL को अपने तर्क के रूप में लेता है.
 फिर, हम एक इवेंट हैंडलर जोड़ते हैं onmessage नव निर्मित कार्यकर्ता उदाहरण की घटना इससे डेटा प्राप्त करते हैं.  डेटा की संपत्ति ई ईवेंट प्राप्त आंकड़ों को रखेगा.
  डब्ल्यू = नए कार्यकर्ता ('कार्यकर्ता.जेएस'); w.onmessage = (e) => कंसोल.लॉग ('कार्यकर्ता से प्राप्त: $ e.data');  
 अब, हम उपयोग करते हैं संदेश भेजें() सेवा मेरे कार्यकर्ता थ्रेड को कुछ डेटा भेजें एक बटन के क्लिक पर। संदेश भेजें() विधि दो तर्क ले सकती है। पहला किसी भी प्रकार (स्ट्रिंग, सरणी…) का हो सकता है। यह डेटा है कार्यकर्ता धागे के लिए भेजा जाना है (या मुख्य स्क्रिप्ट में, जब विधि कार्यकर्ता सूत्र में मौजूद है).
 दूसरा, वैकल्पिक पैरामीटर ऑब्जेक्ट की एक सरणी है जो कार्यकर्ता सूत्र द्वारा उपयोग किया जा सकता है (लेकिन मुख्य स्क्रिप्ट या इसके विपरीत नहीं)। इस प्रकार की वस्तुओं को कहा जाता है हस्तांतरणीय वस्तुओं.
  document.querySelector ('बटन')। onclick = () => w.postMessage ('जॉन');  
 मैं कार्यकर्ता सूत्र को एक स्ट्रिंग मान भेज रहा हूं.
 कार्यकर्ता सूत्र में, हमें एक जोड़ने की आवश्यकता है onmessage इवेंट हैंडलर कि डेटा प्राप्त होगा बटन क्लिक पर इसे मुख्य स्क्रिप्ट द्वारा भेजा गया। हैंडलर के अंदर, हम प्राप्त स्ट्रिंग को दूसरे के साथ मिलाएं और मुख्य स्क्रिप्ट पर वापस परिणाम भेजें.
  Comfort.info ('कार्यकर्ता बनाया'); onmessage = (e) => पोस्टमैसेज ('हाय $ e.data');  
 मुख्य स्क्रिप्ट के विपरीत जहां हमें इसका उपयोग करना था w के लिए संदर्भ वस्तु विशिष्ट वर्कर थ्रेड का संदर्भ लें जिस पर स्क्रिप्ट तब उपयोग करता है onmessage तथा संदेश भेजें तरीके, वहाँ है कार्यकर्ता सूत्र में संदर्भ वस्तु की कोई आवश्यकता नहीं है मुख्य सूत्र को इंगित करने के लिए.
 कोड निम्नानुसार काम करता है। जब ब्राउज़र लोड होता है index.html, कंसोल दिखाएगा "कार्यकर्ता बनाया गया" जैसे ही संदेश कार्यकर्ता () कंस्ट्रक्टर को मुख्य धागे में निष्पादित किया जाता है, एक नया कार्यकर्ता बनाना.
 जब आप पृष्ठ पर बटन पर क्लिक करते हैं, तो आपको मिल जाएगा "कार्यकर्ता से प्राप्त: हाय जॉन" कंसोल में संदेश, जो कि स्ट्रिंग है कार्यकर्ता सूत्र में समाहित इसे भेजे गए डेटा के साथ, और फिर था मुख्य स्क्रिप्ट पर वापस भेज दिया.