آموزش Web Worker در html5

در جلسه قبلی آموزش HTML با کش کردن با HTML5 آشنا شدیم. در این بخش به Web Worker در html5 خواهیم پرداخت.

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

Web Worker در html5 چیست

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

به این دلیل که کد جاواسکریپت همیشه در پیش زمینه اجرا می شود.

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

نکته: Web Worker در html5 در تمام مرورگرهای مدرن مثل فایرفاکس, اپرا, سافاری و اینترنت اکسپلورر ۱۰+ پشتیبانی می شود.

ساخت یک فایل Web Worker

ساده ترین راه استفاده از Web Worker در html5 انجام محسبات زمان بر است. بنابراین قصد داریم یک تسک جاوااسکریپت ساده که از ۰ تا ۱۰۰هزار را می شمارد بسازیم.

بنابراین یک فایل جاواسکریپت به نام 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();

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 در html5

حالا که فایل کارگر وب خود را داریم. در این بخش Web Worker را از سند html برای اجرای کدهای داخل فایل worker.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>

<!DOCTYPE html>

<head>

<title>HTML5 Web Worker</title>

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>

</body>

</html>

توضیح کد بالا:

دستور var worker = new Worker("worker.js"); یک آبجکت جدید کارگر وب ایجاد می کند که با کدهای داخل worker.js در ارتباط است.

زمانه که worker یک پیام را ارسال می کند, هندلر رویداد onmessage به کد اجازه دریافت پیام از web worker را می دهد.

المان event.data شامل پیام ارسال شده از سمت web worker است.

نکته: کدی که woker اجرا می کند همیشه در یک فایل جداگانه جاواسکریپت ذخیره می شود.

این کار از اینکه توسعه دهنده وب سعی در نوشتن کد web worker برای استفاده از متغییرهای سراسری یا دسترسی مستقیم به المان های صفحه داشته باشد, جلوگیری می کند.

پایان دادن به web worker در html5

ار انجایی که نحوه ساخت یک worker و دریافت پیام ها را یاد گرفتید, شما می توانید اجرای worker را در حین محاسبات خاتمه بدید.

مثال زیر به شما نحوه شروع و پایان worker در یک صفحه وب از طریق کلیک روی دکمه ها را نشان می دهد.

از همان فایل جاواسکریپت worker.js برای شمارش ۰ تا ۱۰۰ هزار استفاده کردیم.

<!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>

<!DOCTYPE html>

<head>

<title>HTML5 Web Worker</title>

// 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>

</body>

</html>

نکته: از web worker در html5 فقط برای عملیات سنگین جاواسکریپت استفاده کنید. برای مثال پاسخ به کلیک ها یا دیگر تعامل های اسکریپت با کاربر.

به هیچ وجه پیشنهاد نمی شود از web worker در html5 برای عملیات ساده محاسباتی جاوااسکریپت بهره ببرید.

امیدوارم در این بخش آموزش HTML , از Web Worker در html5 نهایت استفاده را برده باشید.

در بخش بعدی با SSE در HTML آشنا می شویم.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

لغو پاسخ

رشتچي ۱۲ مرداد ۱۴۰۱

سلام ، روزتون به خير . سوالي از خدمتتون داشتم . من کدهاي مربوط به web woker را عينا از سايت کپي کرده و اجرا مي کنم ولي متاسفانه هيچ عکس العملي ديده نمي شود . لطفا راهنمايي فرماييد.
با تشکر

پاسخ

حسن شفیعی ۱۲ مرداد ۱۴۰۱

سلام. ورکر صرفا یه کد جاواسکریپت هست کنسول مرورگر رو باز کنید ببینید چه خطایی داره

پاسخ

آموزش Web Worker در html5

Web Worker در html5 چیست

ساخت یک فایل Web Worker

اجرای کد در پشت صحنه با Web Worker در html5

پایان دادن به web worker در html5

کتاب آموزش HTML به فارسی

کشیدن و رها کردن در html5

آموزش HTML – موقعیت جغرافیایی html5

آموزش SSE در HTML5

لغو پاسخ

دوره آموزش ساخت دیجی کالا با php به همراه اپلیکیشن اندروید

آموزش ساخت ربات تلگرام با PHP (از پایه و پروژه محور)

دوره جامع آموزش طراحی سایت + پروژه قالب فروشگاه