مرجع سريع

ورقة غش عمال الويب Web Workers في جافا سكريبت

دليل مرجعي سريع لـ HTML5 Web Workers: إنشاء العامل، والتواصل عبر postMessage، وأحداث الرسائل، وخوارزمية النسخ المنظم.

· تاريخ النشر

توفر Web Workers وسيلة بسيطة لتشغيل نصوص برمجية في مسارات معالجة خلفية (خيوط مستقلة) دون التأثير على استجابة واجهة المستخدم.

المعالجة في مسار خلفي (Background Threading)

مسار العميل الرئيسي (Client Thread)

const worker = new Worker('worker.js');

worker.onmessage = function (event) {
  console.log('تم الاستلام من العامل:', event.data);
};

worker.postMessage('رسالة من الخيط الرئيسي!');

يمكن أن تكون الرسائل من أي نوع بيانات تدعمه خوارزمية النسخ المنظم (Structured Clone Algorithm) مثل الكائنات، المصفوفات، النصوص، الأرقام، كائنات Blob والمصفوفات المكتوبة (Typed Arrays).

مسار العامل (Worker Thread)

// داخل worker.js
self.onmessage = function (event) {
  console.log('تم الاستلام داخل العامل:', event.data);
  self.postMessage({ msg: 'رد من العامل' });
};

هيكل حدث الرسالة MessageEvent

bubbles: false
cancelBubble: false
cancelable: false
clipboardData: undefined
currentTarget: Worker
data: "Hello"             // الحمولة المنقولة (بيانات الرسالة)
defaultPrevented: false
eventPhase: 0
lastEventId: ""
origin: ""
ports: []
returnValue: true
source: null
srcElement: Worker
target: Worker
timeStamp: 1344821022383
type: "message"

تصف هذه الحقول الخصائص المتاحة في كائن MessageEvent ضمن معالج onmessage.

موضوعات ذات صلة