टाइपस्क्रिप्ट में वेब वर्कर

यह लेख टाइपस्क्रिप्ट में वेब वर्करों को समझाता है।

आप Web Workers की अवधारणा और विभिन्न उपयोग सुझाव उदाहरणों के साथ सीख सकते हैं।

YouTube Video

टाइपस्क्रिप्ट में वर्कर

टाइपस्क्रिप्ट में, वर्कर मुख्य थ्रेड से अलग, पृष्ठभूमि में प्रोसेसिंग करने के लिए जावास्क्रिप्ट वेब वर्कर एपीआई का उपयोग करने की एक प्रक्रिया है। यह भारी गणनाओं और असिंक्रोनस कार्यों को उपयोगकर्ता इंटरफ़ेस की प्रक्रिया को प्रभावित किए बिना निष्पादित करने की अनुमति देता है।

वर्कर मुख्य थ्रेड (यूआई थ्रेड) के साथ समानांतर रूप से कार्य करता है और संदेशों के माध्यम से थ्रेड्स के बीच डेटा का आदान-प्रदान कर सकता है। टाइपस्क्रिप्ट में भी, आप टाइप-सुरक्षित कोड लिखते समय वर्कर का उपयोग कर सकते हैं।

वर्कर का बुनियादी उपयोग

1. वर्कर बनाना

   वर्कर इंस्टेंस बनाएं और निर्दिष्ट स्क्रिप्ट को निष्पादित करें। आमतौर पर, स्क्रिप्ट एक अलग फाइल में निर्धारित की जाती है।

2. संदेश विनिमय

   postMessage और onmessage का उपयोग करके मुख्य थ्रेड और वर्कर थ्रेड के बीच संदेश भेजें और प्राप्त करें।

उदाहरण: वर्कर का बुनियादी कार्यान्वयन

1. worker.ts: वर्कर के लिए स्क्रिप्ट

1// worker.ts
2self.onmessage = (event) => {
3    const data = event.data;
4    const result = data.num1 + data.num2;
5    self.postMessage(result); // Return the result to the main thread
6};

2. main.ts: मुख्य थ्रेड में वर्कर का उपयोग करने के लिए स्क्रिप्ट

 1// main.ts
 2const worker = new Worker(
 3    new URL('./worker.ts', import.meta.url),
 4    { type: 'module' }
 5);
 6
 7worker.onmessage = (event) => {
 8    console.log("Result from worker:", event.data); // Receive message from the worker
 9};
10
11worker.postMessage({ num1: 10, num2: 20 }); // Send message to the worker

• इस उदाहरण में, worker.ts एक अलग थ्रेड में चलता है, num1 और num2 का योग गणना करता है और इसे मुख्य थ्रेड को वापस करता है। मुख्य थ्रेड परिणाम प्राप्त करता है और इसे कंसोल पर आउटपुट करता है।
• type: 'module' निर्दिष्ट करने पर, Worker स्क्रिप्ट को एक ES मॉड्यूल के रूप में व्याख्यायित किया जाता है, जिससे आप import और export का उपयोग कर सकते हैं। यह आपको पारंपरिक importScripts() का उपयोग किए बिना मॉड्यूल संरचनाओं को संभालने की अनुमति देता है।

टाइपस्क्रिप्ट में वर्कर का उपयोग करते समय विचार करने योग्य बिंदु

टाइप परिभाषाएँ जोड़ना

टाइपस्क्रिप्ट में, संदेश भेजने और प्राप्त करने के दौरान टाइप-सुरक्षित इंटरैक्शन सुनिश्चित करने के लिए डेटा प्रकार परिभाषित करें।

 1// Define data types
 2interface WorkerData {
 3    num1: number;
 4    num2: number;
 5}
 6
 7interface WorkerResult {
 8    result: number;
 9}
10
11// worker.ts
12self.onmessage = (event: MessageEvent<WorkerData>) => {
13    const data = event.data;
14    const result = data.num1 + data.num2;
15    const message: WorkerResult = { result };
16    self.postMessage(message); // Send the result in a type-safe manner
17};
18
19// main.ts
20const worker = new Worker(new URL('./worker.ts', import.meta.url), { type: 'module' });
21
22// Type the event from the worker
23worker.onmessage = (event: MessageEvent<WorkerResult>) => {
24  console.log("Result from worker:", event.data); // event.data is number
25};
26
27// Send typed data to the worker
28const message: WorkerData = { num1: 10, num2: 20 };
29worker.postMessage(message);

