एचटीएमएल वेब वर्कर्स एपीआई
वेब वर्कर एक जावास्क्रिप्ट है जो पृष्ठ के प्रदर्शन को प्रभावित किए बिना पृष्ठभूमि में चल रहा है।
वेब वर्कर क्या है?
HTML पृष्ठ में स्क्रिप्ट निष्पादित करते समय, स्क्रिप्ट समाप्त होने तक पृष्ठ अनुत्तरदायी हो जाता है।
एक वेब कार्यकर्ता एक जावास्क्रिप्ट है जो पृष्ठ के प्रदर्शन को प्रभावित किए बिना, अन्य लिपियों से स्वतंत्र रूप से पृष्ठभूमि में चलता है। आप जो चाहें करना जारी रख सकते हैं: क्लिक करना, चीजों का चयन करना, आदि, जबकि वेब कार्यकर्ता पृष्ठभूमि में चलता है।
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से वेब वर्कर्स का समर्थन करता है।
| API | |||||
|---|---|---|---|---|---|
| Web Workers | 4.0 | 10.0 | 3.5 | 4.0 | 11.5 |
HTML वेब वर्कर्स उदाहरण
नीचे दिया गया उदाहरण एक साधारण वेब वर्कर बनाता है जो पृष्ठभूमि में संख्याओं की गणना करता है:
उदाहरण
वेब वर्कर सपोर्ट की जाँच करें
वेब वर्कर बनाने से पहले, जांचें कि उपयोगकर्ता का ब्राउज़र इसका समर्थन करता है या नहीं:
if (typeof(Worker) !== "undefined") {
// Yes! Web worker support!
// Some code.....
}
else {
// Sorry! No Web Worker support..
}
एक वेब वर्कर फ़ाइल बनाएँ
अब, हमारे वेब वर्कर को बाहरी जावास्क्रिप्ट में बनाते हैं।
यहां, हम एक स्क्रिप्ट बनाते हैं जो मायने रखती है। स्क्रिप्ट "demo_workers.js" फ़ाइल में संग्रहीत है:
var i = 0;
function timedCount()
{
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
उपरोक्त कोड का महत्वपूर्ण हिस्सा postMessage()विधि है - जिसका उपयोग किसी संदेश को HTML पृष्ठ पर वापस पोस्ट करने के लिए किया जाता है।
नोट: आम तौर पर वेब कर्मचारियों का उपयोग ऐसी सरल स्क्रिप्ट के लिए नहीं किया जाता है, बल्कि अधिक CPU गहन कार्यों के लिए किया जाता है।
वेब वर्कर ऑब्जेक्ट बनाएं
अब जब हमारे पास वेब वर्कर फ़ाइल है, तो हमें इसे HTML पृष्ठ से कॉल करने की आवश्यकता है।
निम्न पंक्तियाँ जाँचती हैं कि क्या कार्यकर्ता पहले से मौजूद है, यदि नहीं - यह एक नया वेब वर्कर ऑब्जेक्ट बनाता है और "demo_workers.js" में कोड चलाता है:
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
फिर हम वेब वर्कर से संदेश भेज और प्राप्त कर सकते हैं।
वेब कार्यकर्ता के लिए एक "ऑनमेसेज" ईवेंट श्रोता जोड़ें।
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
जब वेब कार्यकर्ता एक संदेश पोस्ट करता है, तो ईवेंट श्रोता के भीतर कोड निष्पादित होता है। वेब वर्कर का डेटा Event.data में स्टोर किया जाता है।
एक वेब कार्यकर्ता को समाप्त करें
जब एक वेब वर्कर ऑब्जेक्ट बनाया जाता है, तो यह संदेशों को तब तक सुनना जारी रखेगा (बाहरी स्क्रिप्ट समाप्त होने के बाद भी) जब तक इसे समाप्त नहीं किया जाता है।
एक वेब कार्यकर्ता, और मुफ्त ब्राउज़र/कंप्यूटर संसाधनों को समाप्त करने के लिए,
terminate()विधि का उपयोग करें:
w.terminate();
वेब वर्कर का पुन: उपयोग करें
यदि आप कार्यकर्ता चर को अपरिभाषित पर सेट करते हैं, तो इसे समाप्त करने के बाद, आप कोड का पुन: उपयोग कर सकते हैं:
w = undefined;
पूर्ण वेब वर्कर उदाहरण कोड
हम पहले ही .js फ़ाइल में वर्कर कोड देख चुके हैं। एचटीएमएल पेज के लिए कोड नीचे दिया गया है:
उदाहरण
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<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;
};
}
else
{
document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
}
}
function stopWorker()
{
w.terminate();
w = undefined;
}
</script>
</body>
</html>
वेब वर्कर्स और डोम
चूंकि वेब कर्मचारी बाहरी फाइलों में हैं, इसलिए उनके पास निम्नलिखित जावास्क्रिप्ट ऑब्जेक्ट्स तक पहुंच नहीं है:
- खिड़की वस्तु
- दस्तावेज़ वस्तु
- मूल वस्तु