HTML5 Web Workers API

تقنية Web worker هو JavaScript مصممة خصيصًا للقيام بعمل في الخلفية بشكل مستقل عن البرامج النصية لواجهة المستخدم الأخرى ، دون التأثير على أداء الصفحة.

ما هو Web Worker؟

إذا حاولت القيام بمهمة باستخدام JavaScript ستستغرق وقتًا طويلاً وتصبح الصفحة غير مستجيبة حتى ينتهي البرنامج النصي، لأن كود JavaScript يعمل دائمًا في الـ front.

يقدم HTML5 تقنية جديدة تسمى Web worker المصممة خصيصًا للقيام بعمل في الخلفية بشكل مستقل عن البرامج النصية لواجهة المستخدم الأخرى ، دون التأثير على أداء الصفحة.

على عكس عمليات JavaScript العادية ، لا يقاطع الـ Web Worker المستخدم وتظل صفحة الويب مستجيبة لأنهم يقومون بتشغيل المهام في الخلفية.

إنشاء ملف Web Worker

لنقم بإنشاء ملف JavaScript خارجي باسم “worker_example.js” وكتابة الكود التالي به:

var i = 0;

function counterNumbers() {
    if (i < 20000) {
        i = i + 1;
        postMessage(i);
    }

    setTimeout("counterNumbers()", 500);
}
counterNumbers()

فى المثال السابق، تم إنشاء مهمة JavaScript (دالة بإسم “counterNumbers” تعد من صفر إلى 10000).

تُستخدم طريقة ()postMessage لإرسال رسالة (مثل المثال السابق) مرة أخرى إلى صفحة الويب من ملف الـ web worker.

عادة لا يتم استخدام الـ web workers لمثل هذه البرامج النصية البسيطة، ولكن لمزيد من المهام المكثفة لوحدة المعالجة المركزية CPU.

كيفية القيام بالعمل في الخلفية مع Web Worker؟

الآن بعد أن أصبح لدينا ملف Web worker ، نحتاج إلى إستدعائه من صفحة HTML، لكن يجب عليك إنشاء كائن Worker فى البداية.

إنشاء كائن Web Worker

مثال بسيط يوضح بنية (syntax) إنشاء كائن Worker جديد:

// For Create new Worker Web Object
var worker = new Worker("workers_example.js");

فى المثال السابق، قمنا بإنشاء كائن worker جديد، لكن يجب عليك التتحقق الأول مما إذا كان الـ worker موجودًا بالفعل أم لا، كالتالى:

if (typeof(worker) == "undefined") {
    worker = new Worker("workers_example.js");
}

بعد ذلك يمكننا إرسال واستقبال البيانات (messages) من عامل الويب، ولكى نقوم بذلك قم بإضافة حدث “onmessage” إلى عامل الويب، كالتالى:

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

يحتوي عنصر event.data على الرسالة المرسلة من عامل الويب.

إنهاء عامل الويب – Terminate a Web Worker

لا يتوقف عامل الويب عن أنفسهم ولكن يمكن للصفحة التي بدأت تشغيلهم إيقافهم عن طريق استدعاء طريقة ()terminate.

لإنهاء عامل الويب، استخدم طريقة ()terminate:

// Terminate a Web Worker
worker.terminate();

كيفية إعادة استخدام Web Worker؟

إذا قمت بتعيين المتغير العامل على undefind ، بعد أن تم إنهاؤه، يمكنك إعادة استخدام الكود بدون مشاكل، كالتالى:

// Set a worker variable to undefined
worker = undefined;

كيفية التحقق من دعم المستعرض؟ – Browser support

للتحقق من صحة دعم ميزة Web Worker في المستعرض، هناك أكثر من طريقة يمكنك إستخدمها:

if (typeof(Worker) !== "undefined") {
    // Congratulation, your browser support web worker!
    // And you can run any code here...
} else {
    // Sorry, your browser do not support web worker!
}

أو عن طريق هذا الكود:

if (window.Worker) {
    // Congratulation, your browser support web worker!
    // And you can run any code here...
} else {
    // Sorry, your browser do not support web worker!
}

مثال كامل على كل ما سبق

HTML Code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Web Worker Example</title>
    </head>
    <body>

        <h2>Web Worker Example</h2>
        <button type="button" onclick="startWorker()">Start Worker</button>
        <button type="button" onclick="stopWorker()">Stop Worker</button>
        <div id="result">
            <!--You will be Receive messages here-->
        </div>

    </body>
</html>

JavaScript Code:

var worker;

function startWorker() {
    if (window.Worker) {
        if (typeof(worker) == "undefined") {
            // Create a new web worker
            worker = new Worker("worker_example.js");
        }
        // Work when onMessage event handler
        worker.onmessage = function(event) {
            document.getElementById("result").innerHTML = event.data;
        };
    } else {
        document.getElementById("result").innerHTML = "Sorry, your browser do not support web worker!";
    }
}

function stopWorker() {
    worker.terminate();
    worker = undefined;
}