Buongiorno, oggi vi illustrerò come usare i web workers.

Questi oggetti fenomenali sono utilissimi nel web moderno poichè permettono di gestire script molto pesanti consentendo all'utente di continuare a navigare. Pensate all'ordinamento di una lunga lista di elementi, a computazioni client-side particolarmente gravose, all'utilizzo intensivo della grafica nei canvas… Ecco in questi casi i Web workers fanno al caso vostro.

Sul lato compatibilità ad oggi l'unico browser non compatibile con tale tecnologia è Internet Explorer.

Come funzionano

I web workers sfruttano le moderne CPU multicore creando un nuovo thread nel quale verrà eseguito lo script. Chi si intende un pò di programmazione sa che è complicato far comunicare i vari thread, che nel nostro caso sono la pagina web vera e propria e i vari workers. Html5 ci viene in aiuto fornendoci delle funzioni che ci permettono il passaggio dei dati.

Prima di spiegare queste funzioni propongo un esempio che trova i numeri primi fino a 150.000 con relativo codice. Fate attenzione a cliccare su "non usare il worker", in quanto il browser rimarrà bloccato fino al termine dello script (149993).


//Parte html<br />    <div style="width: 200px; text-align: center"><br />       <button style="width: 200px;" onclick="worker()">Usa il worker</button><br/><br />       <button style="color: red; width: 200px;" onclick="senza_worker ()">Non usare il worker</button><br/><br />       <input type="text" style="width: 200px;" id="res"></input><br/><br />       <img src="immagini/HTML5.png" id="img" onload="ruota (0)"/><br />    </div><br />    <br />    //Parte javascript<br />    <script><br />       //Funzione per ruotare le immagini<br />       function ruota (x){<br />           x = x % 361;<br />           $("#img").css("transform", "rotate("+x+"deg)")<br />           .css("-o-transform", "rotate("+x+"deg)")<br />           .css("-moz-transform", "rotate("+x+"deg)")<br />           .css("-webkit-transform", "rotate("+x+"deg)")<br />           .css("-ms-transform", "rotate("+x+"deg)");<br />           return (setTimeout ("ruota( "+(x+4)+")", 30));<br />       }<br />    <br />      //Funzione per invocare il worker          <br />      function worker (){<br />           //Parte dove si instanzia il worker<br />           var worker = new Worker('js/prime.js');<br />           //Evento di ricezione dei messaggi<br />           worker.onmessage = function(event){<br />               //Aggiorna il valore del textfield<br />               $("#res")[0].value = event.data;<br />           }<br />    }<br />    <br />    //stessa funzione ma SENZA worker<br />    function senza_worker(){<br />        var x=3;<br />        var zeri=0;<br />        var i=0;<br />        while(x <= 150000 ){<br />           zeri=0;<br />           for(i = Math.floor(x/2);i > 1; i-=2){<br />               if(i%2==0)<br />                 i--;<br />               if(x%i==0){<br />                  zeri++;<br />                  break;<br />               }<br />          }<br />         if(zeri==0)<br />              $("#res")[0].value = x;<br />         x+=2;<br />        }<br />    }

E qui il codice di prime.js

var x=3;<br />    var zeri=0;<br />    var i=0;<br />    while(x <= 150000 ){<br />        zeri=0;<br />        for(i = Math.floor(x/2);i > 1; i-=2){<br />            if(i%2==0)<br />                i--;<br />            if(x%i==0){<br />                zeri++;<br />                break;<br />            }<br />        }<br />        if(zeri==0)<br />            //Invia il messaggio alla pagina web principale<br />            postMessage(x);<br />        x+=2;<br />    }

Come si nota subito usando il worker la pagina rimane comunque navigabile.

Comunicare con i Web Workers

I metodi forniti per inviare e/o ricevere comunicazioni dai worker sono essenzialmente due: 

  1. postMessage()
  2. onmessage()

Il primo è una funzione che se usata nella pagina web trasmette al worker, mentre se usata nel worker alla pagina web. L'argomento passato può essere di qualunque tipo, stringa, oggetto, numero, ecc. ecc. – nel nostro caso inviamo dallo script prime.js il numero primo da scrivere sullo schermo.

Il secondo invece è un evento che viene invocato quando si riceve un messaggio da postmessage() e può essere usato sia nel worker che nella pagina web – nel nostro caso viene utilizzato dalla pagina web "finale" per ricevere i dati passati da prime.js e pubblicarli a video

Oltre a queste funzioni nelle API sono presenti i comandi onError() e terminate(). Entrambi questi comandi vanno utilizzati all'interno della pagina web e permettono di gestire gli errori del worker e di terminarne l'esecuzione.

Come ultima cosa ricordo che i worker possono a loro volta eseguire workers. In questo caso gli eventi onError() e terminate() possono essere eseguiti nel worker "padre".

Anche per oggi è tutto. Alla prossima!

The following two tabs change content below.