Categorie
Programmazione

Multi-threading con HTML5: i Web Workers

Codice del Web Worker

Pur non trattandosi di una comunicazione client-server, abbiamo visto che il codice JavaScript di pagina precedente può essere pensato come una specie di “client” (è più corretto parlare di parent page) che si occupa di istanziare un oggetto <code>worker</code> col quale scambierà dei messaggi. Vediamo adesso un esempio di implementazione di quest’oggetto:

var n = 0 ;

function timedCount() {

n = n + 1 ;

postMessage(n) ;

setTimeout("timedCount()", 500) ;

}

timedCount() ; 

il codice qui sopra è chiaramente poco utile, perché non fa altro che incrementare ogni mezzo secondo un contatore. L’esempio è preso dal sito del W3C Schools.  Siccome non ci interessa la complessità del compito assegnato al Web Worker,  ma vogliamo concentrarci principalmente sul paradigma di lavoro, abbiamo scelto un esempio il più semplice possibile.

Osserviamo la presenza della funzione <code>postMessage</code>, che permette di inviare un messaggio verso un generico URL. In questo caso, non avendo specificato alcun URL, il messaggio verrà inoltrato verso la pagina che ha istanziato il Web Worker. 

Per far girare il codice dobbiamo creare una pagina Web che contenga il codice visto a pagina precedente e copiare lo snippet qui sopra all’interno di un file di nome <code>demo-worker.js</code>. Dopodiché basterà caricare la pagina Web per verificare il corretto funzionamento: se tutto va bene vedremo scorrere (nella console del browser) un elenco di numeri che si incrementa ogni mezzo secondo. 

Quello che manca, a questo punto, è un meccanismo che permetta alla pagina dove è stato creato il Web Worker (la parent page) di interrompere l’esecuzione del nuovo thread. Per farlo basta usare la seguente istruzione

worker.terminate() ;

Ovviamente possiamo usare il Web Worker anche per mandare messaggi, oltre che riceverli, scrivendo: 

worker.postMessage() ;  

Conclusioni

Le nuove funzionalità introdotte dai Web Worker permettono di scrivere del codice asincrono all’interno del browser. Prima dei  Web Worker ciò era possibile soltanto ricorrendo ad alcuni trucchetti, come ad esempio le istruzioni <code>setTimeout()</code>, <code>setInterval<code>()</code> e l’oggetto <code>XMLHttpRequest</code>. I Web Worker rappresentano quindi una delle novità più interessanti del HTML5. 

L’utilizzo dei  Web Worker implica spesso la conoscenza della funzione <code>postMessage</code>. A seconda del browser la funzione permette di inviare messaggi come semplici stringhe oppure come oggetto JSON (nei browser di ultimissima generazione). Se vogliamo realizzare applicazioni che usano la funzione <code>postMessage</code> per scambiare messaggi dobbiamo valutare gli eventuali rischi di sicurezza: è sempre possibile restringere l’accesso controllando l’URL dell’origine del messaggio, come spiegato qui

Gli esempi discussi in questo articolo riguardano solo il funzionamento generale dei Web Workers: se vogliamo approfondire l’argomento, analizzando qualche esempio più realistico troviamo un ottimo tutorial qui.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.