এইচটিএমএল৫ ওয়েব ওয়ার্কার - HTML5 Web Worker


একটি ওয়েব ওয়ার্কার হল কোন ওয়েব পেজের ব্যাকগ্রাউন্ডে চলা একটি জাভাস্ক্রিপ্ট ফাইল, যা ওয়েব পেজের কার্যকারিতা কে কোনরূপ প্রভাবিত না করেই কাজ করে।


ওয়েব ওয়ার্কার কি?

কোন এইচটিএমএল পেজে যখন কোন জাভাস্ক্রিপ্ট execute করে, execute শেষ না হওয়ার আগে পর্যন্ত ওয়েব পেজটি রেস্পন্সিভ থাকে না।

ওয়েব ওয়ার্কার হল একটি জাভাস্ক্রিপ্ট ফাইল যা ব্যাকগ্রাউন্ডে চলে, এটা অন্য কোন স্ক্রিপ্টে বাধা প্রদান করে না এবং যা ওয়েব পেজের কার্যকারিতা কে কোনরূপ প্রভাবিত করে না। ওয়েব ওয়ার্কার ব্যাকগ্রাউন্ডে চলা অবস্থায় আপনি যা করতে চান তা চালিয়ে যেতে পারেন, যেমন - ক্লিক করা, জিনিসগুলি নির্বাচন করা, ইত্যাদি।

এইচটিএমএল এর ওয়েব ওয়ার্কার সম্পর্কে জানতে W3C এর Web Workers ওয়েব পেজটি ব্রাউজ করুন।


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

টেবিলে প্রদর্শিত সংখ্যাগুলো ব্রাউজারের সেই প্রথম ভার্সন নির্দেশ করে যেগুলো সম্পূর্ণ ভাবে ওয়েব ওয়ার্কার সমর্থন বা support করে।

API
ওয়েব ওয়ার্কার 4.0 10.0 3.5 4.0 11.5


ওয়েব ওয়ার্কারের উদাহরণ

নিচের উদাহরণটি দেখুন, এখানে একটি সহজ ওয়েব ওয়ার্কার তৈরি করা হয়েছে, যা ব্যাকগ্রাউন্ডে সংখ্যা গণনা করে।

উদাহরণ


<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>

কোড এডিটর



ব্যবহারকারীর ব্রাউজারে সমর্থন বা support পরীক্ষা

ওয়েব ওয়ার্কার তৈরি করার আগে ব্যবহারকারীর ব্রাউজারটি এটি সমর্থন বা support করে কিনা তা পরীক্ষা করুন। এর জন্য নিচের কোড গুলো ব্যাবহার করা যায়।

উদাহরণ


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

কোড এডিটর



ওয়েব ওয়ার্কার ফাইল তৈরি

এখন, আমরা একটি বহিঃস্থ বা external জাভাস্ক্রিপ্ট ফাইলে একটি ওয়েব ওয়ার্কার তৈরি করব ।
আমরা একটি স্ক্রিপ্ট তৈরি করেছি, যেটা গননা করে। স্ক্রিপ্টটি "workers.js" নামে ফাইল এ সংরক্ষিত করা হয়েছে।

উদাহরণ


var i = 0;

function timedCount() {
i = i + 1;
postMessage(i);
setTimeout("timedCount()",700);
}

timedCount();

কোড এডিটর


এখানে সব থেকে গুরুত্বপূর্ণ অংশ হল postMessage() মেথডটি, এটা এইচটিএমএল পেজে একটি বার্তা বা message ফেরত করতে ব্যবহৃত হয়।

নোট - সাধারণত ওয়েব ওয়ার্কার গুলো সাধারণ স্ক্রিপ্টের জন্য ব্যবহার করা হয় না, CPU সংশ্লিষ্ট কাজের জন্য বাবহার করা হয়।


ওয়েব ওয়ার্কার অবজেক্ট

এখন ওয়েব ওয়ার্কার ফাইলটি একটি এইচটিএমএল পেজে কল করতে হবে।

নিচের কোড গুলো পরীক্ষা করে যে যদি ওয়েব ওয়ার্কার ইতিমধ্যেই বিদ্যমান বা exists হয়েছে কি হয়নি? - না হলে একটি নতুন ওয়েব ওয়ার্কার অবজেক্ট তৈরি করে এবং "workers.js" কোডটি চালায়।

উদাহরণ


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

কোড এডিটর


তারপর আমরা ওয়েব ওয়ার্কারের কাছ থেকে বার্তা বা message পাঠাতে ও গ্রহণ করতে পারি। একটি "onmessage" ইভেন্ট যোগ করেছি।

উদাহরণ


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

কোড এডিটর


ওয়েব ওয়ার্কার একটি বার্তা বা message পোস্ট করার সময়, ইভেন্ট listener এর মধ্যে কোড নির্বাহ করা হয়। ওয়েব ওয়ার্কারের তথ্য data.data নামের ফাইল এ সংরক্ষণ বা save করা হয়।


ওয়েব ওয়ার্কার শেষ করা

যখন একটি ওয়েব ওয়ার্কার অবজেক্ট তৈরি হয় তখন এটি বার্তা বা message এর শেষ না হওয়া পর্যন্ত বার্তা বা message গুলি কাজ করতে থাকবে। এমনকি বহিঃস্থ স্ক্রিপ্ট শেষ হওয়ার পরেও।

একটি ওয়েব ওয়ার্কার এর কাজ শেষ করতে অর্থাৎ ব্রাউজার বা কম্পিউটারকে ফ্রী করতে terminate() মেথড ব্যাবহার করতে হবে। নিচে এর কোড দেখুন।

উদাহরণ


w.terminate();

কোড এডিটর



পুনরায় ব্যাবহার করা

যদি ওয়ার্কার ভেরিয়েবলকে অনির্দিষ্ট ভাবে নির্ধারণ করা হয়, এটি বন্ধ হয়ে যাওয়ার পরে, কোড পুনরায় ব্যবহার করা যায়।

উদাহরণ


w = undefined;

কোড এডিটর



ওয়েব ওয়ার্কারের উদাহরণ

আমরা ইতিমধ্যে .js ফাইলে ওয়েব ওয়ার্কার এর কোড দেখেছি। নীচে এইচটিএমএল পেজের জন্য কোড দেখুন।

উদাহরণ


<!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>

কোড এডিটর



ওয়েব ওয়ার্কার এবং DOM

যেহেতু ওয়েব ওয়ার্কার গুলো বহিঃস্থ ফাইলে থাকে, তাই ওয়েব ওয়ার্কার গুলো জাভাস্ক্রিপ্টের নিম্ন লিখিত অবজেক্ট গুলো access করতে পারে না।