HTML Web Workers

Web worker পিছনের ভাগে চলাচলকারী JavaScript-এর একটি, পাতার কার্যকারিতা প্রভাবিত করে না。

Web Worker কি?

যখন HTML পাতায় স্ক্রিপ্ট চলাচল করা হয়, পাতা প্রতিক্রিয়াহীন থাকে, স্ক্রিপ্ট সম্পূর্ণভাবে চলাচল করা পর্যন্ত。

Web worker পিছনের ভাগে চলাচলকারী JavaScript-এর একটি, অন্যান্য স্ক্রিপ্ট থেকে স্বাধীন, পাতার কার্যকারিতা প্রভাবিত করে না। আপনি যে কিছুই করতে পারেন: ক্লিক, কনটেন্ট পছন্দ করা ইত্যাদি, এই সময় web worker পিছনের ভাগে চলাচল করছে।

ব্রাউজার সমর্থন

টেবিলের সংখ্যা পূর্ণাত্মকভাবে Web Worker-এর সমর্থনকারী প্রথম ব্রাউজার সংস্করণ নির্দেশ করে。

API
Web Worker 4.0 10.0 3.5 4.0 11.5

HTML Web Workers প্রদর্শন

নিচের উদাহরণটি একটি সহজ web worker তৈরি করে, পিছনের ভাগে গণনা করে:

গণনা:

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

Web Worker সমর্থন পরীক্ষা

এক্স কর্মকর্তা তৈরির আগে, কার্যকরী ব্রাউজারটি Web Worker-এর সমর্থন করে কি জানুন:

if (typeof(Worker) !== "undefined") {
    // হ্যাঁ! Web worker-এর সমর্থন আছে!
    // কিছু কোড.....
}
    // ক্ষমা করুন! Web Worker-এর সমর্থন নেই!
}

Web Worker ফাইল তৈরি করুন

এখন, আমরা একটি বাহিরী JavaScript ফাইলে আমাদের web worker তৈরি করতে চাই।

এখানে, আমরা গণনা স্ক্রিপ্ট তৈরি করছি।এই স্ক্রিপ্ট "demo_workers.js" ফাইলে সংরক্ষিত হয়:

var i = 0;
function timedCount() {
    i = i + 1;
    postMessage(i);
    setTimeout("timedCount()",500);
}
timedCount();

এই কোডটির গুরুত্বপূর্ণ অংশটি postMessage() পদ্ধতি - এটি একটি বার্তা হলুদ পাতাকে পাঠানোর জন্য ব্যবহৃত হয়。

মন্তব্য: web worker-এর সাধারণত এত সহজ স্ক্রিপ্টটি ব্যবহার করা হয় না, বরং CPU সংস্থান যেমন কর্মকাণ্ডগুলিতে ব্যবহার করা হয়。

তৈরি করা Web Worker অবজেক্ট

এখন, আমরা web worker ফাইল পাচ্ছি, এবং এটিকে HTML পাতা থেকে আমরা ব্যবহার করতে চাই。

নিচের কোডটি কোনও worker স্থাপন করতে পরিশীল করে, যদি তা না থাকে, - তবে একটি নতুন web worker অবজেক্ট তৈরি করে, এবং "demo_workers.js"-এর কোডটি চলানো করে:

if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
}

তারপর, আমরা web worker থেকে বার্তা পাব এবং পাঠাতে পারব।

একটি "onmessage" ইভেন্ট লিস্টিনার যোগ করুন web worker-কে:

w.onmessage = function(event){
    document.getElementById("result").innerHTML = event.data;
};

যখন web worker বার্তা পাঠায়, তখন ইভেন্ট লিস্টিনারের কোডটি চলেছে।web worker থেকে পাওয়া ডাটা event.data-এ সংরক্ষিত হয়。

বন্ধ করা Web Worker

যখন web worker তৈরি হয়, তা বন্ধ হওয়া পর্যন্ত বাহিরী স্ক্রিপ্ট সমাপ্ত হওয়ার পরও বার্তা শুনতে চলেছে।

যদি আপনি web worker বন্ধ করতে চান এবং ব্রাউজার/কম্পিউটার সংস্থান মুক্ত করতে চান, terminate() পদ্ধতিকে ব্যবহার করুন:

w.terminate();

পুনর্ব্যবহার করা Web Worker

যদি আপনি worker বদলগুলিকে undefined করেন, তবে এই কোডটি পুনরায় ব্যবহার করা যাবে যখন তা বন্ধ হয়েছে:

w = undefined;

সম্পূর্ণ Web Worker উদাহরণ কোড

আমরা .js ফাইলের Worker 代码 দেখেছি।এখন এই হলুদ পাতার কোডটি এখানে রয়েছে:

উদাহরণ

<!DOCTYPE html>
<html>
<body>
<p>সংখ্যা গণনা: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>
<br><br>
<script>
var w;
function startWorker() {
    if(typeof(Worker) !== "undefined") {
        if(typeof(w) == "undefined") {
            w = new Worker("demo_workers.js");
        }
        w.onmessage = function(event) {
            document.getElementById("result").innerHTML = event.data;
        };
    }
        document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
    }
}
function stopWorker() { 
    w.terminate();
    w = undefined;
}
</script>
</body>
</html>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

Web Worker এবং DOM

কারণ web worker বাইরের ফাইলে অবস্থিত, তাই তারা নিম্নলিখিত JavaScript অবজেক্টকে পরিশীলন করতে পারে না:

  • window অবজেক্ট
  • document অবজেক্ট
  • parent অবজেক্ট