آشنایی با Web Worker ها در HTML

انجام عملیات در پس زمینه با Web Worker ها در HTML

آشنایی با web worker ها
آشنایی با web worker ها

منظور از 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 ها آشنا بشیم. امیدوارم به خوبی باهاشون آشنا شده باشید. اگر سوال، پیشنهاد یا انتقادی داشتید لطفا آن را با من در میان بگذارید و من در سریع ترین زمان ممکن بهتون پاسخ میدم. تا مقاله بعدی فعلا…

فیلم آموزشی asp.net core 2

علی اسماعیلی
درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم…
سرفصل های آموزش HTML
پایین سرفصل های HTML هست، روی منم کلیک کنی میتونی ببینی.
فصل ۸ – کار با جدول در HTML

روی فصل بالا کلیک کنید.

ازمون HTML شرکت کن

روی لینک بالا کلیک کن

فیلم آموزشی asp.net core 2

1 نظر

یک پاسخ

  1. سلام و عرض خدا قوت
    ممنون از اموزشتون
    سوالم اینجاس که من با signalr پیام هارو در نوتیفیکیشن ویندوز نمایش میدم

    میخوام هنگامی که مرورگر بسته هم هست پیام هارو دریافت و نمایش بدم.
    ممنون میشم یه مثال ازش بزنید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر