0

بلاگ

خدمات شبکه فراز نتورک > دانلود رایگان > وب مستر > آموزش HTML & CSS > Web Worker ها در HTML

Web Worker ها در HTML

2021/02/23
ارسال شده توسط
آموزش HTML & CSS
1.15k بازدید
html

Web Worker ها در HTML

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

منظور از web worker چیست؟ چگونه می‌توانیم از کارگردان های وب استفاده کنیم؟ کاربرد web worker ها در HTML چیست؟

  • 1 کارگردان های وب یا Web worker ها
    • 1.1 به طور کلی Web Wroker ها چه هستند؟
  • 2 بررسی پشتیبانی از کارگردان های وب
  • 3 ساخت یک کارگردان وب
  • 4 ساخت یک آبجکت Worker
    • 4.1 متوقف کردن یک Web Worker
    • 4.2 استفاده مجدد Web Worker
  • 5 یک مثال کامل از Web Worker
    • 5.1 ارتباط Web Worker و DOM

وب یا 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

از آنجایی که کارگردان های وب اسکریپت های بیرونی هستند، به آبجکت های زیر دسترسی ندارند:

  • آبجکت پنجره
  • آبجکت سند
  • آبجکت والد

تا اینجا  تونستیم با  Web Worker ها آشنا بشیم. امیدوارم به خوبی باهاشون آشنا شده باشید. ا

آشنایی با SSE در HTML

آموزش رویداد های ارسالی سرور در HTML

منظور از رویداد های ارسالی سرور چیست؟ منظور از SSE چیست؟ چگونه می‌توانیم از SSE در HTML استفاده کنیم؟ SSE چیست؟ منظور از API SSE چیست؟

  • 1 رویداد های ارسال شده سرور یا sse
  • 2 دریافت اعلان های sse
  • 3 بررسی پشتیبانی sse
  • 4 مثال کد سمت سرور
    • 4.1 کد های php در فایل (demo_sse.php)
    • 4.2 کد در asp  (فایل demo_sse.asp)
  • 5 آبجکت eventsource

رویداد های ارسال شده سرور یا sse

رویداد های ارسال شده سرور اجازه می دهند تا یک صفحه از سرور به روز شود.

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

نمونه های sse : facebook/twitter، به روز رسانی قیمت ارز و طلا، خبرخوان ها، اخبار ورزشی و …

دریافت اعلان های sse

از آبجکت eventsource برای دریافت اعلان های sse استفاده می شود.

var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
  document.getElementById("result").innerHTML += event.data + "<br>";
};

ساخت یک آبجکت eventsource جدید و تعیین url صفحه که آپدیت ها از آن ارسال می شوند.

هر بار که یک آپدیت دریافت می شود، رویداد onmessage اجرا می شود.

هنگامی که رویداد onmessage اتفاق می افتد، داده های دریافت شده برروی عنصر با شناسه result قرار می گیرند.

بررسی پشتیبانی sse

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

if(typeof(EventSource) !== "undefined") {
  // Yes! Server-sent events support!
  // Some code.....
} else {
  // Sorry! No server-sent events support..
}

مثال کد سمت سرور

برای به کار انداختن مثال بالا، باید یک سرور توانا در ارسال داده استفاده کنید(php یا asp)

قواعد ارسال داده مستمر سمت سرور ساده هستند. با تنظیم مقدار content-type به “text/event-stream”، شما می توانید اقدام به ارسال داده کنید.

کد های php در فایل (demo_sse.php)

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>

کد در asp  (فایل demo_sse.asp)

<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
%>

خط اول برای تنظیم content-type به “text/event-steam” استفاده شده است.

خط دوم برای نتظیم تعیین صفحه ای که نباید داده ها را در cache ثبت کند.

در خط سوم برای تنظیم خروج داده ها برای ارسال (همیشه با عبارت “data: ” شروع می شود.) از Write استفاده شده است.

و در خط آخر هم برای تراز کردن داده ها به سمت صفحه وب از Flush استفاده شده است.

آبجکت eventsource

در مثال بالا ما از رویداد onmessage برای دریافت پیام ها استفاده کردیم، اما رویداد های دیگری نیز در دسترس هستند:

رویداد توضیح
Onopen هنگام باز شدن یک اتصال به سرور
Onmessage هنگام دریافت داده از سرور
onerror هنگام برخوردن به یک خطا

نتیجه گیری

در این مقاله با  API جدید در HTML5 مربوط به سرور ها یعنی SSE آشنا شدیم. امیدوارم از این مقاله از سری آموزش‌هایHTML  استفاده کرده باشید.

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

جدیدترین اخبار مجموعه فراز نتورک را در این صفحه اجتماعی دنبال کنید.

نویسنده:راحله تبریزی

 

اشتراک گذاری:
برچسب ها:
در تلگرام
کانال ما را دنبال کنید!
در اینستاگرام
ما را دنبال کنید!

مطالب زیر را حتما مطالعه کنید

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