عامل الويب: طريقة لتشغيل البرامج النصية في الخلفية في مؤشر ترابط مختلف عن مؤشر الترابط الرئيسي (النافذة) الحالي.

1. العاملون على الويب مقابل غير المتزامنين باستخدام events_loop
2. مقدمة إلى العاملين على الويب
3. كيفية إنشاء عامل ويب
4. على سبيل المثال مع عامل الويب
5. حدود عمال الويب
6. عملية غير متزامنة في Web Workers

1. عمال الويب مقابل العمليات غير المتزامنة باستخدام حلقة الأحداث

تتعامل JavaScript عادةً مع العمليات غير المتزامنة عن طريق وضع المهام في قوائم الانتظار المقابلة (قائمة انتظار مهام الماكرو، وقائمة انتظار المهام الصغيرة)، مع قيام حلقة الحدث بالتحقق بشكل مستمر من قوائم الانتظار هذه ودفع المهام إلى مكدس الاستدعاءات عندما تكون جاهزة للتنفيذ. يضمن هذا الأسلوب التنفيذ غير المحظور ولكنه لا يزال يشغل كل شيء في سلسلة رسائل واحدة.

من ناحية أخرى، يسمح

عمال الويب بتشغيل البرامج النصية في سلسلة رسائل منفصلة تمامًا مع مكدس الاستدعاءات الخاص بها وقوائم الانتظار غير المتزامنة وحلقة الأحداث. يمنع هذا الفصل حظر الخيط الرئيسي بسبب العمليات الحسابية الثقيلة أو المهام طويلة الأمد، حيث يعمل العامل بشكل مستقل.

2. مقدمة لعمال الويب

يقوم عمال الويب بتنفيذ البرامج النصية في سياق مختلف عن سياق النافذة الرئيسية، مما يتيح التوازي في تطبيقات الويب. توفر Web Worker API عدة أنواع من العمال:

• العمال المخصصون: يتم استخدامها بواسطة برنامج نصي واحد، وهي مثالية لتفريغ المهام من سلسلة المحادثات الرئيسية.
• العاملون المشتركون: يمكن الوصول إليها من خلال نصوص برمجية متعددة تعمل في سياقات مختلفة (على سبيل المثال، نوافذ أو إطارات iframe مختلفة).
• عمال الخدمة: يعملون كخادم وكيل بين تطبيقات الويب والمتصفح والشبكة، مما يوفر وظائف مثل الدعم دون اتصال بالإنترنت والتخزين المؤقت.

تركز هذه المقالة على العاملين المتفانين، وهم الأكثر سهولة في التنفيذ والأكثر استخدامًا.

3. كيفية إنشاء عامل ويب

لإنشاء عامل ويب، يمكنك استخدام الطرق الرئيسية التالية:

• عامل جديد (): المُنشئ لإنشاء عامل جديد.
• postMessage(): يرسل رسائل من الموضوع الرئيسي إلى العامل أو العكس.
• onmessage: تم تعيين وظيفة رد الاتصال للتعامل مع الرسائل التي يتلقاها العامل.
• إنهاء (): إيقاف العامل على الفور.

4. مثال بسيط

لنقم بإنشاء عامل لجلب البيانات من واجهة برمجة التطبيقات (API)، وتحديدًا صور الكلاب من Dog CEO API.

4.1 قانون العامل

إليك تنفيذ البرنامج النصي العامل. لاحظ أنه داخل العامل، يتم استخدام self للإشارة إلى السياق العام:

if (window.Worker) {
    const worker = new Worker("/src/worker.js");
        worker.postMessage({ 
            operation: "get_dog_imgs",
            url: "https://dog.ceo/api/breeds/image/random", 
            count: 5   //number of photos
        });
        worker.onmessage = (e) => {
        console.log(e.data);
        if (e && e.data) {
            setdata((old) => [...old, e.data]); // update react state
            showCallStack(); // function to show the callstack 
        }
    };
    worker.onerror = (e) => {
        console.log(e);
    };
}

في هذا الرمز، يستمع العامل للرسائل (onmessage) ويجلب البيانات من عنوان URL المحدد عدة مرات كما هو محدد بواسطة العدد.

إليك ما يبدو عليه مكدس الاستدعاءات داخل العامل:

4.2 رمز العميل

يستخدم الخيط الرئيسي العامل مثل هذا:

self.onmessage = (event) => {
    const data = event.data;
    if (data && data.url && data.count) {
        fetchFromUrls(data.url, data.count);
    }
}
// fetch single data 
const fetchdata = async (url) => {
    const res = await self.fetch(url);
    return await res.json();
};

const fetchFromUrls = async (url, count) => {
    showCallStack(); // showing the callstack of the worker 
    for (const i of new Array(count).fill(0)) {
        let data = await fetchdata(url);
        if (data && data.message) {
            self.postMessage({ type: "img", data: data.message });
        }
    }
};

يوضح هذا الكود كيفية إرسال رسالة إلى العامل واستلام البيانات التي تم جلبها في الموضوع الرئيسي.

للحصول على الكود الكامل اذهب إلى الكود

5. حدود عمال الويب

بينما يعمل عمال الويب في سلسلة رسائل منفصلة عن سلسلة رسائل النافذة الرئيسية، إلا أنهم يأتون مع قيود معينة:

• لا يوجد وصول إلى DOM: لا يمكن للعمال التعامل مباشرة مع DOM. يعد التواصل مع الموضوع الرئيسي ضروريًا لتحديث واجهة المستخدم.
• استهلاك الموارد: يمكن أن يؤدي الإفراط في استخدام العاملين على الويب إلى استخدام الذاكرة بشكل كبير، حيث يحتاج كل عامل إلى موارد إضافية للعمل بشكل مستقل.