JS वेब वर्कर्स

एक Web Worker background में एक भारी काम चलाता है ताकि page freeze न हो, जैसे कोई helper दूसरे कमरे में काम कर रहा हो। आप उसे messages भेजते हैं और वह जवाब वापस भेजता है।

In this page:

Web Worker क्या है?
postMessage()
Worker Errors
एक Worker Terminate करना
Practical इस्तेमाल

Syntax

javascript

const worker = new Worker("worker.js");
worker.postMessage(data);
worker.onmessage = function(event) {
  // event.data
};

Web Worker क्या है?

एक Web Worker JavaScript को एक अलग browser thread में चलाता है और main UI thread से दूर भारी काम संभाल सकता है।

चूंकि एक worker अपने खुद के thread पर चलता है, वहाँ की महंगी computations main page पर scrolling, animations, या user input को freeze नहीं करतीं।

उदाहरण: What Is a Web Worker?

javascript

// Declare the constant `workerCode`, set to `postMessage("Worker started");`
// Declare the constant `workerCode`, set to `postMessage("Worker started");`
const workerCode = `postMessage("Worker started");`;
// Declare the constant `blob` as a new `Blob` instance
// Declare the constant `blob` as a new `Blob` instance
const blob = new Blob([workerCode], { type: "application/javascript" });
// Declare the constant `worker` as a new `Worker` instance
// Declare the constant `worker` as a new `Worker` instance
const worker = new Worker(URL.createObjectURL(blob));
// Assign `(e) => console.log(e.data)` to `worker.onmessage`
// Assign `(e) => console.log(e.data)` to `worker.onmessage`
worker.onmessage = (e) => console.log(e.data);

postMessage()

Main thread और worker postMessage() से data का आदान-प्रदान करते हैं। Workers main thread के साथ memory साझा नहीं करते, इसलिए सारी communication postMessage() के ज़रिए data की copies आगे-पीछे भेजकर होती है, सीधे variable access से नहीं।

उदाहरण: postMessage()

javascript

// Declare the constant `workerCode`, set to `onmessage = (e) => postMessage("Received: " + e.data);`
// Declare the constant `workerCode`, set to `onmessage = (e) => postMessage("Received: " + e.data);`
const workerCode = `onmessage = (e) => postMessage("Received: " + e.data);`;
// Declare the constant `worker` as a new `Worker` instance
// Declare the constant `worker` as a new `Worker` instance
const worker = new Worker(URL.createObjectURL(new Blob([workerCode])));
// Assign `(e) => console.log(e.data)` to `worker.onmessage`
// Assign `(e) => console.log(e.data)` to `worker.onmessage`
worker.onmessage = (e) => console.log(e.data);
// Call `worker.postMessage("Hello")`
// Call `worker.postMessage("Hello")`
worker.postMessage("Hello");

Worker Errors

Workers error event से main thread को errors report कर सकते हैं। worker के error event को सुनना main thread को worker के अलग execution context के अंदर होने वाली failures को catch और handle करने देता है।

उदाहरण: Worker Errors

javascript

// Declare the constant `workerCode`, set to `throw new Error("Worker failed");`
// Declare the constant `workerCode`, set to `throw new Error("Worker failed");`
const workerCode = `throw new Error("Worker failed");`;
// Declare the constant `worker` as a new `Worker` instance
// Declare the constant `worker` as a new `Worker` instance
const worker = new Worker(URL.createObjectURL(new Blob([workerCode])));
// Assign `(e) => console.log("Worker error:", e.message)` to `worker.onerror`
// Assign `(e) => console.log("Worker error:", e.message)` to `worker.onerror`
worker.onerror = (e) => console.log("Worker error:", e.message);

एक Worker Terminate करना

terminate() किसी worker को तब रोकता है जब उसकी ज़रूरत न रहे। terminate() कॉल करना worker के script को तुरंत पूरी तरह रोक देता है, जो उसका काम सच में खत्म होने पर resources खाली करने के लिए ज़रूरी है।

उदाहरण: Terminate a Worker

javascript

const workerCode = `postMessage("Running");`;
const worker = new Worker(URL.createObjectURL(new Blob([workerCode])));
worker.onmessage = (e) => {
  console.log(e.data);
  worker.terminate(); // stop the worker once done
};

Practical इस्तेमाल

Web Workers CPU-heavy calculations और data processing के लिए उपयोगी हैं जिन्हें page को block नहीं करना चाहिए। एक typical use case किसी बड़े data-processing या image-manipulation task को एक worker में चलाना है ताकि page उसके होने के दौरान responsive बना रहे।

उदाहरण: Practical Use

javascript

// Declare the constant `workerCode`, set to `
const workerCode = `
  let total = 0;
  for (let i = 0; i < 1e6; i++) total += i;
  postMessage(total);
`;
// Declare the constant `worker` as a new `Worker` instance
const worker = new Worker(URL.createObjectURL(new Blob([workerCode])));
// Assign `(e) => console.log("Heavy computation result:", e.data)` to `worker.onmessage`
worker.onmessage = (e) => console.log("Heavy computation result:", e.data);

Live Example

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson JS Event Loop Next Lesson → JS Service Workers

JS वेब वर्कर्स

Web Worker क्या है?

postMessage()

Worker Errors

एक Worker Terminate करना

Practical इस्तेमाल

Chapter Quiz — Complete all 26 topics to unlock

Login to run this code