Categorie
Programmazione

Multi-threading con HTML5: i Web Workers

Esempi di utilizzo.

La prima operazione da compiere, tutte le volte che lavoriamo con HTML5, è quella di verificare il supporto della funzionalità nel browser. Alla data di questo articolo, ad esempio, il supporto dei Web Workers in Internet Explorer non è ancora completo. Per verificare se i Web Workers sono supportati usiamo un codice come questo   

function checkSupport() {

if (typeof(Worker) !== "undefined") {

// alert('Web Workers support -> OK') ;

return true ;

} else {

// alert('Web Workers support -> NOT OK') ;

return false ;

} 

il controllo andrebbe fatto tutte le volte che dobbiamo istanziare un nuovo Web Worker. Per lavorare con i  Web Workers dobbiamo creare un oggetto di tipo <code>Worker</code>, ad esempio:

var worker ;

if (typeof(worker) == "undefined") {

worker = new Worker("demo-worker.js") ;

alert("Created new worker -> " + worker)  ;

}

Notiamo che il costruttore dell’oggetto <code>Worker</code> accetta in ingresso un file JavaScript. Questo file si può trovare nella stessa directory della pagina originale, oppure in una qualunque altra directory del sito. All’interno del file <code>demo-worker.js</code> andremo a scrivere il codice del nostro Web Worker. Per chi è abituato alla normale programmazione multi-threading è un po’ come se il file <code>demo-worker.js</code> contenesse l’implementazione del nuovo thread.

A questo punto potremmo farci una domanda: se il codice contenuto del file <code>demo-worker.js</code> non può manipolare il DOM della pagina corrente, in quale modo possiamo interagire con esso? In altre parole: qual è il meccanismo che permette di far interagire il Web Worker con la pagina che l’ha creato?

La risposta consiste nell’utilizzo di un’altra funzionalità HTML5: la funzione postMessage. Si tratta di una nuova istruzione JavaScript che non riguarda solo i Web Workers ma trova anche altre applicazioni. Possiamo pensare al file <code>demo-worker.js</code> come se fosse un componente “server” che si attiva quando una pagina crea un’istanza dell’oggetto <code>Worker</code> passando come argomento il file <code>demo-worker.js</code> (esattamente come nell’esempio qui sopra).

Questa specie di “server” risponderà all’invocazione elaborando i dati e ritornando il risultato attraverso l’istruzione <code>postMessage</code> (vedremo l’implementazione del codice nella prossima pagina). Per adesso supponiamo che in qualche modo il file <code>demo-worker.js</code> sia riuscito ad elaborare i dati e restituire un risultato sotto forma di messaggio: con queste ipotesi possiamo completare lo snippet visto poco fa, scrivendo

worker.onmessage = function (event) {

  window.console("Received message -> " + event.data) ;

} ;

il tutto sarà più chiaro quando vedremo anche il codice del file  <code>demo-worker.js</code> (vedi pagina successiva).

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.