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


Latest Posts

Dependency Injection using Ninject and PostSharp

April 26, 2016

Aspect Orientated Programming (AOP) - A Brief look at PostSharp

April 15, 2016

How to become a better programmer.

April 5, 2016

JavaScript Fundamentals - Hoisting

March 22, 2016

Quick and dirty look at ECMAScript 6

March 17, 2016

JavaScript Promises

March 9, 2016

CSS Combinators

March 7, 2016

Shingles Awareness

March 4, 2016

Google Analytics : Measurement Protocol

February 24, 2016

Interesting JavaScript - SQLite (sql.js)

February 18, 2016


Most Commented on Posts

Moving items between listboxes in ASP.net/PHP example

Move items between two listboxes in ASP.net(C#, VB.NET) and PHP
June 12, 2008

Simple WYSIWYG Editor

Creating a WYSIWYG textbox for your website is actually quite simple.
February 1, 2007

C# YouTube : Google API

Post on how to integrate with YouTube using the Google Data API
March 12, 2011

Populate a TreeView Control C#

Populate a TreeView control in a windows application.
August 27, 2009

ASP.NET(C#) : Autocomplete TextBox - Part 1 (From Scratch)

Part one of how to create an autocomplete textbox using ASP.NET(C#)
March 27, 2011


Angular   Architecture   ASP.NET   Astronomy   Breaking News   C#   C++   Coding Horrors   Comedy   Cross Browser   CSS   Design Patterns   ES6   Google API   IIS   Integration   JavaScript   Jquery Mobile   Love and War   Microsoft Office   Ninject   Personal   PHP   PostSharp   SEO   South Africa   SQL   Threading   TypeScript   Visual Basic   XML