• MessageEvent के टाइप पैरामीटर को निर्दिष्ट करके, आप प्राप्त करने के लिए डेटा के प्रकार को स्पष्ट रूप से परिभाषित कर सकते हैं। यह टाइप सुरक्षा के साथ डेटा का आदान-प्रदान करने की अनुमति देता है।

Webpack या Vite सेट करना

टाइपस्क्रिप्ट में Worker का उपयोग करते समय, Webpack या Vite जैसे बंडलर की आवश्यकता हो सकती है। इन उपकरणों का उपयोग करके, आप Worker स्क्रिप्ट को सही तरीके से बंडल कर सकते हैं और इसे मुख्य थ्रेड से उपलब्ध करा सकते हैं।

उदाहरण के लिए, Vite का उपयोग करते समय, import.meta.url का उपयोग करके Worker को सही तरीके से आयात करें।

1const worker = new Worker(new URL('./worker.ts', import.meta.url), { type: 'module' });

• यह सुनिश्चित करता है कि बंडल की गई Worker स्क्रिप्ट सही ढंग से लोड हो, जिससे Worker का लाभ उठाने वाला प्रोसेसिंग सक्षम हो।

संदेश प्रेषण और समवर्ती (Concurrency) के लिए विचार

1. डेटा कॉपी करना

   मुख्य थ्रेड और Worker थ्रेड के बीच संदेश भेजते और प्राप्त करते समय, डेटा कॉपी होता है। जटिल डेटा जैसे ऑब्जेक्ट्स से निपटते समय, दक्षता पर विचार किया जाना चाहिए। बार-बार बड़ी मात्रा में डेटा का आदान-प्रदान प्रदर्शन को घटा सकता है।

2. Transferable ऑब्जेक्ट्स

   कुछ ऑब्जेक्ट्स, जैसे कि ArrayBuffer, को Transferable ऑब्जेक्ट्स कहा जाता है। Transferable ऑब्जेक्ट्स को संदेश भेजने के दौरान कॉपी करने के बजाय वर्कर को स्थानांतरित किया जा सकता है। यह डेटा कॉपीिंग के अधिभार को बचाने की अनुमति देता है।

1const worker = new Worker(new URL('./worker.ts', import.meta.url), { type: 'module' });
2
3const buffer = new ArrayBuffer(1024);
4worker.postMessage(buffer, [buffer]); // Transfer ownership to the Worker
5
6console.log(buffer.byteLength); // 0 (ownership moved)

• worker.postMessage() में दूसरे आर्ग्युमेंट के रूप में [buffer] पास करने पर, buffer को कॉपी करने के बजाय वर्कर को ट्रांसफर कर दिया जाता है।

• इसके बाद, मुख्य थ्रेड पर buffer खाली हो जाता है (byteLength 0 के साथ) और अब केवल वर्कर द्वारा ही उपयोग किया जा सकता है।

एक Worker को समाप्त करना

Worker का उपयोग करने के बाद इसे समाप्त कर देना चाहिए ताकि मेमोरी खपत को न्यूनतम किया जा सके। आप terminate विधि का उपयोग करके एक Worker को समाप्त कर सकते हैं।

1const worker = new Worker(new URL('./worker.ts', import.meta.url), { type: 'module' });
2// ...
3
4worker.terminate(); // Terminate the Worker

• यह कोड terminate मेथड का उपयोग करके वर्कर को समाप्त करता है।

Worker में अपवाद प्रबंधन

यदि Worker के भीतर कोई त्रुटि होती है, तो आप onerror इवेंट का उपयोग करके त्रुटि को संभाल सकते हैं।

1const worker = new Worker(new URL('./worker.ts', import.meta.url), { type: 'module' });
2
3worker.onerror = (error) => {
4    console.error("Error in Worker:", error.message);
5};

• यह कोड onerror इवेंट का उपयोग करके वर्कर के अंदर आने वाली त्रुटियों को पकड़ता और संभालता है।

सारांश

टाइपस्क्रिप्ट में Worker का उपयोग करके, आप मुख्य थ्रेड को स्मूथ रखते हुए पृष्ठभूमि में भारी कार्य निष्पादित कर सकते हैं। टाइप परिभाषाओं का उपयोग करके, संदेशों का आदान-प्रदान भी एक प्रकार-सुरक्षित तरीके से किया जा सकता है। डेटा आदान-प्रदान और थ्रेड प्रबंधन पर ध्यान देकर, आप प्रदर्शन सुधार और कुशल समवर्ती (Concurrency) प्राप्त कर सकते हैं।

आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।

YouTube Video