Posts Tagged ‘web-workers’

Load Web Workers Without A JavaScript File

Friday, May 25th, 2012

Ever want to load a JavaScript Web Worker without specifying an external JavaScript file? There are a couple of different ways to do this by creating a blog and object URL – I wrapped this functionality up into a little plugin to share.

Here is the code. Or checkout out a working jsfiddle demo

 
var WorkerHelper = (function() {
 
    var BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;
    var URL = window.URL || window.webkitURL;
 
    function getURL (script) {
        if (window.Worker && BlobBuilder && URL) {
            var bb = new BlobBuilder();
            bb.append(script);
            return URL.createObjectURL(bb.getBlob());
        }
 
        return null;
    };
 
    function getWorker (script, onmessage) {
        var url = getURL(script);
        if (url) {
            var worker = new Worker(url);
            worker.onmessage = onmessage;
            return worker;
        }
 
        return null;
    };
 
    return {
        getURL: getURL,
        getWorker: getWorker     
    }
 
})();
 
<div id='log'></div>
 
<script type='text/worker' id='worker-script'>
    self.addEventListener('message', function(e) { 
        postMessage(e.data / 2); 
    },false);
</script>​
 
<script type='text/javascript'>
 
// Load a worker from a string, and manually initialize the worker
var inlineWorkerURL = WorkerHelper.getURL(
    "self.addEventListener('message', function(e) { postMessage(e.data * 2); } ,false);"
);
var inlineWorker = new Worker(inlineWorkerURL);
inlineWorker.onmessage = function(e) {
    document.getElementById('log').innerHTML += '<br />Inline: ' + e.data;
};
 
 
// Load a worker from a script of type=text/worker, and use the getWorker helper
var scriptTagWorker = WorkerHelper.getWorker(
    document.getElementById('worker-script').textContent,
    function(e) {
        document.getElementById('log').innerHTML += '<br />Script Tag: ' + e.data;
    }
);
 
inlineWorker.postMessage(1);
inlineWorker.postMessage(2);
inlineWorker.postMessage(100);
scriptTagWorker.postMessage(1);
scriptTagWorker.postMessage(2);
scriptTagWorker.postMessage(100);
 
</script>

Posted in All, Open Source, Plugins, Web Development | Tags: , ,  | 2 Comments »