17

Ho alcune domande su lavoratori webCosa posso usare con i lavoratori Web?

  • deve avere il lavoratore ha accesso allo stoccaggio? Es. indexedDB/webSQL e archiviazione locale del file da cui è stato avviato l'operatore?

  • Come posso includere un file in un lavoratore? Ho un functions.js che ha un sacco di funzioni rap relative alle applicazioni e non ha davvero senso copiare il contenuto del file in un lavoratore solo per avere due posti diversi per aggiornare le mie funzioni.

  • Posso avere un DOM all'interno di un lavoratore? come caricare un file audio in un tag audio temporaneo per leggerne la durata e se è riproducibile o meno. Non accedere alla dom della pagina madre, ma avere un DOM nel lavoratore stesso.

  • Se le risposte a una qualsiasi delle domande sono negative, come può/deve essere eseguita manualmente?

Questo è per un'applicazione Chrome in modo da avere accesso alle più recenti API Chrome e non ho bisogno di preoccuparsi compatibilità a ritroso.

risposta

9

Non vi è alcun accesso DOM di alcun tipo da un web worker - periodo. La manipolazione ALL DOM deve essere eseguita dal thread JS principale. I Web Worker possono comunicare solo con il thread principale tramite la messaggistica.

Questo previous SO question indica che i web worker non possono accedere all'archiviazione locale, qualcosa che è stato facilmente trovato con una ricerca su Google.

Lo stesso thread ha un elenco di ciò che gli operatori Web possono accedere.

Non è chiaro cosa intendi per "includere un file in un lavoratore". È possibile importare script. Non so cos'altro stai chiedendo. È possibile utilizzare una chiamata Ajax per recuperare i dati se questo ti aiuterà con il tuo file audio.

Mi sembra che tu debba fare delle ricerche di base su ciò che puoi e non puoi fare con i web worker (dato che c'è un TON scritto su di esso sul web) e poi tornare con molto più specifico domande che incorporano quella conoscenza.

Non ci sono hack per gli utenti del Web che ti consentono di fare più di quanto dovresti essere in grado di fare.

Si può lavorare nel thread JS principale e farlo in piccoli blocchi con setTimeout se si ha molto lavoro da fare e si desidera mantenere l'interfaccia utente principale il più reattiva possibile. Questo è un modello di disegno molto vecchio che risale ai giorni precedenti la filettatura era disponibile o facile da usare. Si tratta di progettare il tuo lavoro in modo tale da poterlo fare in piccoli pezzi con lo stato memorizzato in qualche oggetto persistente e poi puoi fare ripetutamente piccole quantità di lavoro e poi tornare indietro, solo per riprendere il prossimo pezzo di lavoro sul prossimo tick del timer .

+0

beh, ma il caricamento di mp3 su tag audio richiede molto tempo. I lavoratori erano una possibile soluzione a questo, ma non hanno DOM. quindi come suggerisci di leggere la durata dei file? e per quanto riguarda l'inclusione? un hack se inevitabile ..: O – Achshar

+0

Ho aggiunto altro alla mia risposta. – jfriend00

+0

bene da includere intendevo 'ho un functions.js che ha un sacco di funzioni rap relative alle applicazioni e non ha davvero senso copiare il contenuto del file in un lavoratore' (come spiegato in [1]) e sì' importScripts' è quello di cui avevo bisogno, grazie! da "hack" intendevo qualcosa come leggere i contenuti di un file e aggiungerli a eval. (sì, lo so che suona male, ma sarebbe stato un trucco per una ragione) che è stato fino a quando ho letto su importscripts. scusa se la mia domanda mi è sembrata zoppa, come puoi dire, sono nuovo per i lavoratori ..: O – Achshar

3

È possibile caricare una libreria javascript. Vedi questo esempio:

<body> 
    <button>Start</button> 
    <div id="output"></div> 
    <script id="worker_1" type="text/js-worker"> 
     importScripts(base_url + '/worker_lib2.js'); 

     function run(event) { 
      var msg = event.data; 
      this.postMessage({ answer: hello(event.data.name)}); 
     } 

     this.addEventListener('message', run, false); 
    </script> 

    <script> 
     var base_url = window.location.href.replace(/\\/g,'/').replace(/\/[^\/]*$/, ''); 
     var array = ['var base_url = "' + base_url + '";' + $('#worker_1').html()]; 
     var blob = new Blob(array, {type: "text/javascript"}); 

     $('button').click(function() { 
      var url = window.URL.createObjectURL(blob); 
      console.log(url); 
      var worker = new Worker(url); 
      worker.addEventListener('message', function(event) { 
       $('#output').html(event.data.answer); 
      }, false); 
      worker.postMessage({ 
       name: 'Steve' 
      }); 
     }); 
    </script> 
</body> 

Con la libreria worker_lib2.js contenente la funzione ciao.

function hello(msg) { 
    return 'Hello... ' + msg; 
}