JavaScript Threading - Part 2 (Worker)

December 18, 2012 by JavaScript   Threading  

In the second part of this series we're going to have a look at web workers.

Unlike timers a worker runs in an isolated thread, which allows us to run intensive tasks without blocking the UI/parent thread. This functionality is currently supported by organizations that care about developing real browsers (but will however be supported by Internet Explorer 10).

Note in chrome workers can't run locally (requires a webserver), unless you open chrome with the
--allow-file-access-from-files switch.

Lets have a basic look at how all of this works.

Observe the following snippet: 

var worker = new Worker('doWork.js');

worker.addEventListener('message', function(e) {
	alert(e.data); // Data received from client/worker thread
}, false);

worker.addEventListener('error', function(e) {
	alert(e.message); // something went wrong
}, false);

worker.postMessage('Hello Mars'); // Sending data to the worker thread

Firstly we need to create / instantiate a new worker object, you will notice that I passed a filename to its "constructor" - it points to the file / source code that's going to be executed within our worker thread. It is also possible to pass source code to it in the form of a blob url)

Notice that I attached a callback to the worker object's message event, this becomes necessary since the worker thread can't access objects living in the UI thread directly (thanks to thread-safety).

So you'll need to send messages between your threads, like seen on the last line of snippet 1 in which we send a message from our UI thread to our child/worker thread.

I also attached a callback to the worker's error event - allowing us to handle possible exceptions gracefully.

In the following snippet you can basically see what the file handling the worker thread will look like. 

importScripts('some_file_you_might_need.js');

self.addEventListener('message', function(e) {
	// do some vicious work
	self.postMessage("From Thread - " + e.data); // post a message back to the parent thread
}, false);

Similarly to the first snippet, we need to attach a handler to the message event (to receive messages from the parent thread) and use the postMessage function to send results back to its parent thread.

Note like previously stated that you will not be able to access objects living in your parent thread, e.g document, window objects, you will however have access to a subset of its functions, like timer functions, XMLHttpRequest (ajax) and others.

You will also notice the function importScripts - like the name suggests it allows you to include external scripts within your js file.

Now all of this will only work within the page that created the worker, but awesomely enough its also possible to create a worker that can be shared among your pages - which will be the topic of the next part.


Leave a Comment


Related Posts

JavaScript Threading - Part 1 (Timers)

December 18, 2012