More

[ دورة HTML5 ] الدرس الثاني عشر – تقنية عامل الويب web worker

" Here you can search for everything you want and you will find it as soon as possible "

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

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

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


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

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


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

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

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

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

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

Click Here To See URL To Download
var i=0;

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

timedCount();

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

Click Here To See URL To Download

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

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

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

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

Click Here To See URL To Download
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
  • كائن الصفحة
  • الكائن الأب (الأصلي)
Show More
" Here you can search for everything you want and you will find it as soon as possible "

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Check Also

Close

Adblock Detected

Please consider supporting us by disabling your ad blocker