জাভাস্ক্রিপ্টে ওয়েব ওয়ার্কার্স

Articles

এই প্রবন্ধে জাভাস্ক্রিপ্টে ওয়েব ওয়ার্কার্স ব্যাখ্যা করা হয়েছে।

YouTube Video

javascript-web-worker.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4  <meta charset="UTF-8">
  5  <title>JavaScript &amp; HTML</title>
  6  <style>
  7    * {
  8        box-sizing: border-box;
  9    }
 10
 11    body {
 12        margin: 0;
 13        padding: 1em;
 14        padding-bottom: 10em;
 15        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 16        background-color: #f7f9fc;
 17        color: #333;
 18        line-height: 1.6;
 19    }
 20
 21    .container {
 22        max-width: 800px;
 23        margin: 0 auto;
 24        padding: 1em;
 25        background-color: #ffffff;
 26        border: 1px solid #ccc;
 27        border-radius: 10px;
 28        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 29    }
 30
 31    .container-flex {
 32        display: flex;
 33        flex-wrap: wrap;
 34        gap: 2em;
 35        max-width: 1000px;
 36        margin: 0 auto;
 37        padding: 1em;
 38        background-color: #ffffff;
 39        border: 1px solid #ccc;
 40        border-radius: 10px;
 41        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 42    }
 43
 44    .left-column, .right-column {
 45        flex: 1 1 200px;
 46        min-width: 200px;
 47    }
 48
 49    h1, h2 {
 50        font-size: 1.2rem;
 51        color: #007bff;
 52        margin-top: 0.5em;
 53        margin-bottom: 0.5em;
 54        border-left: 5px solid #007bff;
 55        padding-left: 0.6em;
 56        background-color: #e9f2ff;
 57    }
 58
 59    button {
 60        display: block;
 61        margin: 1em auto;
 62        padding: 0.75em 1.5em;
 63        font-size: 1rem;
 64        background-color: #007bff;
 65        color: white;
 66        border: none;
 67        border-radius: 6px;
 68        cursor: pointer;
 69        transition: background-color 0.3s ease;
 70    }
 71
 72    button:hover {
 73        background-color: #0056b3;
 74    }
 75
 76    #output {
 77        margin-top: 1em;
 78        background-color: #1e1e1e;
 79        color: #0f0;
 80        padding: 1em;
 81        border-radius: 8px;
 82        min-height: 200px;
 83        font-family: Consolas, monospace;
 84        font-size: 0.95rem;
 85        overflow-y: auto;
 86        white-space: pre-wrap;
 87    }
 88
 89    .highlight {
 90        outline: 3px solid #ffc107; /* yellow border */
 91        background-color: #fff8e1;  /* soft yellow background */
 92        transition: background-color 0.3s ease, outline 0.3s ease;
 93    }
 94
 95    .active {
 96        background-color: #28a745; /* green background */
 97        color: #fff;
 98        box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
 99        transition: background-color 0.3s ease, box-shadow 0.3s ease;
100    }
101  </style>
102</head>
103<body>
104    <div class="container">
105        <h1>JavaScript Console</h1>
106        <button id="executeBtn">Execute</button>
107        <div id="output"></div>
108    </div>
109
110    <script>
111        // Override console.log to display messages in the #output element
112        (function () {
113            // Override console.log
114            const originalLog = console.log;
115            console.log = function (...args) {
116                originalLog.apply(console, args);
117                const message = document.createElement('div');
118                message.textContent = args.map(String).join(' ');
119                output.appendChild(message);
120            };
121
122            // Override console.error
123            const originalError = console.error;
124            console.error = function (...args) {
125                originalError.apply(console, args);
126                const message = document.createElement('div');
127                message.textContent = args.map(String).join(' ');
128                message.style.color = 'red'; // Color error messages red
129                output.appendChild(message);
130            };
131        })();
132
133        document.getElementById('executeBtn').addEventListener('click', () => {
134            // Prevent multiple loads
135            if (document.getElementById('externalScript')) return;
136
137            const script = document.createElement('script');
138            script.src = 'javascript-web-worker.js';
139            script.id = 'externalScript';
140            //script.onload = () => console.log('javascript-web-worker.js loaded and executed.');
141            //script.onerror = () => console.log('Failed to load javascript-web-worker.js.');
142            document.body.appendChild(script);
143        });
144    </script>
145</body>
146</html>

জাভাস্ক্রিপ্টে `Web Worker`

জাভাস্ক্রিপ্টে Web Worker একটি ব্যবস্থাপনা, যা কোডকে প্রধান থ্রেডের থেকে আলাদা থ্রেডে চালানোর অনুমতি দেয়। এর ফলে ভারী গণনা এবং দীর্ঘমেয়াদী কাজগুলি অ্যাসিঙ্ক্রোনাসভাবে করা সম্ভব হয়, যাতে প্রধান থ্রেড ব্লক না হয়। Web Worker ব্যবহার করে, ব্যবহারকারী ইন্টারফেসের সাড়া উন্নত হয় এবং অ্যাপ্লিকেশনের কার্যক্ষমতা বৃদ্ধি পায়।

