HTML ویب ورکر

ویب ورکر، پس منظر میں چلنے والا جاوا اسکریپٹ ہے، صفحے کی کارکردگی پر اثر نہیں دیتا۔

ویب ورکر کیا ہے؟

جب HTML صفحے میں اسکریپٹ چلایا جاتا ہے تو صفحہ جواب دہی نہیں دیتا جاتا، جب تک اسکریپٹ مکمل نہیں ہوتا۔

ویب ورکر، پس منظر میں چلنے والا جاوا اسکریپٹ ہے، دوسرے اسکریپٹ سے مستقل ہے، اور صفحے کی کارکردگی پر اثر نہیں دیتا۔ آپ کرسکتے ہیں کہ کچھ کریں: کلک کریں، مطلب منتخب کریں وغیرہ، اور اس وقت ویب ورکر پس منظر میں چل رہا ہوگا۔

براؤزر پشتیبانی

جداول میں شمارا تائیں، ویب ورکر کو پورا پورا پشتیبانی کرنے والے پہلے براؤزر کی نسلیں کا نشان دہی کرتی ہیں。

ای پی آئی
ویب ورکر 4.0 10.0 3.5 4.0 11.5

HTML ویب ورکر مثال

درج ذیل مثال ایک سادے ویب ورکر بناتا ہے، جو پس منظر میں شمارش کرتا ہے:

شمارش:

به طور مستقیم امتحان کنید

ویب ورکر پشتیبانی جانچنا

ویب ورکر بنانے سے پہلے، آپ کا براؤزر ویب ورکر کو پشتیبانی کرتا ہے یا نہیں جانچنے کے لئے کریں:

if (typeof(Worker) !== "undefined") {
    // ہاں! ویب ورکر پشتیبانی کرتا ہے!
    // کچھ کوڈ.....
}
    // معذرت، ویب ورکر پشتیبانی نہیں کرتا!
}

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

حالا، بیایید Web Worker خود را در یک فایل JavaScript خارجی ایجاد کنیم.

در اینجا، ما اسکریپت شمارش را ایجاد می‌کنیم. این اسکریپت در فایل "demo_workers.js" ذخیره می‌شود:

var i = 0;
function timedCount() {
    i = i + 1;
    postMessage(i);
    setTimeout("timedCount()",500);
}
timedCount();

بخش مهم این کد روش postMessage() است - که برای ارسال یک پیام به صفحه HTML استفاده می‌شود.

نکته: Web Worker معمولاً برای اسکریپت‌های ساده استفاده نمی‌شود، بلکه برای وظایف بیشتری که منابع CPU بیشتری نیاز دارند، استفاده می‌شود.

ایجاد شیء Web Worker

حالا که فایل Web Worker را داریم، باید از صفحه HTML آن را فراخوانی کنیم.

این خط کد بررسی می‌کند که آیا worker وجود دارد یا خیر، اگر وجود ندارد، - یک شیء جدید Web Worker ایجاد می‌کند و کد در فایل "demo_workers.js" را اجرا می‌کند:

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

پس از این، می‌توانیم پیام‌ها را از Web Worker دریافت کنیم.

یک شنونده رویداد "onmessage" به Web Worker اضافه کنید:

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

هنگامی که Web Worker پیامی ارسال می‌کند، کد در شنونده رویداد اجرا می‌شود. داده‌های ارسالی از Web Worker در event.data ذخیره می‌شوند.

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

پس از ایجاد Web Worker، آن به شناسایی پیام‌ها ادامه می‌دهد (حتی پس از اتمام اسکریپت‌های خارجی) تا زمانی که پایان یابد.

برای پایان دادن به Web Worker و آزاد کردن منابع مرورگر/کامپیوتر، از روش terminate() استفاده کنید:

w.terminate();

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

اگر می‌خواهید متغیر worker را به undefined تنظیم کنید، می‌توانید این کد را پس از اتمام آن استفاده کنید:

w = undefined;

کد کامل مثال Web Worker

ما کد Worker در فایل .js را دیده‌ایم. در زیر کد صفحه HTML آورده شده است:

مثال

<!DOCTYPE html>
<html>
<body>
<p>شمارش اعداد: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>
<br><br>
<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;
        };
    }
        document.getElementById("result").innerHTML = "متاسفم! پشتیبانی از Web Worker وجود ندارد.";
    }
}
function stopWorker() { 
    w.terminate();
    w = undefined;
}
</script>
</body>
</html>

به طور مستقیم امتحان کنید

Web Worker و DOM

به دلیل اینکه Web Worker در فایل‌های خارجی قرار دارد، آنها نمی‌توانند به JavaScript منابع زیر دسترسی داشته باشند:

  • منبع window
  • منبع document
  • منبع parent