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

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