Web
Worker چیست؟ Web Worker (در لغت به مضمون خدمتکار یا این که کارگذار وب) کدهای جاوا اسکریپتی می باشند که در پس موضوع در حالا اجرا شدن هستند، فارغ از اینکه همت و سرعت وب وبسایت ما را مبتلا اختلال کنند . در واقع زمانی که اسکریپت های ما در ورقه ی HTML اجرا می شوند، تا نقطه پایان اجرای اسکریپت، ورقه متوقف می شود و واکنش نشان نمی دهد .
در طرف مقابل web worker ها میباشند که در پس مسئله اجرا می شوند، از کدهای دیگر غیروابسته میباشند و روی عملکرد و سرعت وبسایت هیچ تاثیری نمی گذارند . بنابراین زمانی که web worker ها در درحال حاضر فعالیت هستند، کاربر می تواند هر کاری دوست دارد بکند (کلیک کردن، select کردن و … .) .
موقعیت
پشتیبانی از این خصوصیت در مرورگر های مطرح دنیا به این شرح است:
مرورگر کروم فایرفاکس اپرا سافاری اینترنت
اکسپلورر یا این که Edge نسخه 4 .0 3 .5 11 .5 4 .0 10 .0
در
مثال پایین یک web worker بی آلایش تولید کرده ایم که ثانیه ها را در پس موضوع می شمارد:
html>
Count
numbers:
dir='rtl' onclick="startWorker()">شروع به فعالیت web worker dir='rtl' onclick="stopWorker()">پایان عمل web worker
هشدار:Internet Explorer 9 و نسخه
های کهن خیس آن از قابلیت web worker ها پشتیبانی نمی کنند .
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
html>
Count
numbers:
dir='rtl' onclick="startWorker()">شروع به فعالیت web worker dir='rtl' onclick="stopWorker()">پایان عمل web worker
هشدار:Internet Explorer 9 و نسخه
های قدیمی خیس آن از قابلیت و امکان web worker ها پشتیبانی نمی نمایند .
مشاهده
ی خروجی در JSBin
ولی
همیشه خوب تر است قبلی از عمل با web worker ها از پشتیبانی مرورگر استفاده کننده مطمئن شوید:
if
(typeof(Worker) !== "undefined") {
// Web worker کار می کند! // کد های مورد نظرتان را اینجا بنویسید .
}
else {
// متاسفانه Web worker برای شما عمل نمی کند }
1
2
3
4
5
6
if
(typeof(Worker) !== "undefined") {
// Web worker کار می کند! // کد های موضوع نظرتان را اینجا بنویسید .
}
else {
// متاسفانه Web worker برای شما فعالیت نمی کند }
تولید
یک web worker بیایید یک web worker در یک پوشه جاوا اسکریپت (به صورت external) بسازیم . اسکریپت تحت یک شمارش گر میباشد و در فولدر demo_workers .js
قرار داده گردیده است:
var
i = 0;
function
timedCount() {
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500); }
timedCount();
1
2
3
4
5
6
7
8
9
var
i = 0;
function
timedCount() {
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500); }
timedCount();
قسمت اساسی این کد ()postMessage است که کارش ارسال یک پیام به HTML است .
نکته: این فقط یک نمونه برای آشنایی شماست . در واقعیت معمولا برای چنین اسکریپت ساده ای از web worker ها استفاده نمی شود بلکه در مواردی زمینه به کارگیری قرار می گیرند که اسکریپت، CPU و توان پردازشی زیادی اشغال نماید .
حالا که فایل اسکریپت قضیه نظرمان را داریم باید آن را از صفحه ی HTML صدا بزنیم . کد پایین بررسی می کند تا ببیند آیا در هم اکنون حاضر worker ای وجود دارد یا این که خیر . در‌صورتی‌که هیچ worker ای وجود نداشته باشد، یک شیء worker تازه می سازد و کد های فایل demo_workers .js
را اجرا می کند:
if
(typeof(w) == "undefined") { w = new Worker("demo_workers .js");
}
1
2
3
if
(typeof(w) == "undefined") { w = new Worker("demo_workers .js");
}
هم اکنون می توانیم از طریق web worker پیام هایی را ارسال و اخذ کنیم .
در اینجا یک event listener از دسته رویداد onmessage را به worker خود بیش تر می کنیم:
w .onmessage
= function(event){ document .getElementById("result") .innerHTML = event .data;
};
1
2
3
w .onmessage
= function(event){ document .getElementById("result") .innerHTML = event .data;
};
زمانی که worker ما پیامی را ارسال کند، event listener اجرا خواهد شد . همچنین داده هایی که از worker ارسال می شوند در event .data ذخیره خواهند شد .
اما می بایست حواسمان به نکته ای دیگر هم باشد؛ زمانی که شیء web worker ساخته می شود، چه بسا پس از نقطه پایان اجرای اسکریپت، در درحال حاضر گوش دادن (listen) به پیام های نو میباشد مگر اینکه آن را از بین ببریم .
برای از دربین بردن web worker ها و رها کردن منابع سیستمی استفاده کننده از امر پایین به کار گیری کنید:
w .terminate();
1
w .terminate();
اگر
پس از حذف worker، متغیر اش را برابر با undefined نمایید می توانید مجدد از کد گذشته به کار گیری کنید:
w
= undefined; 1
w
= undefined; درحال حاضر
می توانیم تماما متوجه کد زیر شویم:
html>
Count
numbers:
dir='rtl' onclick="startWorker()">شروع به فعالیت web worker dir='rtl' onclick="stopWorker()">پایان کار web worker
هشدار:Internet Explorer 9 و نسخه
های قدیمی خیس آن از قابلیت web worker ها پشتیبانی نمی نمایند .
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
html>
Count
numbers:
dir='rtl' onclick="startWorker()">شروع به فعالیت web worker dir='rtl' onclick="stopWorker()">پایان عمل web worker
هشدار:Internet Explorer 9 و ورژن
های قدیمی خیس آن از امکان web worker ها پشتیبانی نمی نمایند .
مشاهده
ی خروجی در JSBin
نکته:
از آنجایی که web worker ها در فولدر های فرنگی (External) هستند، به شی ءها جاوا اسکریپت ذیل دسترسی ندارند:
window
object document
object parent
object Server-Sent
Event چیست؟ Server-Sent Event یا به طور مخفف SSE (در لغت به معنی «رویداد های ارسالی از سمت سرور») به صفحات اینترنت اذن می دهند که به طور اتومات و قلم از سرور بروزرسانی دریافت نمایند .
این امکان از گذشته نیز در HTML آماده بود البته خودکار فقدان و کاغذ می بایست از سرور سوال می کرد که آیا بروزرسانی جدیدی وجود داراست یا این که نه . مثال های این دسته روی داد ها را در به روز های Facebook و Twitter، تارنما های اعلام نرخ بورس (که به صورت لحظه ای بروزرسانی می شوند)، فید های خبر‌ها و … چشم اید .