`Web Worker` এর মৌলিক প্রয়োগ

Web Worker-এর মৌলিক ব্যবহার দেখে নেওয়া যাক।

একটি জাভাস্ক্রিপ্ট ফাইল নির্দিষ্ট করে একটি নতুন Web Worker তৈরি করা হয়।

1// worker.js (created as a separate file)
2onmessage = function(event) {
3    // Receive a message
4    const data = event.data;
5    // Perform heavy computation or processing
6    const result = data * 2;
7    // Return the result to the main thread
8    postMessage(result);
9};

 1// Main thread (main.js)
 2const worker = new Worker('worker.js');
 3
 4// Send a message to the worker
 5worker.postMessage(10);
 6
 7// Receive a message from the worker
 8worker.onmessage = function(event) {
 9    console.log('Result from Worker: ', event.data); // Result: 20
10};
11
12// Error handling
13worker.onerror = function(error) {
14    console.error('Worker error: ', error);
15};

এই কোডটি দেখায় কিভাবে Web Worker ব্যবহার করে প্রধান থ্রেড থেকে গণনার অনুরোধ করা যায় এবং আসিঙ্ক্রোনাসভাবে ফলাফল পাওয়া যায়। এটি Web Worker-এ বার্তা হিসেবে 10 পাঠায় এবং 20 ফলাফল বার্তা হিসেবে গ্রহণ করে। প্রধান থ্রেড এবং Web Worker বার্তা পাঠানো ও গ্রহণের মাধ্যমে প্রক্রিয়াকরণের ফলাফল অনুরোধ ও গ্রহণ করে যোগাযোগ করে।

মৌলিক কার্যাবলী

Web Worker নিম্নলিখিত মৌলিক বৈশিষ্ট্যগুলো প্রদান করে।

postMessage এবং onmessage প্রধান থ্রেড এবং Web Worker-এর মধ্যে বার্তা পাঠানো ও গ্রহণের জন্য ব্যবহার হয়। postMessage দিয়ে ডেটা পাঠান এবং onmessage দিয়ে এটি গ্রহণ করুন।
থ্রেড স্বতন্ত্রতা Web Worker সম্পূর্ণভাবে প্রধান থ্রেডের থেকে স্বতন্ত্রভাবে কাজ করে। সুতরাং, প্রধান থ্রেডে সংজ্ঞায়িত ভ্যারিয়েবল এবং ফাংশন অ্যাক্সেস করা যায় না। প্রয়োজনীয় ডেটা postMessage এর মাধ্যমে পাস করতে হয়।
স্ক্রিপ্ট আমদানি Web Worker-এর মধ্যে বাহ্যিক স্ক্রিপ্ট লোড করতে importScripts() ব্যবহার করুন।

1// mathUtils.js
2function double(n) {
3    return n * 2;
4}

1// worker.js
2importScripts('mathUtils.js');
3
4onmessage = function(event) {
5    const input = event.data;
6    const result = double(input); // mathUtils.jsの関数を使用
7    postMessage(result);
8};

 1// Main thread (main.js)
 2const worker = new Worker('worker.js');
 3
 4// Send a message to the worker
 5worker.postMessage(10);
 6
 7// Receive a message from the worker
 8worker.onmessage = function(event) {
 9    console.log('Result from Worker: ', event.data); // Result: 20
10};
11
12// Error handling
13worker.onerror = function(error) {
14    console.error('Worker error: ', error);
15};

বিকল্পভাবে, নিচের মত import-ও ব্যবহার করতে পারেন।

1// lib.js
2
3// Simulated CPU-intensive task
4export function doHeavyWork(n) {
5    return n * 2;
6}

1// worker.js
2import { doHeavyWork } from './lib.js';
3
4self.onmessage = (event) => {
5  const data = event.data;
6  const result = doHeavyWork(data);
7  self.postMessage(result);
8};

 1// Main thread (main.js)
 2const worker = new Worker('worker.js', { type: 'module' });
 3
 4// Send a message to the worker
 5worker.postMessage(10);
 6
 7// Receive a message from the worker
 8worker.onmessage = function(event) {
 9    console.log('Result from Worker: ', event.data); // Result: 20
10};
11
12// Error handling
13worker.onerror = function(error) {
14    console.error('Worker error: ', error);
15};

new Worker-এর আর্গুমেন্টে type: 'module' নির্দিষ্ট করলে, আপনি worker-টিকে একটি ES মডিউল হিসাবে ব্যবহার করতে পারবেন এবং import সিনট্যাক্স ব্যবহার করতে পারবেন।

