Web Workers para iniciantes e sem arquivos externos

Algumas pessoas ainda podem não ter ouvido falar de um recurso realmente incrível e legal chamado Web Workers … isso simplesmente não é aceitável! Por quê? Porque eles são simplesmente fantásticos!

Uma introdução básica

Com os Web workers, você pode criar aplicativos javascript multithread, você ouviu direito! multi-threaded! Imagine o seguinte: você está construindo um jogo muito legal usando WebGL e tem toneladas de coisas para calcular … mas você só tem uma única instância do navegador e o script precisa calcular tudo de uma vez … exagero! Com os web workers, você tem a possibilidade de permitir que esses cálculos sejam feitos em segundo plano enquanto seu script continua alegremente. Pura epopeia para calcular alguma inteligência artificial, principalmente se for meio pesada, basta passá-la para outro thread.

Uma desvantagem … os web workers não têm acesso ao DOM . Veja-os como um aplicativo independente para calcular o processamento de coisas pesadas sem perturbar seu aplicativo real. Isso torna a vida mais fácil!

Um web worker básico

Então, como criamos essa coisa bacana? Difícil de conseguir? Não! Pedaco de bolo. Basta verificar o seguinte exemplo:

var myWorker = new Worker('/some/path/externalCalculation.js');
myWorker.onmessage = function(event) {
    console.log('We got some data delivered!', event.data);
};

Como você pode ver … não existe uma grande programação por trás disso, é até um pouco semelhante à programação de soquetes ou alguma outra conexão. Um funcionário da web pode enviar dados de volta ao aplicativo principal e o aplicativo principal pode ouvir isso. Parece familiar, não é?

Exemplo sem arquivo externo usando Blob ()

Com blobs, agora você pode criar arquivos diretamente via javascript. Para obter mais informações sobre o MDN .Blob()

HTML

<div id="counter"></div>
<script id="myWorker">
    var i = 0;
    setInterval(function() {
        i++;
        postMessage(i); // sent data to main app
    }, 500);
</script>

JavaScript

var myWorker = null,
    URL = window.URL || (window.webkitURL); // simple polyfill

window.URL = URL;

// we are creating a new javascript file using blob. we just fetch the content of the script tag
// located in our html file and assign it to the Blob(content,type)
// of course you can also assign the desired function to a variable, instead
// of putting this into a script tag.
var workerData = new Blob([document.getElementById('myWorker').textContent], {
    type: "text/javascript"
});

function init() {
    if (typeof (Worker) === undefined) { // check if browser supports web workers
        alert('No webworker supported');
        return false;
    }
   // create the new web worker
   // as we dont have an external file, we have to create a url
   //  for our blob using createObjectURL. which is somewhat similar to
   // base64 encoded images. link will look like 
   // blob:d3958f5c-0777-0845-9dcf-2cb28783acaf
    myWorker = new Worker(window.URL.createObjectURL(workerData));

    // listen for messages sent by the worker
    myWorker.onmessage = function (e) {
        // output
        document.getElementById('counter').innerHTML = e.data;
    };
}

init();

jsFiddle Demo