वेब वर्कर एपीआई

वेब वर्कर पृष्ठभूमि में चलने वाला जेसक्रिप्ट है, पृष्ठ की प्रदर्शन शीर्षक को प्रभावित नहीं करता。

वेब वर्कर क्या है?

एचटीएमएल पृष्ठ में स्क्रिप्ट चलाते समय, पृष्ठ स्क्रिप्ट पूरा होने तक अनुत्तर नहीं देता है。

वेब वर्कर पृष्ठभूमि में चलने वाला जेसक्रिप्ट है, अन्य स्क्रिप्ट से स्वतंत्र है और पृष्ठ की प्रदर्शन शीर्षक को प्रभावित नहीं करता। आप कुछ भी कर सकते हैं: क्लिक करना, सामग्री चुनना आदि, साथ ही वेब वर्कर पृष्ठभूमि में चलता है。

ब्राउज़र समर्थन

तालिका में दिए गए नंबर वेब वर्कर के पूर्ण समर्थन वाले पहले ब्राउज़र संस्करण को निर्दिष्ट करते हैं:

च्रोम आईई फ़ायरफॉक्स सैफारी ओपेरा
च्रोम 4 आईई 10 फ़ायरफॉक्स 3.5 सैफारी 4 ओपेरा 11.5
2010 जनवरी 2012 सितंबर 2009 जून 2009 जून 2011 जून

वेब वर्कर इन्स्टांस

नीचे दिए गए उदाहरण में एक साधारण वेब वर्कर बनाया गया है, जो पृष्ठभूमि में नंबर की गणना करता है:

उदाहरण

गिनती:

स्वयं आजीविका करें

वेब वर्कर ब्राउज़र जाँच

वेब वर्कर बनाने से पहले, आपके ब्राउज़र को इसका समर्थन करता है की जाँच करें:

if (typeof(Worker) !== "undefined") {
  // हाँ! वेब वर्कर समर्थन!
  // कुछ कोड.....
अन्यथा {
  // माफ करें! वेब वर्कर समर्थन नहीं है..
}

वेब वर्कर फ़ाइल बनाएं

अब, हमारे बाहरी JavaScript में Web Worker को बनाएं।

यहाँ, हमने एक महत्वपूर्ण स्क्रिप्ट बनाया है। यह स्क्रिप्ट "demo_workers.js" फ़ाइल में संग्रहीत है:

let i = 0;
function timedCount() {
  i ++;
  postMessage(i);
  setTimeout("timedCount()",500);
}
timedCount();

ऊपर का कोड के महत्वपूर्ण हिस्से है postMessage() तरीका - संदेश को HTML पृष्ठ को वापस भेजने के लिए इस्तेमाल किया जाता है。

टिप्पणी:सामान्यतया web worker इस तरह के साधारण स्क्रिप्टों के लिए नहीं इस्तेमाल किया जाता है, वहाँ तक कि CPU कठिन टास्कों के लिए इस्तेमाल किया जाता है。

Web Worker ऑब्जैक्ट बनाना

अब हमने web worker फ़ाइल हासिल की है, अब हमें इसे HTML पृष्ठ से बुलाना है।

नीचे का कोड वेब worker के लिए क्या होता है या नहीं, यदि वह नहीं मौजूद है, तो एक नया web worker ऑब्जैक्ट बनाया जाएगा और "demo_workers.js" में कोड चलाया जाएगा:

if (typeof(w) == "undefined") {
  w = new Worker("demo_workers.js");
}

तब हम वेब worker से आने वाले संदेशों को भेज सकते हैं और प्राप्त कर सकते हैं।

web worker को एक "onmessage" इवेंट लिस्टनर जोड़ें।

w.onmessage = function(event){
  document.getElementById("result").innerHTML = event.data;
};

जब Web Worker संदेश जारी करता है, तो यह इवेंट लिस्टनर में कोड को चलाता है। Web Worker से आने वाले डाटा event.data में संग्रहीत होता है。

Web Worker बंद करना

जब Web Worker ऑब्जैक्ट बनाया जाता है, तो यह बाद में भी संदेशों को सुनने के लिए जारी रहता है (यदि बाहरी स्क्रिप्ट खत्म हो चुका हो) जब तक कि यह बंद नहीं किया जाता है。

यदि आप Web Worker को बंद करना चाहते हैं और ब्राउज़र/कंप्यूटर संसाधनों को मुक्त करना चाहते हैं, तो इसे इस्तेमाल करें: terminate() तरीका:

w.terminate();

Web Worker दुबारा इस्तेमाल करना

यदि worker वेरियेबल को undefined रखा जाता है, तो उसके बंद होने के बाद, आपको नीचे का कोड दुबारा इस्तेमाल कर सकते हैं:

w = undefined;

पूर्ण Web Worker उदाहरण कोड

हमने .js फ़ाइल में Worker कोड को देखा है। नीचे है HTML पृष्ठ का कोडः

उदाहरण

<!DOCTYPE html>
<html>
<body>
<p>संख्याएँ गिनें: <output id="result"></output></p>
<button onclick="startWorker()">श्रमक शुरू करें</button>
<button onclick="stopWorker()">Stop Worker</button>
<script>
let w;
function startWorker() {
  if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
  }
  w.onmessage = function(event) {
    document.getElementById("result").innerHTML = event.data;
  };
}
function stopWorker() {
  w.terminate();
  w = undefined;
}
</script>
</body>
</html>

स्वयं आजीविका करें

Web Worker और DOM

क्योंकि Web Worker बाहरी फ़ाइल में है, इसलिए वे निम्नलिखित JavaScript ऑब्जैक्ट को नहीं अद्यतन कर सकते:

  • window ऑब्जैक्ट
  • document ऑब्जैक्ट
  • parent ऑब्जैक्ट