API‌های کارگر وب

Web Worker یک JavaScript در پس‌زمینه است که تأثیری بر عملکرد صفحه ندارد.

Web Worker چیست؟

در هنگام اجرای اسکریپت در صفحه HTML، صفحه تا پایان اجرای اسکریپت غیرقابل پاسخ است.

Web Worker یک JavaScript در پس‌زمینه است که مستقل از سایر اسکریپت‌ها عمل می‌کند و تأثیری بر عملکرد صفحه ندارد. شما می‌توانید هر کاری که می‌خواهید انجام دهید: کلیک کردن، انتخاب محتوا و غیره، در حالی که Web Worker در پس‌زمینه اجرا می‌شود.

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه‌های اولیه مرورگرهایی هستند که Web Workers را به طور کامل پشتیبانی می‌کنند:

Chrome IE Firefox Safari Opera
Chrome 4 IE 10 Firefox 3.5 Safari 4 Opera 11.5
ژانویه 2010 سپتامبر 2012 ژوئن 2009 ژوئن 2009 ژوئن 2011

مثال Web Worker

در این مثال یک Web Worker ساده ایجاد می‌شود که در پس‌زمینه محاسبات انجام می‌دهد:

مثال

شمارش:

آموزش عملی

بررسی مرورگر Web Worker

قبل از ایجاد web worker، لطفاً بررسی کنید که مرورگر کاربر از آن پشتیبانی می‌کند:

اگر (typeof(Worker) !== "undefined") {
  // بله! پشتیبانی از Web worker!
  // کد برخی از...
} else {
  // متاسفم! پشتیبانی از Web Worker وجود ندارد..
}

ایجاد فایل Web Worker

حالا، بگذاريد كارگر Web خود را در JavaScript خارجي تكوين كنيم.

در اينجا، ما يك اسكريپت مهم ايجاد كرديم. كه در فايل "demo_workers.js" ذخيره شده است:

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

قسمت مهم كد بالا postMessage() مетод - براي ارسال پيام به صفحه HTML استفاده مي‌شود.

نكته:معمولاً web worker براي چنين اسكريپت‌هاي ساده استفاده نمي‌شود، بلكه براي كارهاي CPU محوري بكار مي‌رود.

تكوين كردن كارگر Web

حالا كه فايل web worker داريم، نياز داريم آن را از صفحه HTML كال كنيم.

كد زير خطي بررسي مي‌كند كه آيا 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 تكوين شده است، آن ادامه خواهد داد تا به دنبال پيام‌ها باشد (حتي بعد از اتمام اسكريپت‌هاي خارجي) تا زماني كه كنترل كننده آن كنترل كند.

براي كنترل كردن web worker و آزاد كردن منابع مرورگر/كامپيوتر، از terminate() روش:

w.terminate();

استفاده مجدد Web Worker

اگر متغير worker را به undefined تنظيم كنيد، پس از كنترل كردن آن، ميتوانيد از كد زير براي استفاده مجدد استفاده كنيد:

w = undefined;

كد كامل مثال Web Worker

ما كد كارگر را در فايل .js ديديم. در ادامه كد صفحه HTML است:

مثال

<!DOCTYPE html>
<html>
<body>
<p>شمارش اعداد: <output id="result"></output></p>
<button onclick="startWorker()">شروع كارگر</button>
<button onclick="stopWorker()">Stop Worker</button>
<script>
let w;
function startWorker() {
  if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
  }
  w.onmessage = function(event) {
    document.getElementById("result").innerHTML = event.data;
  };
}
function stopWorker() {
  w.terminate();
  w = undefined;
}
</script>
</body>
</html>

آموزش عملی

Web Worker و DOM

به دلیل اینکه Web Worker در فایل‌های خارجی قرار دارد، بنابراین نمی‌توانند به JavaScript objects زیر دسترسی داشته باشند:

  • شیء window
  • شیء document
  • شیء parent