۲۰
مهر

جلسه ۵۴ : آشنایی با Web Workers در html5

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

با عرض سلام خدمت کاربران سایت پی وی لرن . در آخرین مباحثی که در فصل آموزش API ، مرور کردیم ، به مباحث آموزشی و کاربردی موقعیت جغرافیایی در HTML و درگ کردن در HTML ، نیز آشنا شدید. همچنین در مطالب اخیر ، به موضوع مهم و جذاب ذخیره سازی وب در html ، نیز پرداختیم . و کدهای جاوااسکریپت برای ذخیره سازی وب را نیز ارائه کردیم. در ادامه مبحث API ، در این بخش از آموزش ما قصد داریم. به موضوع آشنایی با Web Workers در html5 و استفاده از Web Worker در HTML5 ، بپردازیم.

worker

آشنایی با Web Workers در html5

کارگر وب (Web Workers) ، در واقع یک JavaScript در حال اجرا در پس زمینه است، بدون اینکه تاثیر منفی بر عملکرد صفحه وب داشته باشد.

مرورگرهایی که از web storage پشتیبانی می کنند:

API	Chrome	Internet Explorer / Edge	Firefox	Safari	Opera
Web Storage	۴٫۰	۱۰٫۰	۳٫۵	۴٫۰	۱۱٫۵

آشنایی بیشتر با Web Workers

هنگام اجرای اسکریپت ها در یک صفحه HTML، صفحه تا زمانیکه اسکریپت به اتمام برسد، پاسخگو نخواهد بود. اما Web Workers ، یک جاوا اسکریپت است که در پس زمینه بصورت مستقل از سایر اسکریپت ها، اجرا می شود. بدون اینکه تاثیر منفی بر عملکرد صفحه داشته باشد.

شما نیز ، می توانید، هر کاری که می خواهید انجام دهید: کلیک کردن، انتخاب چیزها و … در حالی که کارگر وب در پس زمینه اجرا می شود.

مثالی از web worker :

مثال : مثالی از webworker

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support Web Workers.</p>

<script>
var w;

