HTML5 مفهومی به نام web worker را مدتها پیش معرفی کرد. ما در این مقاله قصد داریم استفاده از web worker را در یک سناریوی حقیقی مرور کنیم. در این مقاله مثال هایی از کاربرد های متفاوت web worker را با هم مرور میکنیم.

بطور خلاصه میتوان گفت web worker یک کد JavaScript است که در پس زمینه صفحه اجرا میشود (بدون نیاز به refresh کردن صفحه) و بدون اعمال سربار بر روی صفحه است. درواقع این بدین معنی است که شما میتوانید از وب سایت خود استفاده کرده و در صفحه کلیک کنید در حالی که web worker در پس زمینه در حال انجام عملیات مربوط به خود است.

Web worker مستقل از سایر اسکریپت ها اجرا میشود بنابرین plumbing کد بسیار آسان است. که امروزه بسیاری از مرورگرها مثل Google Chrome، Internet Explorer(10 به بعد)، Firefox و غیره آن را پشتیبانی میکنند.

آیا Web Worker برای توسعه کار ما پشتیبانی میشود؟

این سوالی است که ذهن را به خود مشغول میکند اما اجازه دهید با یک بررسی کوچک در سناریوی خود ببینیم که آیا این پشتیبانی میشود یا خیر.

نمونه کد زیر را مشاهده نمایید.

    <script>
        if (typeof (Worker) !== "undefined") {
            alert("بله، مرورگر شما Web Worker را پشتیبانی میکند.");
        } else {
            alert("خیر، مرورگر شما Web Worker را پشتیبانی نمیکند.");
        }
    </script>

پس از اجرای اسکریپت فوق اگر پاسخ "بله" بود ما بخوبی میتوانیم از web worker استفاده کنیم.

اکنون به برسی syntax اولیه برای شروع میپردازیم.

ایجاد یک Object در Web Worker

var worker = new Worker(“worker.js”);  

ارسال پیام با استفاده از web worker

برای ارسال پیام از web worker ما باید یک onmessage برای event listener  در نقش worker  اضافه کنیم.

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

پایان دادن به کار Web Worker

هنگامی که کار ما با نقش Web Worker به پایان رسید باید منابع مرورگر را آزاد کنیم.

w.terminate();  

استفاده مجدد از web worker

ما میتوانیم یک web worker را مجددا برای انجام ویژگی های پویا استفاده کنیم.

w = undefined;  

هنگامی که ما متغیر web worker را undefined تنظیم کردیم میتوانیم آن را برای اهداف متفاوت تنظیم کنیم.

سناریوهای پیاده سازی Web Worker

شما میتوانید نحوه استفاده برنامه نویسان از web worker را بشکل Web Worker File و Inline code مشاهده نمایید.

ما میتوانیم انواع پیچیده مانند File، Blob، ArrayBuffer و JSON را به داخل یا خارج Worker ها انتقال دهیم.

استفاده از Web Worker  در File

همانطور که قبلا بحث شد Web worker مستقل از اسکریپت های دیگر انجام میشود. ما میتوانیم یک فایل js ایجاد کنیم که تعیین کننده کار یک worker باشد.

در اینجا ما با یک مثال ساده از تایمر شروع میکنیم.

یک فایل JS با نام timer.js ایجاد نمایید.

در داخل فایل کد زیر را که مقدار شمارنده time را 1 واحد افزایش میدهد اضافه نمایید.

var time = 0;  
  
function timer() {  
    time = time + 1;  
    postMessage(i);  
    setTimeout("timer()", 100);  
}  
timer();  

و در صفحه ما از کد بالا از timer.js برای اجرای web worker استفاده میکنیم.

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

استفاده از کد Inline

همچنین بصورت inline میتوان از web worker استفاده کرد.

اکنون به جای فایل یک function برای web worker ایجاد نمایید.

function webRoleFunction() {  
    setInterval(function() {  
        time = time + 1;  
        postMessage(i);  
    }, 100);  
}  

اکنون باید تابع را به معادل string تبدیل کنیم. 

var code = webRoleFunction.toString();  
code = code.substring(code.indexOf("{") + 1, code.lastIndexOf("}")); 

حالا یک BLOB برای ذخیره سازی کد بالا ایجاد میکنیم.

var blob = new Blob([code], { type: "application/javascript" });  
var blobURL = window.URL.createObjectURL(blob);  
var w = new Worker(blobURL);  

Blob در واقع URL های منحصر به فردی هستند برای طول عمر درخواست های گذشته شما هستند. و از آنها بلافاصله استفاده میکنیم.

window.URL.revokeObjectURL(blobURL);  

Load کردن اسکریپت های خارجی

Web worker در در thread خود اجرا میشوند. پس شما برای لود کردن اسکریپت های خارجی باید از URL های مطلق استفاده نماید. و با این نکته توجه داشته باشید که آدرس دهی نسبی برای فایل های خارجی کار نخواهد کرد.

importScripts() برای بارگذاری فایل های خارجی است.

w.onmessage = function (e) {  
var data = e.data;  
  
  if (data.url) {  
var url = data.url.href;  
var index = url.indexOf('index.html');  
if (index != -1){  
url = url.substring(0, index);  
}  
importScripts(url + 'externalScript.js');  
 }  
}  

مدیریت خطا ها

ما باید یک منطق جاوا اسکریپتی برای رسیدگی به خطا های web worker داشته باشیم. کد زیر بدین منظور نوشته شده است.

var worker = new Worker('workerWithError.js');  
worker.addEventListener('message', onMsg, false);  
worker.addEventListener('error', onError, false);  
worker.postMessage();