rwaldron · May 18, 2010 21:19
diff --git a/compatible-filtering-worker.html b/compatible-filtering-worker.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>Workers: Compatibility</title>
    <script>

 //  This script is executed in the main window

 /*
  we'll use a worker to filter a huge data set
  for all entries that match our filter string "foo"
 */

 var worker  = new Worker('worker-javascript-file-2.js'),
    message = {
      fn: 'filterHugeDataSet',
      data: {

      	faa: 'bar',
      	fee: 'ber',
      	fii: 'bir',
      	foo: 'bor',
      	fuu: 'bur'
      },
      filter: 'foo'
    };

 /*

  For this to work the same way in both Gecko and WebKit,
  we'll need to stringify the object before sending it

  Now it looks like this:

  "{"fn":"filterHugeDataSet","data":{"faa":"bar","fee":"ber","fii":"bir","foo":"bor","fuu":"bur"},"filter":"foo"}"


 */
 worker.postMessage(JSON.stringify(message));

 /*

  When the worker has filtered the data and returns it
  to our application's main window thread,
  we'll need to translate it back into an object manually

 */

 worker.addEventListener('message', function (event) {

  var filtered = JSON.parse(event.data);

 	//	remember, we put our results in the data property of the filtered object inside the worker
  console.log(filtered.data);

 }, false);


    </script>
  </head>
  <body>


  </body>
 </html>
diff --git a/worker-javascript-file-2.js b/worker-javascript-file-2.js
 //  This script is executed in the worker

 /*
  
  The worker will begin running when it receives
  a message from the main window.
  
  The first thing it will have to do is parse the
  message back into object.

 */  
 var filters = {
  filterHugeDataSet:  function (data, filter) {
    //  do some kind of filtering...
    //  this is crummy, but you get the idea
    var obj = {};
    
    for ( var key in data ) {
      if ( key == filter ) {
        obj[key]  = data[key];
      }
    }
    
    return obj;
  }
 };


 self.addEventListener('message', function (event) {
    
  var message   = JSON.parse(event.data), 
      filtered  = {};
  
  /*
    
    `message` is now an object again. and looks how
    you expect it to:

    message = {
      fn: 'filterHugeDataSet',
      data: { foo:'bar' },
      filter: 'foo'
    };    
    
    
    Use your imagination here...If we had an object 
    called "filters" with a function property called
    "filterHugeDataSet" we could now call it with 
    the params we passed along with the data
    
  */
  
  filtered['data'] = filters[message.fn](message.data, message.filter);
  
  
  /*
  
    Now we want to send it back. Once again we'll 
    manually serialize the object
  
  */
  
  this.postMessage(JSON.stringify(filtered));
  

 }, false);
	<!DOCTYPE html>
	<html>
	<head>
	<title>Workers: Compatibility</title>
	<script>

	// This script is executed in the main window

	/*
	we'll use a worker to filter a huge data set
	for all entries that match our filter string "foo"
	*/

	var worker = new Worker('worker-javascript-file-2.js'),
	message = {
	fn: 'filterHugeDataSet',
	data: {

	faa: 'bar',
	fee: 'ber',
	fii: 'bir',
	foo: 'bor',
	fuu: 'bur'
	},
	filter: 'foo'
	};

	/*

	For this to work the same way in both Gecko and WebKit,
	we'll need to stringify the object before sending it

	Now it looks like this:

	"{"fn":"filterHugeDataSet","data":{"faa":"bar","fee":"ber","fii":"bir","foo":"bor","fuu":"bur"},"filter":"foo"}"


	*/
	worker.postMessage(JSON.stringify(message));

	/*

	When the worker has filtered the data and returns it
	to our application's main window thread,
	we'll need to translate it back into an object manually

	*/

	worker.addEventListener('message', function (event) {

	var filtered = JSON.parse(event.data);

	// remember, we put our results in the data property of the filtered object inside the worker
	console.log(filtered.data);

	}, false);


	</script>
	</head>
	<body>


	</body>
	</html>
	// This script is executed in the worker

	/*

	The worker will begin running when it receives
	a message from the main window.

	The first thing it will have to do is parse the
	message back into object.

	*/
	var filters = {
	filterHugeDataSet: function (data, filter) {
	// do some kind of filtering...
	// this is crummy, but you get the idea
	var obj = {};

	for ( var key in data ) {
	if ( key == filter ) {
	obj[key] = data[key];
	}
	}

	return obj;
	}
	};


	self.addEventListener('message', function (event) {

	var message = JSON.parse(event.data),
	filtered = {};

	/*

	`message` is now an object again. and looks how
	you expect it to:

	message = {
	fn: 'filterHugeDataSet',
	data: { foo:'bar' },
	filter: 'foo'
	};


	Use your imagination here...If we had an object
	called "filters" with a function property called
	"filterHugeDataSet" we could now call it with
	the params we passed along with the data

	*/

	filtered['data'] = filters[message.fn](message.data, message.filter);


	/*

	Now we want to send it back. Once again we'll
	manually serialize the object

	*/

	this.postMessage(JSON.stringify(filtered));


	}, false);