Javascript Web Workers: Safari 5 Now Supports Complex Messages

Following the announcement of Safari 5 [ 5.0 (7533.16) ] today, I did some due diligence and ran it through the json-object, array, boolean and string Worker message cases that I had produced for testing against Chrome 5. The results are in and thankfully consistent – so not much to report here accept that – yes – Safari 5’s Web Worker API has been updated to fully support complex messages as arguments to postMessage() natively.

Nothing new, but here are the cases if you want to try them yourself:

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

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