Introduction to Web Workers for background tasks In Hindi
जावास्क्रिप्ट प्रोग्रामिंग में वेबवर्कर प्रोग्रामर को मैन थ्रेड से एक्सटर्नाली बैकग्राउंड में जावास्क्रिप्ट प्रोग्राम सोर्स कोड को रन करने की परमिशन प्रोवाइड करते हैं, जो की प्रोग्रामिंग में प्रोग्रामर इंटरफ़ेस UI को बिना स्टॉप किए रिसोर्सेज-इंटेसिव टास्क को कम्पलीट करने में हेल्प करता है। जावास्क्रिप्ट में वेबवर्कर सिस्टम डेटा प्रोसेसिंग, नेटवर्क रिक्वेस्ट, या कोई लार्ज न्यूमेरिक डाटा कैलकुलेशन प्रोसेसिग, को मैनेज और कण्ट्रोल करने जैसे प्रोग्रामिंग टास्क के लिए बहुत अधिक हेल्पफुल है।
कई बार नेटवर्क सिस्टम टास्क में मैन थ्रेड पर हैवी सिस्टम ऑपरेशन रन होने पर इससे सिस्टम परफॉरमेंस रिलेटेड इश्यूज जनरेट हो सकते हैं. जैसे कि, सिस्टम नेटवर्क में अनुत्तरदायी होना, स्पेशली रिच इंटरैक्शन वाले वेब एप्लिकेशन टास्क में, यहाँ वेब वर्कर इंटरनेट यूजर को ऐसे टास्क को एक अलग थ्रेड पर ऑफलोड या रन करने में कम्पेटिबल करता हैं, जिससे यह तय हो जाता है कि बैकग्राउंड टास्क रन होने के दौरान UI अधिक रेस्पॉन्सिव होती है।
What is Web Worker in JavaScript?
जावास्क्रिप्ट प्रोग्रामिंग में वेब वर्कर एक जावास्क्रिप्ट सोर्स बेस्ड क्रिएटेड स्क्रिप्ट है, जो मौजूदा प्रोग्राम में मैन UI थ्रेड से अलग थ्रेड पर बैकग्राउंड में रन होती है। जावास्क्रिप्ट में वेब वर्कर का यूज़ मौजूदा सिस्टम यूज़र इंटरफ़ेस को इम्पैक्ट किए बिना सिस्टम कैलकुलेशन या टास्क करने या जटिल टास्क को मैनेज करने में कर सकते है। जहा वेब वर्कर थ्रेड में डॉम (डॉक्यूमेंट ऑब्जेक्ट मॉडल) को एक्सेस नहीं कर सकते है, जबकि ये मैसेज के माध्यम से मैन थ्रेड के साथ कम्यूनिकेट और कण्ट्रोल कर सकते हैं।
Why use web workers in JavaScript?
- जावास्क्रिप्ट में मैन थ्रेड से अलग हैवी सिस्टम टास्क में CPU-इंटेंसिव कैलकुलेशन करना है। जैसे, मैथमेटिकल न्यूमेरिक कैलकुलेशन, इमेज एडिटिंग मेनूप्लेशन, आदि है।
- जावास्क्रिप्ट वेबपेज में लार्ज डेटासेट के लिए डेटा प्रोसेसिंग करना है. जैसे, वेबपेज या प्रोग्राम में लार्ज JSON फ़ाइलों को पार्स करना या लार्ज वॉल्यूम में ऐरे डेटाबेस को कण्ट्रोल करना है ।
- कई बार जावास्क्रिप्ट वेबपेज में एसिंक्रोनस नेटवर्क रिक्वेस्ट में जिनमें अधिक समय लग सकता है, यह तय करते हुए कि यह सिस्टम में कम्पलीट UI रेस्पॉन्सिव बनी रहे।
- वेब वर्कर जावास्क्रिप्ट में रीयल-टाइम डेटा स्ट्रीमिंग प्रोसेसिंग के लिए इम्पोर्टेन्ट फीचर्स है. जैसे, वेबसॉकेट, रीयल-टाइम अपडेट डिस्प्ले करना, आदि है।
- वेब वर्कर का जावास्क्रिप्ट प्रोग्रामिंग में इम्पोर्टेन्ट रोल यह है कि ये मैन सिस्टम प्रोसेसिंग को डिस्टर्ब किए बिना एक अलग UI थ्रेड को ब्लॉक किए बिना एक मल्टीटास्किंग सिस्टम एनवायरनमेंट को प्रोवाइड करता हैं।
Creating Basic Web Worker in JavaScript Programming.
जावास्क्रिप्ट प्रोग्रामिंग में बेसिक वेब वर्कर क्रिएट करने के लिए प्रोग्रामर को वेब वर्कर के लिए एक अलग जावास्क्रिप्ट फ़ाइल क्रिएट और राइट करनी होगी। जहा मैन सिस्टम से अलग बैकग्राउंड में एक्सेक्यूट होने वाला प्रोग्राम सोर्स कोड हो। यह मैन थ्रेड postMessage() फंक्शन मेथड के माध्यम से वेब वर्कर से कम्यूनिकेट करता है।
Step-by-step to create a web worker in JavaScript.
Create web worker (worker.js) – सबसे पहले वर्कर.जेएस फाइल क्रिएट करे इस फ़ाइल में वह प्रोग्राम सोर्स कोड होता है, जो की सेपरेट वर्कर थ्रेड में एक्सेक्यूट होता है।
// let we create worker.js file for sepret thread as backgrund task
self.onmessage = function (systemevent) {
const output = systemevent.data * 2; // here it example, that doubling the received number
self.postMessage(output); // here it Send the result back to the main thread with background task
};
यहाँ self ऑब्जेक्ट स्वयं वेब वर्कर टास्क को इंडीकेट करता है।
यहाँ onmessage सिस्टमइवेंट मैन थ्रेड से सेंड किए गए मैसेज को रीड करता है।
जबकि postMessage() मेथड को यूज़ करके सिस्टम डेटा को मैन थ्रेड पर रिटर्न सेंड करने में किया जाता है।
Here main thread (index.html or main.js) – इस फाइल में वेब वर्कर टास्क क्रिएट और यूज़ किया जाता है।
<!– index.html –>
<script>
// let here we Create a sample web worker from the worker.js file
const worker = sample Worker(‘worker.js’);
// let here we Send data to the worker js file ( as a number to be doubled)
worker.postMessage(4);
// here it use to Listen for a web wrker response from the web worker
worker.onmessage = function (event) {
const output = event.data; // here it used to Received doubled value from postmessage
console.log(‘output from the web worker’, output); // Result – output from the web worker 8
};
// here it used to Error handling in case of web worker task failure
worker.onerror = function (error) {
console.error(‘display Error in web worker’, error.message);
};
</script>
यहाँ sample Worker(‘worker.js’) वेब वर्कर के लिए एक नया इंस्टेंस क्रिएट करता है।
यहाँ postMessage() मेथड वेब वर्कर को एक मैसेज सेंड करता है।
यहाँ onmessage ईवेंट तब एक्सेक्यूट होता है, जब वेब वर्कर मैन थ्रेड को रिटर्न मैसेज को सेंड करता है।
Passing messages between main thread and worker in JavaScript file.
किसी भी जावास्क्रिप्ट वेब वर्कर फाइल में मैन थ्रेड और वेब वर्कर postMessage() और onmessage मेथड को अप्लाई करके कम्यूनिकेट कर सकते हैं। जहा डेटा मैसेज सेंड कर सेंड किया जाता है, और यहाँ ये प्रोसेस दोनों ही सिंक्रोनस या एसिंक्रोनस टास्क आर्डर में रन हो सकते हैं, यह इस कंडीशन पर डिपेंड करता है कि यूजर मैसेज को लिस्टनेर को कैसे सेट करते हैं।
we use Main Thread to Sends Data to web Worker
// let create a Main thread
worker.postMessage({ action: “handleData”, data: [19, 28, 73, 10] });
here Worker used to Sends Data Back to Main Thread side
// here Worker thread created
self.postMessage({ output: processedData });
Handling Responses in Main Thread
// here we create a Main thread listens for the message to listen
worker.onmessage = function (event) {
const output = event.data.output;
console.log(“Data handle”, output);
};
Terminating and Managing Web Workers in JavaScript.
जावास्क्रिप्ट प्रोग्राम में किसी क्रिएटेड वेब वर्कर का यूज़ हो जाए, इसके बाद यूजर को सिस्टम रिसोर्सेज को एम्प्टी करने के लिए उसे टर्मिनेट कर देना चाहिए। इसके के लिए प्रोग्रामर मैन थ्रेड से terminate() फंक्शन मेथड को अप्लाई कर सकते हैं।
/ Web Worker Main Thread
worker.terminate();
Important – यहाँ वेब वर्कर टर्मिनेट होने के बाद वर्कर मैन थ्रेड से किसी भी प्रकार से कम्यूनिकेट नहीं कर सकता है।
Proper web worker termination.
वेब वर्कर स्क्रिप्ट में close() फंक्शन को कॉल करके यह अपने आप को भी टर्मिनेट कर सकता है।
/ worker.js
self.close(); // यह वर्कर को स्वयं के भीतर से भी टर्मिनेट कर सकता है
Error management with JavaScript web workers.
जावास्क्रिप्ट वेब वर्कर फाइल में एरर को onerror इवेंट हैंडलर द्वारा कैच किया जा सकता है।
/ Web Worker Main Thread: Error Management
worker.onerror = function (error) {
console.error(“display error in web worker”, error.message);
};
वेब वर्कर फाइल में जनरेट थ्रेड में एरर को कैच किया जा सकता है, और मैन थ्रेड को रिटर्न और रिपोर्ट किया जा सकता है, जिससे प्रोग्रामर उन्हें प्रॉपर आर्डर में मैनेज कर सकते हैं।
Limitations of web workers created in JavaScript.
- No DOM access – जावास्क्रिप्ट प्रोग्राम में वेब वर्कर्स के पास डॉम या विंडो ऑब्जेक्ट को डायरेक्ट एक्सेस नहीं कर सकते है। यहाँ वेब वर्कर केवल मैसेज पासिंग के द्वारा मैन थ्रेड के साथ इंटरैक्ट या कम्यूनिकेट कर सकते हैं।
- No synchronous API – यहाँ वेब वर्कर्स अलर्ट() या प्रॉम्प्ट() मेथड जैसे सिंक्रोनस एपीआई को एक्सेस नहीं कर सकते है, क्योंकि ये एक अलग थ्रेड बैकग्राउंड में रन होते हैं।
- Same-origin policy – यहाँ वेब वर्कर स्क्रिप्ट को मैन वेबपेज के समान मूल से ही रिप्रेजेंट किया जाना चाहिए। जहा सिक्योरिटी रीज़न के कारण यूजर किसी भिन्न डोमेन से वेब वर्कर को लोड नहीं कर सकते है, जब तक कि CORS हेडर प्रॉपर आर्डर में कॉन्फ़िगर न किए गए हों।
- Performance overhead – जावास्क्रिप्ट प्रोग्रामिंग में वेब वर्कर्स मल्टीटास्किंग प्रोग्रामिंग कांसेप्ट में हेल्प करते हैं, लेकिन कई बार जरूरत से ज्यादा बहुत अधिक वेब वर्कर्स क्रिएट करने या वेब वर्कर्स और मैन थ्रेड के बीच अत्यधिक कम्युनिकेशन करने से सिस्टम ओवरहेड या डिले हो जाता है।
Conclusion of Webworker in JavaScript.
जावास्क्रिप्ट प्रोग्रामिंग में वेब वर्कर्स क्रिएट कर मैन UI थ्रेड को ब्लॉक किए बिना मल्टीटास्किंग कम्प्यूटेशनल आर्डर में डीप सिस्टम टास्क को कर सकते हैं, इसके रिजल्ट के रूप में प्रॉपर या सुचारू और अधिक रेस्पॉन्सिव आर्डर में वेब एप्लिकेशन क्रिएट होते हैं। जावास्क्रिप्ट प्रोग्रामिंग में वेब वर्कर्स मल्टीप्ल टास्क के लिए एक पॉवरफुल टूल या फीचर्स हैं. जैसे, एक ही समय में लार्ज वॉल्यूम में डेटा सेट की समानांतर प्रोसेसिंग करना , लार्ज वॉल्यूम या हैवी ड्यूटी कैलकुलेशन या बैकग्राउंड टास्क को ऑफलोड करना, या सिस्टम नेटवर्क में रीयल-टाइम डेटा प्रोसेसिंग अपडेट को मैनेज और कण्ट्रोल करना है.
