تقنية عامل الويب web worker

By


يمكن تعريف web worker أو عامل الويب بأنه عبارة عن كود جافاسكربت يعمل في الخلفية و بدون أي تأثير لعمل الصفحة .


ماهي تقنية web worker ؟


عند تشغيل أي سكربت في صفحات HTML تصبح استجابة الصفحة ضعيفة حتى ينتهي السكربت من العمل .

يعتبر web worker أو عامل الويب بأنه عبارة عن كود جافاسكربت يعمل في خلفية صفحة الموقع و هو مستقل عن الأكواد الأخرى و لايأثر على عمل الصفحة . حيث يمكنك متابعة العمل في الموقع كالنقرات و التصفح .. الخ بينما كود web worker يعمل في خلفية الصفحة .


المتصفحات الداعمة


| | | |

تقنية web worker مدعومة من جميع المتصفحات الرئيسة باستثناء انترنت اكسبلورر .

فحص عمل تقنية web worker


قبل إنشاء عامل ويب يجب التأكد فيما اذا كان المتصفح يدعم هذه التقنية أم لا :

if(typeof(Worker)!=="undefined")
{
// متصفحك يدعم تقنية عامل الويب
// Some code.....
}
else
{
// للأسف المتصفح لايدعم هذه الخاصية
}



إنشاء ملف عامل الويب


والآن سنقوم بإنشاء ملف عامل الويب من خلال ملف جافاسكربت خارجي .
كما أننا سنقوم بإنشاء سكربت يقوم بالعدّ وسنحفظ الكود في ملف يسمى demo_workers.js :

var i=0;

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

timedCount();



أهم جزء في الكود السابق هو الدالّة postMessage() حيث تقوم بإرسال رسالة الى صفحة صفحة الويب HTML .

ملاحظة : عادة تقنية عامل الويب لا تستخدم مع الأكواد البسيطة بل أنها تقوم بالعمل مع مهام داخلية متعلقة بوحدة المعالجة المركزية CPU .

إنشاء كائن لتقنية عامل الويب


لقد قمنا بإنشاء ملف لعامل الويب و الآن نحتاج أن نستدعيه إلى صفحة HTML .
سنقوم بإنشاء كائن جديد لعامل الويب و تشغيل الكود في ملف demo_workers.js الذي قمنا بإنشائه مسبقاً .

w=new Worker("demo_workers.js");



ثم يمكننا إرسال و تلقي الرسائل من عامل الويب . ثم يجب إضافة الحدث onmessage لعامل الويب .

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



عندما يقوم عامل الويب بإرسال رسالة سيتم تشيغل الكود الموجود ضمن الحدث السابق كما سيتم تخزين البيانات في عامل الويب في  event.data.

إنهاء عامل الويب


عند إنشاء كائن عامل الويب سيتم تلقي الرسائل ( حتى بعد انتهاء عمل السكربت الخارجي ) حتى يتم إنهاء .
لإنهاء كود عامل الويب يمكنك إضافة الدالّة terminate() كما في المثال :

w.terminate();



مثال كامل حول عامل الويب


لقد قمنا بإنشاء ملف جافاسكربت خارجي لعامل الويب بشكل متفرق لكننا سنعرضه الآن ضمن صفحة كاملة لنرى كيفية عمله :

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <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")
{
w=new Worker("demo_workers.js");
w.onmessage = function (event) {
document.getElementById("result").innerHTML=event.data;
};
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
}
}

function stopWorker()
{
w.terminate();
}
</script>

</body>
</html>


استخدام تقنية عامل الويب مع DOM


بما أن كود عامل الويب يمكن أن يكون في ملف خارجي لهذا لايمكنك الوصول الى كائنات جافاسكربت التالية :
  • كائن نافذة الصفحة window
  • كائن الصفحة
  • الكائن الأب (الأصلي)

ليست هناك تعليقات:

إرسال تعليق