HTML5 - Web Workers (radnici)


Šta je Web Workers (radnici)?

Ako pokušate obaviti intenzivan zadatak s JavaScriptom koji oduzima vrijeme i zahtijeva pozamašne proračune, pretraživač će zamrznuti web stranicu i spriječiti korisnika da bilo što radi dok posao ne bude završen. To se događa jer JavaScript kod uvijek radi u prvom planu.

HTML5 predstavlja novu tehnologiju nazvanu Web worker koja je posebno dizajnirana za rad u pozadini nezavisno od drugih skripti korisničkog interfejsa, bez uticaja na performanse stranice. Za razliku od uobičajenih JavaScript operacija Web worker ne prekida korisnika i web stranica ostaje aktivna, jer izvršavaju zadatke u pozadini.



Kreiranje datoteke Web Worker

Najjednostavnija upotreba web worker je za obavljanje dugotrajnog zadatka. Dakle, ovdje ćemo stvoriti jednostavan JavaScript zadatak koji broji od nule do 100.000.

Stvorimo vanjsku (eksternu) JavaScript datoteku pod nazivom "worker.js" i upišimo sljedeći kod.

var i = 0;
function countNumbers() {
    if(i < 100000) {
        i = i + 1;
        postMessage(i);
    }
 
    // Pričekajte neko vrijeme prije ponovnog pokretanja ove skripte
    setTimeout("countNumbers()", 500);
}
countNumbers();


Rad u pozadini sa Web Worker-om

Sada kada smo kreirali našu datoteku web worker. U ovom ćemo dijelu pokrenuti web worker iz HTML dokumenta koji u pozadini pokreće kod unutar datoteke nazvane "worker.js" i progresivno prikazuje rezultat na web stranici. Pogledajmo kako to funkcionira:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Korištenje Web Worker</title>
<script>
    if(window.Worker) {
        // Kreiraj novi web worker
        var worker = new Worker("worker.js");
        
        // Obrađivač događaja onMessage
        worker.onmessage = function(event) {
            document.getElementById("result").innerHTML = event.data;
        };
    } else {
        alert("Žao nam je, vaš pretraživač ne podržava web worker.");
    }
</script>
</head>
<body>
    <div id="result">
        <!--Primljene poruke će biti umetnute ovdje-->
    </div>
</body>
</html>

Objašnjenje primjera:

JavaScript kod u gornjem primjeru ima sljedeće značenje:

  • Izjava var worker = new Worker("worker.js"); kreira novi objekt web worker koji se koristi za komunikaciju s web worker-om.

  • Kada worker objavi poruku, on aktivira onmessage obrađivač događaja, koji omogućava kodu da prima poruke od mrežnog worker.

  • Element event.data sadrži poruku poslanu od mrežnog worker.


Ukidanje Web Worker

Do sada ste naučili kako stvoriti worker i početi primati poruke. Međutim, usred izvršavanja možete i prekinuti tekućeg worker.

Sljedeći primjer će vam pokazati kako pokrenuti i zaustaviti worker s web stranice klikom na HTML dugme. Koristićemo istu JavaScript datoteku 'worker.js' koju smo koristili u prethodnom primjeru za brojanje brojeva od 0 do 100.000. Pigledajmo primjer:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Start/Stop Web Worker</title>
<script>
    // POstavite globalnu varijablu
    var worker;
    
    function startWorker() {
        // Inicijaliziraj web worker
        worker = new Worker("worker.js");
        
        // Pokrenite funkciju ažuriranja kada dobijemo poruku od worker
        worker.onmessage = update;
        
        // Reci worker da počne
        worker.postMessage("start");
    }
    
    function update(event) {
        // Ažurirajte stranicu trenutnom porukom od worker
        document.getElementById("result").innerHTML = event.data;
    }
    
    function stopWorker() {
        // Zaustavi 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">
        <!--Primljene poruke će biti umetnute ovdje-->
    </div>
</body>
</html>