JavaScript Academy · درس

التراسل باستخدام postMessage

تواصلوا بين الخيط الرئيسي والعامل.

التراسل باستخدام postMessage درس مجاني في JavaScript Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في JavaScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

التواصل باستخدام الرسائل

بما أن الخيط الرئيسي والعامل يملكان ذاكرة منفصلة، فإنهما يتواصلان عبر تمرير الرسائل. ترسل الدالة postMessage البيانات، بينما يستقبلها حدث message.

الإرسال إلى Worker

من الخيط الرئيسي، استدعِ worker.postMessage(data). ويمكن أن تكون البيانات أي قيمة تقريبًا: أرقامًا أو سلاسل نصية أو كائنات أو مصفوفات.

const worker = new Worker('worker.js');
worker.postMessage({ task: 'sum', numbers: [1, 2, 3, 4] });

الاستقبال في العامل

داخل العامل، عالج حدث message. تصل القيمة المُرسلة في event.data.

// worker.js
self.onmessage = (event) => {
  const { task, numbers } = event.data;
  console.log('worker received task:', task);
};

إرسال رد

يحسب العامل نتيجة ويرسلها مرة أخرى باستخدام postMessage الخاص به (باستخدام self أو الكائن العام الضمني).

// worker.js
self.onmessage = (event) => {
  const { numbers } = event.data;
  const total = numbers.reduce((a, b) => a + b, 0);
  self.postMessage(total); // send result back
};

استقبال الرد

بالعودة إلى الخيط الرئيسي، استمع إلى message على كائن العامل للحصول على النتيجة.

worker.onmessage = (event) => {
  console.log('result from worker:', event.data);
};

أسلوب addEventListener

يمكنكم استخدام addEventListener('message', ...) بدلًا من الخاصية onmessage. يتيح ذلك إضافة مستمعين متعددين.

worker.addEventListener('message', (event) => {
  console.log('got:', event.data);
});

الاستنساخ المنظم

تُنسخ الرسائل باستخدام خوارزمية الاستنساخ المنظم، ولا تتم مشاركتها. وهي تتعامل مع الكائنات والمصفوفات وMaps وSets وDates والمصفوفات المعرّفة النوع، لكنها لا تتعامل مع الدوال أو عقد DOM أو أساليب الأصناف.

// OK to send: numbers, strings, plain objects, arrays,
// Map, Set, Date, ArrayBuffer, typed arrays.
// NOT cloneable: functions, DOM nodes, Error stacks lost.

بروتوكول للرسائل

عند تنفيذ عمليات متعددة، أرسل حقل type لكي يعرف العامل ما الذي ينبغي فعله. يحافظ ذلك على مرونة العامل الواحد.

// main:
worker.postMessage({ type: 'multiply', a: 6, b: 7 });

// worker.js:
self.onmessage = (e) => {
  if (e.data.type === 'multiply') {
    self.postMessage(e.data.a * e.data.b);
  }
};

ربط الطلبات بالردود

عند إرسال رسائل عديدة، أرفق بها id حتى يمكن مطابقة الردود مع طلباتها. يعيد العامل إرسال المعرّف نفسه.

// main: worker.postMessage({ id: 42, value: 'x' });
// worker: self.postMessage({ id: e.data.id, done: true });
// main can now match reply id 42 to its request.

محادثة ثنائية الاتجاه

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

// Worker can report progress repeatedly:
// self.postMessage({ type: 'progress', percent: 50 });
// self.postMessage({ type: 'done', result: data });

تنظيف المستمعين

عندما تعودون بحاجة إلى العامل، أزيلوا المستمعين وأنهِوه لتجنب تسرّب الذاكرة، خصوصًا في تطبيقات الصفحة الواحدة التي تنشئ عمالًا بشكل متكرر.

worker.onmessage = null;
worker.terminate();

تحقق سريع

اختبروا مدى فهمكم لتبادل الرسائل مع العمال.

مراجعة

لقد تعلمتم كيفية تبادل الرسائل مع العمال:

يرسل postMessage(data) الرسالة، ويستقبلها حدث message.
تصل البيانات في event.data.
يمكن لكلا الطرفين الإرسال، مما يجعل الاتصال ثنائي الاتجاه.
تُنسخ البيانات عبر الاستنساخ المنظم ولا تتم مشاركتها.
استخدموا بروتوكولًا يعتمد على type/id للتعامل مع مهام متعددة.

بعد ذلك، ستتعلمون عن الكائنات القابلة للنقل لنقل البيانات دون نسخ.

الأسئلة الشائعة

هل درس «التراسل باستخدام postMessage» مجاني؟

نعم — نص درس «التراسل باستخدام postMessage» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة JavaScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

ماذا ستتعلم في «التراسل باستخدام postMessage»؟

تواصلوا بين الخيط الرئيسي والعامل. تتمرن على JavaScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ JavaScript Academy؟

لا تُشترط خبرة سابقة. JavaScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «التراسل باستخدام postMessage»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس JavaScript Academy هذا؟

نعم. كل درس في JavaScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى JavaScript Academy