वेब वर्कर: वर्तमान मुख्य (विंडो) थ्रेड की तुलना में पृष्ठभूमि में स्क्रिप्ट को अलग थ्रेड में चलाने का एक तरीका।

1. वेब वर्कर बनाम इवेंट_लूप का उपयोग कर एसिंक्रोनस
2. वेब वर्कर्स का परिचय
3. वेब वर्कर कैसे बनाएं
4. उदाहरण के लिए एक वेब कर्मी के साथ
5. वेब कर्मियों की सीमा
6. वेब वर्कर्स में अतुल्यकालिक ऑपरेशन

1. इवेंट लूप का उपयोग कर वेब वर्कर्स बनाम एसिंक्रोनस ऑपरेशंस

जावास्क्रिप्ट आमतौर पर कार्यों को संबंधित कतारों (मैक्रो-टास्क कतार, माइक्रो-टास्क कतार) में रखकर अतुल्यकालिक संचालन को संभालता है, इवेंट लूप लगातार इन कतारों की जांच करता है और कार्यों को कॉल स्टैक में धकेलता है जब वे निष्पादित होने के लिए तैयार होते हैं। यह दृष्टिकोण गैर-अवरुद्ध निष्पादन सुनिश्चित करता है लेकिन फिर भी सब कुछ एक ही थ्रेड पर चलाता है।

वेब वर्कर्स, दूसरी ओर, स्क्रिप्ट को अपने कॉल स्टैक, एसिंक्रोनस क्यू और इवेंट लूप के साथ पूरी तरह से अलग थ्रेड में चलाने की अनुमति देते हैं। यह पृथक्करण मुख्य थ्रेड को भारी गणना या लंबे समय तक चलने वाले कार्यों द्वारा अवरुद्ध होने से बचाता है, क्योंकि कार्यकर्ता स्वतंत्र रूप से काम करता है।

2. वेब वर्कर्स का परिचय

वेब कार्यकर्ता मुख्य विंडो संदर्भ की तुलना में एक अलग संदर्भ में स्क्रिप्ट निष्पादित करते हैं, जिससे वेब अनुप्रयोगों में समानता सक्षम होती है। वेब वर्कर एपीआई कई प्रकार के कर्मचारी प्रदान करता है:

• समर्पित कार्यकर्ता: एक ही स्क्रिप्ट द्वारा उपयोग किए जाने वाले, ये मुख्य थ्रेड से कार्यों को उतारने के लिए आदर्श हैं।
• साझा श्रमिक: विभिन्न संदर्भों (उदाहरण के लिए, विभिन्न विंडो या आईफ्रेम) में चलने वाली एकाधिक स्क्रिप्ट द्वारा पहुंच योग्य।
• सेवा कार्यकर्ता: वेब एप्लिकेशन, ब्राउज़र और नेटवर्क के बीच एक प्रॉक्सी सर्वर के रूप में काम करते हैं, जो ऑफ़लाइन समर्थन और कैशिंग जैसी कार्यक्षमता प्रदान करते हैं।

यह लेख समर्पित कार्यकर्ताओं पर केंद्रित है, जिन्हें लागू करना सबसे आसान है और आमतौर पर उपयोग किया जाता है।

3. वेब वर्कर कैसे बनाएं

एक वेब वर्कर बनाने के लिए, आप निम्नलिखित प्रमुख तरीकों का उपयोग कर सकते हैं:

• नया वर्कर(): एक नया वर्कर बनाने वाला कंस्ट्रक्टर।
• postMessage(): मुख्य थ्रेड से कार्यकर्ता को संदेश भेजता है या इसके विपरीत।
• onmessage: कार्यकर्ता द्वारा प्राप्त संदेशों को संभालने के लिए एक कॉलबैक फ़ंक्शन सेट किया गया है।
• समाप्त(): कर्मचारी को तुरंत रोक देता है।

4. सरल उदाहरण

आइए एपीआई से डेटा लाने के लिए एक कार्यकर्ता बनाएं, विशेष रूप से डॉग सीईओ एपीआई से कुत्ते की छवियां।

4.1 कार्यकर्ता कोड

यहां वर्कर स्क्रिप्ट का कार्यान्वयन है। ध्यान दें कि कार्यकर्ता के अंदर, self का उपयोग वैश्विक संदर्भ को संदर्भित करने के लिए किया जाता है:

if (window.Worker) {
    const worker = new Worker("/src/worker.js");
        worker.postMessage({ 
            operation: "get_dog_imgs",
            url: "https://dog.ceo/api/breeds/image/random", 
            count: 5   //number of photos
        });
        worker.onmessage = (e) => {
        console.log(e.data);
        if (e && e.data) {
            setdata((old) => [...old, e.data]); // update react state
            showCallStack(); // function to show the callstack 
        }
    };
    worker.onerror = (e) => {
        console.log(e);
    };
}

इस कोड में, कार्यकर्ता संदेशों को सुनता है (संदेश पर) और दिए गए यूआरएल से गिनती के अनुसार कई बार डेटा प्राप्त करता है।

यहां कार्यकर्ता के अंदर कॉल स्टैक कैसा दिखता है:

4.2 ग्राहक कोड

मुख्य थ्रेड कार्यकर्ता का उपयोग इस प्रकार करता है:

self.onmessage = (event) => {
    const data = event.data;
    if (data && data.url && data.count) {
        fetchFromUrls(data.url, data.count);
    }
}
// fetch single data 
const fetchdata = async (url) => {
    const res = await self.fetch(url);
    return await res.json();
};

const fetchFromUrls = async (url, count) => {
    showCallStack(); // showing the callstack of the worker 
    for (const i of new Array(count).fill(0)) {
        let data = await fetchdata(url);
        if (data && data.message) {
            self.postMessage({ type: "img", data: data.message });
        }
    }
};

यह कोड दर्शाता है कि कार्यकर्ता को संदेश कैसे भेजा जाए और मुख्य थ्रेड में प्राप्त डेटा कैसे प्राप्त किया जाए।

पूरे कोड के लिए कोड पर जाएं

5. वेब वर्कर्स की सीमाएँ

जबकि वेब वर्कर मुख्य विंडो थ्रेड से एक अलग थ्रेड में चलते हैं, वे कुछ सीमाओं के साथ आते हैं:

• DOM तक कोई पहुंच नहीं: कर्मचारी सीधे DOM में हेरफेर नहीं कर सकते। यूआई को अपडेट करने के लिए मुख्य थ्रेड के साथ संचार आवश्यक है।
• संसाधन उपभोग: वेब कर्मियों का अत्यधिक उपयोग करने से मेमोरी का उपयोग बढ़ सकता है, क्योंकि प्रत्येक कर्मी को स्वतंत्र रूप से काम करने के लिए अतिरिक्त संसाधनों की आवश्यकता होती है।