X

X

X

HTML5 এ ওয়েব ওয়ার্কার ( Web Workers ) এর ব্যবহার


web worker ওয়েব পেজের কার্যকারিতা প্রভাবিত না করেই ব্যকগ্রাউন্ডে ক্রিয়াশীল থাকে ।


Web Worker কি ?

web worker এক ধরনের স্ক্রিপ্ট যা ওয়েব পেজের কার্যকারিতা প্রভাবিত না করেই ব্যকগ্রাউন্ড ক্রমাগত ক্রিয়াশীল থাকে। যখন web worker ব্যকগ্রাউন্ডে চলতে থাকে, তখন আপনি যা চান তা করতে পারেন, যেমন clicking, selecting things ইত্যাদি।


ব্রাউজার সাপোর্ট

যেসব ব্রাউজার web worker সাপোর্ট করে সেগুলোকে নিচে উল্লেখ্য করা হলো:

API
Web Workers 4.0 10.0 3.5 4.0 11.5

HTML এ Web Worker এর উদাহরণ

নীচের উদাহরণে web worker এর ব্যবহার দেখানো হলো:

Code Example

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support Web Workers.</p>

<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;
        };
    } else {
        document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers...";
    }
}

function stopWorker() { 
    w.terminate();
    w = undefined;
}
</script>

</body>
</html>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


ব্রাউজারে Web Worker সাপোর্ট করে কিনা চেক করে দেখুন

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

if (typeof(Worker) !== “undefined”) {
// Yes! Web worker support!
// Some code…..
} else {
// Sorry! No Web Worker support..
}

Web Worker File তৈরি করে নিন

প্রথমে বাহ্যিক জাভাস্ক্রিপ্ট ফাইলে “demo_workers.js” নামে web worker তৈরি করুন।

var i = 0;

function timedCount() {
i = i + 1;
postMessage(i);
setTimeout(“timedCount()”,500);
}

timedCount();

উপরের কোডের গুরুপ্তপূর্ণ অংশ হল postMessage() method – যেটি HTML পেজে message পোস্টের জন্যে ব্যবহার করা হয় ।

নোট : সাধারনত web worker সহজ স্ক্রিপ্টে ব্যবহার করা হয় না, তবে CPU দ্রুত কাজের জন্যে এবং দীর্ঘ সময়ের জন্য এটিকে ব্যবহার করা হয়।


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

web worker সাপোর্ট করে কিনা তা পরীক্ষা করার জন্যে নিম্নলিখিত লাইন ব্যবহার করতে হবে। যদি না থাকে, তাহলে নতুন Web Worker অবজেক্ট তৈরি করতে হবে ।

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

এখন ওয়েব পেজ থেকে বার্তা পাঠাতে ও গ্রহণ করতে পারবেন ।

web worker এর সাথে “onmessage” event listener এর সাথে যুক্ত করুন ।

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

যখন web worker একটি বার্তা পোস্ট করে, event listener এক্সিকিউট হয় ।


একটি Web Worker কে ধ্বংস করার পদ্ধতি

যখন একটি web worker object তৈরি করা হয়, এটি ক্রিয়াশীল হতে থাকে যতক্ষণ পর্যন্ত না web worker এর নিস্পত্তি ঘটে ।
web worker এর নিষ্পত্তির জন্যে terminate() method ব্যবহার করা প্রয়োজন ।

w.terminate();

Web Worker এর পুনঃব্যবহার

একটি web worker এর নিস্পত্তি বা অবসানের পরে যদি worker variable কে undefine করে দেওয়া হয়, তবে Web Worker কোডটিকে পুনঃব্যবহার করা যাবে ।

w = undefined;

পরিপূর্ণ Web Worker এর উদাহরণ

Code Example

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support Web Workers.</p>

<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;
        };
    } else {
        document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers...";
    }
}

function stopWorker() { 
    w.terminate();
    w = undefined;
}
</script>

</body>
</html>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Web Worker এবং the DOM

যেহেতু ওয়েব ওয়ার্কার বাহ্যিক ফাইল এবং এটি মূল থ্রেড এর বাইরে এক্সিকিউট হয়, এটি নিম্নলিখিত অবজেক্ট এক্সেস করতে পারে না:

  • window object
  • document object
  • parent object