function startWorker() {
    if(typeof(Worker) !== "undefined") {
        if(typeof(w) == "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();
    w = undefined;
}
</script>

</body>
</html>

<!DOCTYPE html>

<html>

<body>

<p>Count numbers: <output id="result"></output></p>

<button onclick="startWorker()">Start Worker</button>

<button onclick="stopWorker()">Stop Worker</button>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support Web Workers.</p>

var w;

function startWorker() {

if(typeof(Worker) !== "undefined") {

if(typeof(w) == "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();

w = undefined;

}

</script>

</body>

</html>

خودتان امتحان کنید »

بررسی پشتیبانی Web Workers در مرورگر وب

قبل از اینکه یک web worker را ایجاد کنید ، ابتدا بررسی کنید که آیا مرورگر شما از web worker پشتیبانی می کند:

مثال :

if (typeof(Worker) !== "undefined") {
    // Yes! Web worker support!
    // Some code.....
} else {
    // Sorry! No Web Worker support..
}

if (typeof(Worker) !== "undefined") {

// Yes! Web worker support!

// Some code.....

} else {

// Sorry! No Web Worker support..

}

ایجاد فایل web worker

اکنون کد جاوااسکریپت web worker خود را ایجاد کنید.

د این مثال یک web worker ایجاد کردیم ،که از زمان اجرا شروع به شمارش می کند:

مثال :

var i = 0;

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

timedCount();

var i = 0;

function timedCount() {

i = i + 1;

postMessage(i);

setTimeout("timedCount()",500);

}

timedCount();

مهمترین قسمت کد بالا ، تابع () postMessage، است. که برای ارسال یک پیام به صفحه HTML استفاده می شود.

معمولا از web worker ، برای پنین کارهای ساده ای استفاده نمی شود. اما در کارهای فشرده تر که CPU را زیاد درگیر می کند ، کاربرد دارد.

ایجاد شی web worker

حالا که ما فایل web worker را داریم، باید آن را از یک صفحه HTML فراخوانی کنیم.

خطوط زیر بررسی می کند که آیا web worker ، در حال حاضر وجود دارد یا نه -سپس یک شی جدید web worker ، ایجاد می کند. و کد جاوااسکریپت را در “demo_workers.js” اجرا می کند:

مثال :

if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
}

if (typeof(w) == "undefined") {

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

}

سپس ما می توانیم پیام ها را از طریق web worker ، ارسال و دریافت کنیم.

رویداد “onmessage” ر انیز به web worker ، اضافه می کنیم:

مثال :

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

w.onmessage = function(event){

document.getElementById("result").innerHTML = event.data;

};

وقتی web worker ، یک پیام ارسال می کند، کد در رویداد listener ، اجرا می شود. داده های web worker نیز در event.data ذخیره می شود.

ایجاد پایان web worker

زمانیکه یک web worker ، را ایجاد می کنید. و اجرا می شود. تا زمیانیکه یک پایان برای web worker ، تعریف نکرده باشید. همچنان اجرا می شود.

برای پایان دادن به یک web worker ، از تابع ()terminate استفاده کنید:

مثال :

w.terminate();

1	w.terminate();

استفاده ی مجدد از Web Worker در HTML 5

پس از پایان web worker ، شما مجددا می توانید از کد web worker ، استفاده کنید:

مثال :

w = undefined;

1	w = undefined;

یک مثال کامل از web worker

اکنون به یک مثال کاملتر از web worker ، می پردازیم:

مثال : مثالی کامل از web worker

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>

<script>
var w;

function startWorker() {
    if(typeof(Worker) !== "undefined") {
        if(typeof(w) == "undefined") {
            w = new Worker("demo_workers.js");
        }
        w.onmessage = function(event) {
            document.getElementById("result").innerHTML = event.data;
        };
    } else {
        document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
    }
}

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

</body>
</html>

<!DOCTYPE html>

<html>

<body>

<p>Count numbers: <output id="result"></output></p>

<button onclick="startWorker()">Start Worker</button>

<button onclick="stopWorker()">Stop Worker</button>

var w;

function startWorker() {

if(typeof(Worker) !== "undefined") {

if(typeof(w) == "undefined") {

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

}

w.onmessage = function(event) {

document.getElementById("result").innerHTML = event.data;

};

} else {

document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";

}

function stopWorker() {

w.terminate();

w = undefined;

}

</script>

</body>

</html>

خودتان امتحان کنید »

web worker و DOM

از آنجا که web worker در فایل های خارجی هستند، آنها دسترسی به اشیاء جاوا اسکریپت زیر را ندارند:

The window object
The document object
The parent object

کلام آخر

در بخش های قبلی با ویژگی ها و قابلیت های جالب و کاربردی در HTML5 با استفاده از کدهای جاوا اسکریپت آشنا شدیم. در این بخش نیز به مباحث آشنایی با Web Workers در html5 پرداختیم که امکان اجرای پردازشی در پس زمینه را بدون اینکه کاربران متوجه شوند را فراهم می سازد.

QR: جلسه ۵۴ : آشنایی با Web Workers در html5

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 2

asra
مرداد ۲۸, ۱۳۹۸
سلام
کدهای بالا بخاطر فایل جاوای demo_workers کار نمیکنه؟
کاش کدهای داخل این فایل رو هم میگذاشتین که کاملا متوجه این درس بشیم.
پاسخ دادن
- پی وی لرن
  مرداد ۲۹, ۱۳۹۸
  سلام
  ظاهرا همینطور است این قسمت بررسی و به زودی اصلاح می گردد
  پاسخ دادن

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۵۴ : آشنایی با Web Workers در html5

مقدمه

آشنایی با Web Workers در html5

آشنایی بیشتر با Web Workers

بررسی پشتیبانی Web Workers در مرورگر وب

ایجاد فایل web worker

ایجاد شی web worker

ایجاد پایان web worker

استفاده ی مجدد از Web Worker در HTML 5

یک مثال کامل از web worker

web worker و DOM

کلام آخر

لیست مطالب دوره

آموزش HTML

فرم در HTML

HTML5

گرافیک در HTML

چند رسانه ای در html

APIs در HTML

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