`Web Worker` এবং `async` ফাংশনের মধ্যে পার্থক্য

`Web Worker`

বৈশিষ্ট্যসমূহ

থ্রেড বিচ্ছিন্নতা Web Worker আলাদা থ্রেডে জাভাস্ক্রিপ্ট কোড কার্যকর করে। এই বৈশিষ্ট্যের মাধ্যমে মেইন থ্রেড (UI থ্রেড) ব্লক না করে ভারী গাণিতিক প্রসেসিং সম্পাদন করা যায়।
সমলগ্ন প্রক্রিয়াকরণ Web Worker ব্যবহার করলে জাভাস্ক্রিপ্ট প্রোগ্রামগুলি একাধিক থ্রেডে সমলগ্নভাবে কাজ করতে পারে।
বার্তা বিনিময় Web Worker এবং প্রধান থ্রেড সরাসরি ডেটা শেয়ার করে না এবং postMessage ও onmessage ব্যবহার করে বার্তা বিনিময় করে।
UI-তে প্রবেশ করা যাবে না Web Worker DOM-এ প্রবেশ করতে পারে না, তাই সরাসরি UI পরিবর্তন করতে পারে না।

প্রয়োগক্ষেত্র

এটি চিত্র প্রক্রিয়াকরণ, ডেটা বিশ্লেষণ এবং এনক্রিপশনের মতো ভারী গাণিতিক প্রসেসিংয়ের জন্য উপযুক্ত।
আপনি যখন মেইন থ্রেড ব্লক করতে চান না, তখন এটি ব্যবহার করা যেতে পারে।

`async`

বৈশিষ্ট্যসমূহ

আসিঙ্ক্রোনাস প্রক্রিয়াকে সহজীকরণ async ফাংশনটি আসিঙ্ক্রোনাস প্রক্রিয়াকে আরো পড়তে সহজ করার একটি সিনট্যাক্স, যা ভিতরে Promise ব্যবহার করে।
একক থ্রেড সব async ফাংশন প্রধান থ্রেডেই চলে। তাই, UI থ্রেড ব্লক হওয়া এড়ানোর জন্য বিকল্প পন্থা উদ্ভাবন করতে হবে।
I/O অপারেশনের জন্য উপযোগী এটি নেটওয়ার্ক যোগাযোগ ও ফাইল পড়ার মতো আসিঙ্ক্রোনাস কাজের জন্য উপযোগী, কিন্তু ভারী গণনার জন্য নয়।

প্রয়োগক্ষেত্র

এটি API কলের মতো নেটওয়ার্ক যোগাযোগের জন্য উপযোগী।
এটি ব্রাউজার API বা Node.js ব্যবহার করে ফাইল পড়া-লেখার জন্য উপযুক্ত।

মূল পার্থক্যসমূহ

বৈশিষ্ট্যসমূহ	Web Worker	async
সম্পাদনা পরিবেশ	পৃথক থ্রেড	প্রধান থ্রেড
উদ্দেশ্য	সমান্তরাল প্রক্রিয়া, ভারী গণনাগুলি স্থানান্তরিত করা	অ্যাসিঙ্খ প্রকিয়ার সুনির্দিষ্ট বর্ণনা
ডিওএম অ্যাক্সেস	সম্ভব নয়	সম্ভব
যোগাযোগ পদ্ধতি	বার্তা প্রেরণ (যেমন, `postMessage`)	প্রয়োজন নেই (সরাসরি ফাংশন কল বা `await` এর মাধ্যমে পরিচালনা করা হয়)
ব্যবহারের ক্ষেত্র	সময়সাপেক্ষ গণনা, ডেটা বিশ্লেষণ	I/O অপারেশনস, এপিআই কল

প্রতিটি কখন ব্যবহার করবেন

সিপিইউ-প্রধান কাজগুলোর জন্য, আপনি প্রধান থ্রেডের লোড কমানোর জন্য Web Worker ব্যবহার করতে পারেন। অন্যদিকে, নেটওয়ার্ক যোগাযোগ বা I/O অপারেশনের জন্য, আপনি async/await ব্যবহার করে আপনার কোড সহজ করতে পারেন।

উভয়টিকে সঠিকভাবে মিলিয়ে ব্যবহার করে, আপনি দক্ষ অ্যাসিঙ্খ প্রক্রিয়া অর্জন করতে পারেন।

`Web Worker` ব্যবহারের উদাহরণসমূহ

ভারী গণনা মূল থ্রেড থেকে সরানোর উদাহরণ

