HTML Web Workers

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

Web Worker क्या है?

जब HTML पृष्ठ पर स्क्रिप्ट चलाया जाता है, पृष्ठ जवाबी नहीं है जब तक स्क्रिप्ट पूरा नहीं हो जाता。

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

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

तालिका में दिए गए नंबर पूर्णतया Web 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 फ़ाइल बनाएं

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

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

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

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

टिप्पणी: Web Worker सामान्यतया इतने सरल स्क्रिप्टों के लिए नहीं इस्तेमाल किया जाता है, वहां तक कि यह CPU रिसॉर्स की अधिक खपत करने वाले कार्यों के लिए इस्तेमाल किया जाता है。

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

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

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

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

तब हम वर्कर से मासेज भेज सकते हैं और प्राप्त कर सकते हैं。

एक "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 फिर से इस्तेमाल करना

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

w = undefined;

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

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

उदाहरण

<!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

वेब वर्कर बाहरी फ़ाइल में होने के कारण उन्हें नीचे दिए गए जावास्क्रिप्ट ऑब्जैक्ट की पहुंच नहीं है:

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