یک Web Worker چیست؟
Web Worker یک نوع کد جاوا اسکریپت است که در پس‌زمینه مستقل از سایر اسکریپت‌ها اجرا می‌شود، بدون اینکه بر عملکرد صفحه تأثیر بگذارد
پشتیبانی مرورگر
اعداد جدول اولین نسخه مرورگر را مشخص می کند که به طور کامل از Web Workers پشتیبانی می کند.
نمونه ای از HTML Web Workers
مثال زیر یک Web Worker ساده ایجاد می کند که اعداد را در پس زمینه می شمارد:
<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 در html
قبل از ایجاد Web Worker، بررسی کنید که آیا مرورگر کاربر از آن پشتیبانی می‌کند یا خیر:
if (typeof(Worker) !== "undefined") {
// Yes! Web worker support!
// Some code.....
} else {
// Sorry! No Web Worker support..
}
بیشتر بدانیم: خدمات گوگل ادوردز یا ادز (ads) + قیمت
ساخت یک فایل Web Worker
بیایید Web Worker خود را در با جاوا اسکریپت ایجاد کنیم.
اسکریپت در فایل "demo_workers.js" ذخیره می شود:
var i = 0;
function timedCount() {
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
بخش مهم کد بالا متد postMessage است - که برای ارسال یک پیام به صفحه HTML استفاده می شود.
توجه: معمولاً Web Worker ها برای چنین اسکریپت‌های ساده‌ای استفاده نمی‌شوند، بلکه برای کارهای فشرده‌تر CPU استفاده می‌شوند.
ساخت یک Web Worker Object
اکنون که فایل web worker را داریم، باید آن را از یک صفحه HTML فراخوانی کنیم.
خطوط زیر بررسی می‌کند که Worker از قبل وجود داشته باشد، در غیر این صورت یک شی Web Worker جدید ایجاد می‌کند و کد را در "demo_workers.js" اجرا می‌کند:
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
الان میتونیم با web worker پیام ارسال و دریافت کنیم
یک listiner رویداد "onmessage" را به Web Worker اضافه کنید.
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
زمانی که Web Worker پیامی را ارسال می‌کند، کد درون listiner رویداد اجرا می‌شود. داده های Web Worker در event.data ذخیره می شود.
خاتمه دادن به یک Web Worker
هنگامی که یک شی Web Worker ایجاد می شود، به گوش دادن به پیام ها (حتی پس از اتمام اسکریپت خارجی) ادامه می دهد تا زمانی که پایان یابد.
برای خاتمه دادن به Web Worker و منابع رایگان مرورگر/کامپیوتر، از متد ()terminate استفاده کنید:
w.terminate();
استفاده مجدد از Web Worker
اگر متغیر worker را روی undefined تنظیم کنید، پس از پایان یافتن آن، می توانید دوباره از کد استفاده کنید:
w = undefined;
کد مثال Full Web Worker
یک نمونه مثال کامل کد html و وب وورکر (آموزش 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>
بیشتر بدانیم : آموزش SSE API یا Server Side Events در html
توضیحت خیلی نسبت به سایتای دیگه ساده و راحت بود و خیلی خوب متوجه شدم.
دمت گرم.
خوشحالیم موجب یادگیری شما فراهم شده در سایت ما