منظور از web worker چیست؟ چگونه می‌توانیم از کارگردان های وب استفاده کنیم؟ کاربرد web worker ها در HTML چیست؟
سرفصل‌های پست
کارگردان های وب یا Web worker ها
یک کارگردان وب یا Web Worker ، یک اسکریپت جاوا اسکریپت است که بدون تحت تاثیر قرار دادن کیفیت اجرای صفحه در پس زمینه اجرا می شود.
در این مقاله از فصل آشنایی با API ها با Web worker ها آشنا می‌شویم. پیشنهاد می‌کنم که مقاله مربوط به آشنایی با ذخیره سازی وب در HTML را نیز مطالعه کنید.
به طور کلی Web Wroker ها چه هستند؟
هنگامی که یک اسکریپت در صفحه html اجرا می شود، صفحه واکنش و پاسخگویی خود را تا زمان به پایان رسیدن اجرای اسکریپت از دست میدهد.
همانطور که در ابتدا توصیف شد، کارگردان وب یک فایل جاوا اسکریپت است که در پس زمینه اجرا می شود و مستقل از سایر اسکریپت ها عمل میکند. در هنگام اجرای این اسکریپت می توانید هر کاری که بخواهید در صفحه انجام دهید مانند: کلیک کردن، انتخاب کردن، کشیدن و …
بررسی پشتیبانی از کارگردان های وب
قبل از ساخت یک کارگردان وب، باید پشتیبانی مرورگر کاربر بررسی شود:
if (typeof(Worker) !== "undefined") {
// Yes! Web worker support!
// Some code.....
} else {
// Sorry! No Web Worker support..
}
ساخت یک کارگردان وب
حالا وقت ساخت یک کارگردان وب در یک فایل جاوا اسکریپت بیرونی است.
در اینجا، ما یک اسکریپت ایجاد می کنیم که شمارش می کند. این اسکریپت به نام “demo_worker.js” نام گذاری می‌شود.
var i = 0;
function timedCount() {
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
قسمت مهم کد بالا، تابع postmessage است که برای ارسال یک پیام به صفحه html استفاده می‌شود.
نکته: معمولا کارگردان های وب برای چنین موارد ساده ای مورد استفاده قرار نمی‌گیرند، وظیفه این اسکریپت ها انجام فعالیت های متمرکز بر cpu است.
ساخت یک آبجکت Worker
حالا ما یک فایل کارگردان وب داریم، باید آن را در صفحه وب فراخوانی کنیم.
خط های زیر بررسی می کند اگر کارگردان از قبل وجود ندارد آن را بسازد و اجرا کند.
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
پس از آن، ما می توانیم توسط کارگردان وب پیام دریافت و ارسال کنیم. برای این کار، یک رویداد onmessage به کارگردان وب اضافه می کنیم.
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
هنگامی که کارگردان وب یک متن ارسال می کند، کد داخل رویداد اجرا می شود. داده های مربوط به کارگردان در event.data ذخیره شده اند.
متوقف کردن یک Web Worker
هنگامی که یک آبجکت کارگردان وب ساخت می شود، منتظر پیام های ورودی می ماند(حتی پس از اتمام اجرای اسکریپت بیرونی) بنابراین برای متوقف کردن آن باید از کد terminate استفاده شود.
برای متوقف کردن یک کارگردان وب و آزاد کردن منابع مرورگر و کامپیوتر باید از تابع terminate استفاده شود.
w.terminate();
استفاده مجدد Web Worker
اگر مقدار متغیر worker را برابر با undefined قرار دهید، پس از متوقف شدن کارگردان وب، می توانید با استفاده از کد زیر آن را دوباره استفاده کنید.
w = undefined;
یک مثال کامل از Web Worker
تا اینجا یک مثال از کد های اسکریپت بیرونی دیده ایم، در ادامه کد های مربوط به صفحه html را قرار می دهیم:
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<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! No Web Worker support.";
}
}
function stopWorker() {
w.terminate();
w = undefined;
}
</script>
</body>
</html>
ارتباط Web Worker و DOM
از آنجایی که کارگردان های وب اسکریپت های بیرونی هستند، به آبجکت های زیر دسترسی ندارند:
- آبجکت پنجره
- آبجکت سند
- آبجکت والد
پایان ترم
[box type=”info” class=”question-from-users” width=””]چگونه یک web worker بسازیم؟
به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)
[/box]نتیجه گیری
در این مقاله از آموزش طراحی سایت با HTML تونستیم با Web Worker ها آشنا بشیم. امیدوارم به خوبی باهاشون آشنا شده باشید. اگر سوال، پیشنهاد یا انتقادی داشتید لطفا آن را با من در میان بگذارید و من در سریع ترین زمان ممکن بهتون پاسخ میدم. تا مقاله بعدی فعلا…
یک پاسخ
سلام و عرض خدا قوت
ممنون از اموزشتون
سوالم اینجاس که من با signalr پیام هارو در نوتیفیکیشن ویندوز نمایش میدم
میخوام هنگامی که مرورگر بسته هم هست پیام هارو دریافت و نمایش بدم.
ممنون میشم یه مثال ازش بزنید