Javascript Web Workers: Chrome 5 Now Supports Complex Messages

After updating to Chrome 5 (specifically 5.0.375.55) last night I immediately ran some tests to see if the Web Worker API had been updated to support postMessage() arguments of types other than string.


Turns out, it had.


Here’s the test, plus the results:https://gist.github.com/414901


renderer.html

<script src="renderer.js"></script>

renderer.js


var worker = new Worker('worker.js'); worker.addEventListener('message', function (event) { var message = event.data; console.group('Message Received'); console.log( message ); console.groupEnd(); }, false); // TEST VALID JSON ARG worker.postMessage({ 'renderer-process': 'Hello Worker Process' }); // TEST OBJECT ARG worker.postMessage({ rendererProcess: 'Hello Worker Process', resultOf: (function () { return 'the result'; })() }); // TEST ANOTHER THREAD SAFE OBJECT ARG var obj = new Object(); obj.isArray = [ 1,2,3,4,5 ]; obj.isString = 'Foo bar baz', obj.resultOf = (function () { return 'returned from self executing function'; })(); worker.postMessage(obj); // TEST STRING ARG worker.postMessage('Hello Worker Process'); // TEST ARRAY ARG worker.postMessage([ 1, 2, 3, 4 ]); // TEST BOOLEAN ARG worker.postMessage(false); // TEST BOOLEAN ARG worker.postMessage(true);

worker.js

self.addEventListener('message', function (event) {
  var message = event.data;


  //  IF BOOLEAN
  if ( typeof message === 'boolean' ) {
    message = 'boolean: ' + message.toString();
  }
  //  ALL OTHER MESSAGE TYPES
  else {

    //  IF STRING OR ARRAY
    if ( message.length ) {
      //  IF STRING
      if ( typeof message == 'string' ) {
        message += ', Hello Renderer Process';
      }
      else {
        var len     = message.length + 1,
            floor   = len,
            ceil    = floor * 2;


        for ( ; floor < ceil; floor++ ) {
          message.push(floor);
        }
      }
    }
    //  IF OBJECT
    else {
      message['worker-process'] = 'Hello Renderer Process';
    }
  }

  this.postMessage(message);


}, false);

results.console.js

// Results

Message Received
  Object
    renderer-process: "Hello Worker Process"
    worker-process: "Hello Renderer Process"
    __proto__: Object

Message Received
  Object
    rendererProcess: "Hello Worker Process"
    resultOf: "the result"
    worker-process: "Hello Renderer Process"
    __proto__: Object


Message Received
  Object
    isArray: Array (5)
      0: 1
      1: 2
      2: 3
      3: 4
      4: 5
      length: 5
    isString: "Foo bar baz"
    resultOf: "returned from self executing function"
    worker-process: "Hello Renderer Process"

Message Received
  Hello Worker Process, Hello Renderer Process

Message Received
  [1, 2, 3, 4, 5, 6, 7, 8, 9]

Message Received
  boolean: false

Message Received
  boolean: true


I did small bit of research and could only come up with this ticket:

Issues in passing parameters to HTML5 worker threads

EditIn the time since this was originally published, Chrome, Safari & Opera now support complex JSON messages.

Comments

Contact Us

We'd love to hear from you. Get in touch!

Phone

+1 617-379-2752

Mail

P.O. Box 961436
Boston, MA 02196