بخش های اصلی

آموزش HTML 5

آموزش HTML 5 - کار با web workerها

web worker یک کد جاوا اسکریپته که در پشت زمینه ی صفحه های وب اجرا میشه.

web workerها چه هستن؟

اگه بخواین یک وظیفه ی (task) فوری با جاوا اسکریپت انجام بدین که وقت گیره و نیاز به محاسبات فوری داره، این وظیفه، صفحه ی وب را متوقف کرده و تا زمانی که کار کاملاً انجام بشه، در کار کاربر وقفه ایجاد می کنه. دلیل این اتفاق اینه که کد جاوا اسکریپت همیشه در پیش زمینه (foreground) اجرا میشه.

HTML5، تکنولوژی جدیدی بنام web worker را معرفی میکنه که مستقل از اسکریپت های رابط کاربری و بدون تأثیر گذاشتن بر کارایی صفحه، مخصوصاً برای انجام کارهای پشت زمینه طراحی شده. برعکس جاوا اسکریپت، web worker، در کار کاربر وقفه ایجاد نمی کنه و صفحه پاسخگو (repsonsive) و فعال باقی می ماند چون web workerها وظیفه ها (tasks) را در پشت زمینه اجرا می کنن.

نکته: تمام مرورگرهای مطرح و مدرن مثال Firefox، Chrome، Opera، Safari و Internet Explorer 10+ از ویژگیِ web worker در HTML5 پشتیبانی می کنن.

ایجاد فایل web worker

انجام وظیفه های زمان گیر، ساده ترین کاربرد web workerها است. بنابراین در این جا یک وظیفه ی جاوا اسکریپت ساده ایجاد می کنیم که از صفر تا 100000 را می شمارد. بیاین یک فایل خارجیِ جاوا اسکریپت به نام “worker.js” ایجاد کنیم و کد زیر را در آن وارد کنیم:

مثال

دانلود

var i = 0;
function countNumbers(){
    if(i < 100000){
        i = i + 1;
        postMessage(i);
    }
 
    // Wait for sometime before running this script again
    setTimeout("countNumbers()", 500);
}
countNumbers();

نکته: متد postMessage()، برای فرستادن پس فرستادن پیام (مثل اعدادِ مثال بالا) از فایل web worker به صفحه ی وب استفاده میشه.

انجام دادن کار در پشت زمینه با web worker

حالا فایل web workerمان را ساخته ایم. در این بخش، web worker را از طریق یک سند HTML که کدِ داخل فایلی به نام “work.js” را در پشت زمینه اجرا می کنه و به تدریج نتیجه را روی صفحه ی وب نمایش میده، مقدار دهی اولیه می کنیم.

مثال

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Web Worker</title>
<script type="text/javascript">
    if(window.Worker){
        // Set up global variable
        var worker;
      
        // Create a new web worker
        worker = new Worker("worker.js");
        
        // Fire onMessage event handler
        worker.onmessage = function(event){
            document.getElementById("result").innerHTML = event.data;
        };
    } else{
        alert("Sorry, your browser do not support web worker.");
    }
</script>
</head>
<body>
    <div id="result">
        <!--Received messages will be inserted here-->
    </div>
</body>
</html>

توضیح مثال

کد جاوا اسکریپت در مثال بالا معانی زیر را داره:

  • عبارت var worker = new Worker("worker.js"); یک شیء web worker ایجاد میکنه که برای برقراری ارتباط با web worker به کار میره.
  •      هنگامی که worker پیامی میفرسته، این کد، رویداد onmessage را اجرا می کنه که به کد اجازه ی دریافت پیام از web worker را میده.
  •      عنصر event.data حاوی پیام فرستاده شده از web worker است.

نکته: کدی که web worker اجرا می کنه همیشه در یک فایل جاوا اسکریپت جداگانه ذخیره شده. این امر به این خاطره که توسعه دهنده ی وب از نوشتن کد web workerای که تلاش می کنه از متغیرهای سراسری (global) استفاده کنه یا مستقیما به عناصر صفحه دسترسی داشته باشه، خودداری کنه.

خاتمه دادن (Terminate) به یک web worker

تا این جا نحوه ی ایجاد worker و شروع دریافت پیام ها را یاد گرفتین. می توانید یک worker در حال اجرا را در وسط انجام محاسبات نیز، متوقف کنین.

مثال زیر نحوه ی شروع و متوقف کردن worker را از طریق کلیک کردن روی دکمه های HTML در یک صفحه ی وب به شما نشان میده. این عمل از همان فایل جاوا اسکریپتِ ‘worker.js’ که در مثال قبلی برای شمردن اعداد از صفر تا 100000 از آن استفاده کردیم، استفاده می کنه.

مثال

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Web Worker</title>
<script type="text/javascript">
    // Set up global variable
    var worker;
    
    function startWorker(){
        // Initialize web worker
        worker = new Worker("worker.js");
        
        // Run update function, when we get a message from worker
        worker.onmessage = update;
        
        // Tell worker to get started
        worker.postMessage("start");
    }
    
    function update(event){
        // Update the page with current message from worker
        document.getElementById("result").innerHTML = event.data;
    }
    
    function stopWorker(){
        // Stop the worker
        worker.terminate();
    }
</script>
</head>
<body>
    <h1>Web Worker Demo</h1>
    <button onclick="startWorker();" type="button">Start web worker</button>
    <button type="button" onclick="stopWorker();">Stop web worker</button>
    <div id="result">
        <!--Received messages will be inserted here-->
    </div>
</body>
</html>

نکته: از web worker فقط برای انجام وظایف سنگین جاوا اسکریپت که در اسکریپت های رابط کاربری وقفه ایجاد نمی کنن، استفاده کنین (مثلاً اسکریپتی که به کلیک کردن یا اعمال دیگر کاربر جواب میده). استفاده از web worker برای وظایف کوتاه توصیه نمیشه.

مبحث آموزشی

آموزش HTML 5

Learn HTML 5

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

تبلیغات

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

آخرین مقالات

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد