টাইপস্ক্রিপ্টে ওয়েব ওয়ার্কার
এই নিবন্ধে টাইপস্ক্রিপ্টে ওয়েব ওয়ার্কার সম্পর্কে ব্যাখ্যা করা হয়েছে।
আপনি Web Workers ধারণা এবং বিভিন্ন ব্যবহারিক পরামর্শ উদাহরণ সহ শিখতে পারেন।
YouTube Video
টাইপস্ক্রিপ্টে ওয়ার্কার
টাইপস্ক্রিপ্টে, একটি Worker প্রধান থ্রেড থেকে পৃথকভাবে পটভূমিতে প্রসেস সম্পাদনের জন্য একটি প্রক্রিয়া, যা জাভাস্ক্রিপ্ট ওয়েব ওয়ার্কারস API ব্যবহার করে। এর মাধ্যমে বড়ো হিসাব এবং অপ্রত্যক্ষ কাজগুলি ব্যবহারকারী ইন্টারফেসের কার্যক্রমে প্রভাব না ফেলেই সম্পাদিত হতে পারে।
Worker প্রধান থ্রেড (UI থ্রেড) এর সাথে সমান্তরালে কাজ করে এবং বার্তার মাধ্যমে থ্রেডগুলোর মধ্যে ডেটা বিনিময় করতে পারে। টাইপস্ক্রিপ্টেও, টাইপ নির্ভুল কোড লেখার সময় আপনি Worker ব্যবহার করতে পারেন।
ওয়ার্কারের মৌলিক ব্যবহার
-
ওয়ার্কার তৈরি করা
Worker-এর একটি ইনস্ট্যান্স তৈরি করুন এবং নির্দিষ্ট স্ক্রিপ্টটি কার্যকর করুন। সাধারণত স্ক্রিপ্টটি একটি পৃথক ফাইলে সংজ্ঞায়িত থাকে। -
বার্তা বিনিময়
postMessageএবংonmessageব্যবহার করে প্রধান থ্রেড এবংWorkerথ্রেডের মধ্যে বার্তা পাঠান এবং গ্রহণ করুন।
উদাহরণ: ওয়ার্কারের মৌলিক বাস্তবায়ন
- 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};- 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 সেটআপ করা
TypeScript-এ Worker ব্যবহার করার সময়, Webpack বা Vite এর মতো বাইন্ডলিং টুলের প্রয়োজন হতে পারে। এই টুলগুলি ব্যবহার করে, আপনি Worker স্ক্রিপ্ট সঠিকভাবে বাইন্ডল করতে পারবেন এবং এটি প্রধান থ্রেড থেকে অ্যাক্সেসযোগ্য করতে পারবেন।
যেমন, Vite ব্যবহার করার সময়, import.meta.url ব্যবহার করে সঠিকভাবে Worker আমদানি করুন।
1const worker = new Worker(new URL('./worker.ts', import.meta.url), { type: 'module' });- এটি নিশ্চিত করে যে বাইন্ডল করা
Workerস্ক্রিপ্ট সঠিকভাবে লোড হয়, যাWorkerব্যবহার করে প্রসেসিং সক্রিয় করে।
বার্তা প্রেরণ এবং সমান্তরালতার জন্য বিবেচনাগুলি
-
ডেটা কপি করা
প্রধান থ্রেড এবং
Workerথ্রেডের মধ্যে বার্তা প্রেরণ এবং গ্রহণ করার সময়, ডেটা কপি করা হয়। জটিল ডেটা যেমন অবজেক্টগুলির ক্ষেত্রে কাজ করার সময়, কর্মদক্ষতার বিষয়টি বিবেচনা করতে হবে। বারবার বড় পরিমাণে ডেটা আদান-প্রদান পারফরম্যান্সকে কমিয়ে দিতে পারে। -
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ইভেন্ট ব্যবহার করে ওয়ার্কারের ভিতরে ঘটা ত্রুটিগুলি ধরে ও পরিচালনা করে।
সারসংক্ষেপ
TypeScript-এ Worker ব্যবহার করে, আপনি ব্যাকগ্রাউন্ডে ভারী কাজ সম্পাদন করতে পারেন এবং প্রধান থ্রেড মসৃণ রাখতে পারেন। টাইপ ডেফিনিশনগুলি ব্যবহার করে, বার্তা আদান-প্রদান টাইপ-নিরাপদ ভাবে সম্পন্ন করা সম্ভব। ডেটা আদান-প্রদান এবং থ্রেড পরিচালনার প্রতি মনোযোগ দিয়ে, আপনি কর্মক্ষমতার উন্নতি এবং কার্যকর সমান্তরালতা অর্জন করতে পারেন।
আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।