পরবর্তীটি হল ভারী গণনা অফলোড করার একটি উদাহরণ।

 1// worker.js
 2onmessage = function(event) {
 3    const num = event.data;
 4    const result = fibonacci(num);
 5    postMessage(result);
 6};
 7
 8function fibonacci(n) {
 9    if (n <= 1) return n;
10    return fibonacci(n - 1) + fibonacci(n - 2);
11}

1// Main thread
2const worker = new Worker('worker.js');
3
4worker.onmessage = function(event) {
5    console.log('Fibonacci result: ', event.data);
6};
7
8worker.postMessage(40); // Delegate heavy computation to the worker

এই কোডটি ওয়েব ওয়ার্কার ব্যবহার করে প্রধান থ্রেড থেকে ফিবোনাচ্চি সিরিজের মতো ভারী কাজ আলাদা করে সম্পাদন করার একটি উদাহরণ।

একটি টাস্কের নাম নির্ধারণ করার একটি উদাহরণ

পরবর্তীটি হল টাস্কের নাম নির্ধারণ করে বার্তা প্রেরণ এবং গ্রহণের একটি উদাহরণ।

 1// worker.js
 2self.onmessage = function(event) {
 3    switch (event.data.task) {
 4        case 'add':
 5            const result = event.data.a + event.data.b;
 6            self.postMessage({ task: 'result', value: result });
 7            break;
 8        default:
 9            self.postMessage({ task: 'error', message: 'Invalid Task' });
10    }
11};

 1// Main thread
 2const worker = new Worker('worker.js');
 3
 4worker.onmessage = function(event) {
 5    switch (event.data.task) {
 6        case 'result':
 7            console.log('Task result: ', event.data.value);
 8            break;
 9        case 'error':
10            console.error('Error: ', event.data.message);
11            break;
12    }
13};
14
15worker.postMessage({ task: 'add', a: 10, b: 20 });

এই কোডটি বার্তায় task নামের ভিত্তিতে প্রসেসিং পাঠানোর একটি উদাহরণ, যেখানে Web Worker টাস্কের নাম সহ গণনা ফলাফল বা ত্রুটি প্রধান থ্রেডে ফেরত পাঠায়।

নোটস

Web Worker ব্যবহার করার সময় নিম্নলিখিত বিষয়গুলো মনে রাখবেন।

DOM-এ প্রবেশ করা যাবে না Web Worker UI পরিবর্তন বা DOM-এ প্রবেশ করতে পারে না। DOM পরিচালনা প্রধান থ্রেডে সম্পন্ন করতে হবে।
যোগাযোগের অতিরিক্ত লোড প্রধান থ্রেড এবং Web Worker-এর মধ্যে ডেটা বিনিময় করার সময় কিছু অতিরিক্ত লোড থাকে। এর ফলে কার্যকারিতা প্রভাবিত হতে পারে, বিশেষত যখন ঘন ঘন বড় পরিমাণ ডেটা বিনিময় করা হয়।
সেম-অরিজিন নীতি Web Worker স্ক্রিপ্টগুলি সেম-অরিজিন নীতির অন্তর্ভুক্ত থাকে। স্ক্রিপ্ট ভিন্ন ডোমেইন থেকে লোড করা যাবে না।

Web Worker ব্যবহার করে আপনার অ্যাপ্লিকেশনের পারফরম্যান্স এবং প্রতিক্রিয়াশীলতা বাড়ানো যায়, তবে ডিওএম পরিচালনা করতে না পারার মতো সীমাবদ্ধতাগুলো বিবেচনা করে এটি যথাযথভাবে ব্যবহার করা গুরুত্বপূর্ণ।

আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।

YouTube Video

জাভাস্ক্রিপ্টে ফেচ/এক্সএমএলএইচটিটিপি রিকোয়েস্ট

জাভাস্ক্রিপ্টে ওয়েব ওয়ার্কার্স

YouTube Video

জাভাস্ক্রিপ্টে Web Worker

Web Worker এর মৌলিক প্রয়োগ

মৌলিক কার্যাবলী

Web Worker এবং async ফাংশনের মধ্যে পার্থক্য

Web Worker

বৈশিষ্ট্যসমূহ

প্রয়োগক্ষেত্র

async

বৈশিষ্ট্যসমূহ

প্রয়োগক্ষেত্র

মূল পার্থক্যসমূহ

প্রতিটি কখন ব্যবহার করবেন

Web Worker ব্যবহারের উদাহরণসমূহ

ভারী গণনা মূল থ্রেড থেকে সরানোর উদাহরণ

একটি টাস্কের নাম নির্ধারণ করার একটি উদাহরণ

নোটস

YouTube Video

জাভাস্ক্রিপ্টে `Web Worker`

`Web Worker` এর মৌলিক প্রয়োগ

`Web Worker` এবং `async` ফাংশনের মধ্যে পার্থক্য

`Web Worker`

`async`

`Web Worker` ব্যবহারের উদাহরণসমূহ