HTML Web Workers

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

Web Worker क्या है?

HTML पृष्ठ पर स्क्रिप्ट कार्यान्वित करते समय, पृष्ठ अनुत्तरदायी नहीं होता, जब तक स्क्रिप्ट पूरा नहीं हो जाता。

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

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

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

API
Web Worker 4.0 10.0 3.5 4.0 11.5

HTML Web Workers उदाहरण

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

गणना:

आप खुद आज्ञा करें

Web Worker समर्थन जाँच

web worker बनाने से पहले, आपके ब्राउज़र को यह समर्थन करता है का परीक्षण करें:

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

Web Worker फ़ाइल बनाएं

अब, हम एक बाहरी जावास्क्रिप्ट फ़ाइल में हमारे वेब वर्कर को बनाएं।

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

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

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

टिप्पणी: वेब वर्कर सामान्यतया इतने सरल स्क्रिप्टों के लिए नहीं उपयोग में आता है, बजाय इसके स्थान पर यह CPU वस्तुस्थिति भरे कार्यों के लिए उपयोग में आता है。

वेब वर्कर ऑब्जैक्ट बनाना

अब हमारे पास वेब वर्कर फ़ाइल है, तो हमें एचटीएमएल पृष्ठ से इसे आमंत्रित करना है。

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

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

तब हम वेब वर्कर से उत्पन्न होने वाले और संदेश प्राप्त करने के लिए सक्षम हो सकेंगे。

वेब वर्कर को एक "onmessage" इवेंट लिस्टनर जोड़ें:

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

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

वेब वर्कर को बंद करना

जब वेब वर्कर बनाया जाता है, तो यह बाहरी स्क्रिप्ट के बंद होने के बाद भी बारीकी से संदेशों को सुनता रहता है (उसके बाद भी) जब तक कि यह बंद नहीं होता।

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

w.terminate();

वेब वर्कर का रीज़ेस्ट्रीकिंग

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

w = undefined;

पूर्ण वेब वर्कर उदाहरण कोड

हमने .js फ़ाइल में वर्कर कोड को देखा है। अब हम एचटीएमएल पृष्ठ के कोड हैं:

उदाहरण

<!DOCTYPE html>
<html>
<body>
<p>गिनती करें: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>
<br><br>
<script>
var w;
function startWorker() {
    if(typeof(Worker) !== "undefined") {
        if(typeof(w) == "undefined") {
            w = new Worker("demo_workers.js");
        }
        w.onmessage = function(event) {
            document.getElementById("result").innerHTML = event.data;
        };
    }
        document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
    }
}
function stopWorker() { 
    w.terminate();
    w = undefined;
}
</script>
</body>
</html>

आप खुद आज्ञा करें

Web Worker और DOM

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

  • विंडो ऑब्जेक्ट
  • डॉक्युमेंट ऑब्जेक्ट
  • पैरेंट ऑब्जेक्ट