JavaScript Threading - Part 2 (Worker)



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:

Snippet 1
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 thats 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.

Snippet 2 - doWork.js
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.







Post comment

Name *
Email
Title
Body *
Security Code
*
* Required fields

Related Posts

Latest Posts

MS SQL: Parameter Sniffing


2012-05-21 22:38:48

Be the best stalker you can be


2011-12-13 22:33:54

Top 5 posts

Moving items between listboxes in ASP.net/PHP example


Move items between two listboxes in ASP.net(C#, VB.NET) and PHP
2008-06-12 17:07:43

Simple WYSIWYG Editor


Creating a WYSIWYG textbox for your website is actually quite simple.
2007-02-01 12:00:00

C# YouTube : Google API


Post on how to integrate with YouTube using the Google Data API
2011-03-12 08:37:51

Populate a TreeView Control C#


Populate a TreeView control in a windows application.
2009-08-27 16:01:03

Cross Browser Issues: Firefox Word Wrapping


Firefox word wrapping issues
2008-06-09 09:51:21