dynamic-worker-blog-entry

_web-workers.md

This is a set of files for a blog entry on web workers.

http://www.benlesh.com/2014/09/dynamic-worker-threads-in-javascript.html

All code and text ©2014 Ben Lesh ben@benlesh

However it's MIT Licensed. Okay, really I doubt I'll ever sue anyone for using this junk. Just remember where you found it and say nice things about me. ;)

muppet-spec.js

describe('Muppet worker script', function(){
  var muppet, mockGlobal;
  beforeEach(function(){
    // we don't want to actually start a worker
    // so let's give it a dummy worker that doesn't do anything.
    var DummyWorker = function() {};
    var muppet = new Muppet(DummyWorker);
    
    // mock the global scope for the worker thread.
    var mockGlobal = {
      postMessage: jasmine.createSpy('postMessage');
    };
    
    // call the initWorker method we use to build the worker script.
    muppet.initWorker(mockGlobal);
  });
  
  it('should tell you when it is ready', function(){
    expect(mockGlobal.postMessage).toHaveBeenCalledWith('I am ready');
  });

  it('should respond properly to mnah mnah', function() {
    mockGlobal.onmessage('mnah mnah');
    expect(mockGlobal.postMessage).toHaveBeenCalledWith('doot doo do-do-do');
  });

  it('should get confused about other phrases', function() {
    mockGlobal.onmessage('blah');
    expect(mockGlobal.postMessage).toHaveBeenCalledWith('huh?');
  });
});

muppet-use.js

var muppet = new Muppet();

muppet.says(function(phrase) {
  console.log(phrase);
});

muppet.tell('mnah mnah');
// console: "doot doo do-do-do"

muppet.tell('what?');
// console: "huh?"

muppet.js

/**
 * A simple class that creates another thread that responds to silly messages
 * with other silly messages. Okay, really it only knows 'mnah mnah'
 * @class Muppet
 * @constructor
 * @param Worker {Worker} injection point for Worker
 */
function Muppet(Worker) {
  Worker = Worker || window.Worker;
  this.url = this.getWorkerURL();
  this.worker = new Worker(this.url);
}
 
Muppet.prototype = {
  // get the worker script in string format.
  getWorkerScript: function(){
    var js = '';
    js += '(' + this.workerInit + ')(this);';
    return js;
  },
 
  // This function really represents the body of our worker script.
  // The global context of the worker script will be passed in.
  workerInit: function(global) {
    global.onmessage = function(e) {
      var response = e.data === 'mnah mnah' ? 'doot doo do-do-do' : 'huh?';
      global.postMessage(response);
    };
    global.postMessage('I am ready');
  },
 
  
  // get a blob url for the worker script from the worker script text
  getWorkerURL: function() {
    var blob = new Blob([this.getWorkerScript()], { type: 'text/javascript' });
    return URL.createObjectURL(blob);
  },
 
 
  // kill the muppet. Sick, just sick.
  kill: function() {
    if(this.worker) {
      this.worker.terminate();
    }
    if(this.url) {
      URL.revokeObjectURL(this.url);
    }
  },
  
  // say something to the muppet
  tell: function(msg) {
    if(this.worker) {
      this.worker.postMessage(msg);
    }
  },
  
  // listen for the muppet to talk back
  says: function(handler) {
    if(this.worker) {
      this.worker.addEventListener('message', function(e) {
        handler(e.data);
      });
    }
  },
};

simple-dynamic-worker-teardown.js

// teardown
worker.terminate();
URL.revokeObjectURL(url);

simple-dynamic-worker.js

var js = 'postMessage ("hello from the worker!");';
var blob = new Blob([js], { type: 'text/javascript' });
var url = URL.createObjectURL(blob);

var worker = new Worker(url);
worker.onmessage = function(e) {
  console.log(e.data);
};

simple-worker-setup.js

var worker = new Worker('myworkerscript.js');
worker.onmessage = function(e) {
  console.log('the worker said: ' + e.data);
};
worker.postMessage('mnah mnah');

simple-worker.js

onmessage = function(e) {
  console.log('the window said: ' + e.data);
  postMessage('doot doo do-do-do');
}
postMessage('I am totally loaded.');