HTML5 - Web Workers (radnici)

Šta je Web Workers (radnici)?

Ako pokušate obaviti intenzivan zadatak s JavaScript 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 kreirati jednostavnu JavaScript skriptu koja broji od 0 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, trebamo je i pokrenuti iz HTML dokumenta koji u pozadini pokreće kod unutar datoteke nazvane "worker.js" i progresivno prikazuje rezultat na web stranici. Pogledajmo kako to funkcioniše: 

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

Ukidanje Web Worker

Do sada ste naučili kako stvoriti worker-e i početi primati poruke. Međutim, usljed izvršavanja možete i prekinuti tekućeg worker-a. Sljedeći primjer će vam pokazati kako pokrenuti i zaustaviti worker-a s web stranice klikom na HTML dugme. Koristićemo istu JavaScript skriptu '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>