MVC and HTML5 Web Workers

HTML5 Web Workers are cool. As a developer that spends most of his time working with server side code, I like to think of Web Workers as .net's System.Threading for the front end. Basically, Web Workers allow you to run client side scripts without interrupting the page or any other scripts that are currently running. They are basically an API specification that lets you create background JavaScript threads to process CPU intensive tasks. The major advantage to using Workers is that it allows long tasks to be executed without blocking to keep the page responsive. It's really good for fire-and-forget tasks and tasks that you can leave to run while the user continues working on the page. Another great thing about Workers is that getting started with them is really easy.

In this post, I am going to run through a simple example using Asp.net MVC. We are going to build a page that performs a long running task on the server using Web Workers. First off, create a new MVC project in Visual Studio.

Then add a new Controller, and let's add a new method on the Controller - I called mine "Webworkers".

This is just going to be a simple page that calls a long running process on our Controller using HTML5 Web Workers. Add the following code to your View.

Right, let's break this down a little. Firstly, I am including a reference to Modernizer in the HEAD tags. If you created a new MVC3 in Visual Studio it will automatically get added to your Scripts folder. Using Modernizer is a quick and efficient way to ensure that your users browser has the required features. Next, I am including a bit of JavaScript on the page to call our Worker. As you can see I am telling the Worker to execute a script called "LogStats.js". This is just a simple piece of code that does an AJAX call to a method on my Controller. I will run through that in more detail later. The Worker then uses a method called "onMessage" to get the status of the thread. Depending on how you write your code, you could also consider this your "Success" status. Let's run through the code that is executed by the Worker - "LogStats.js".

The above code is using XMLHttpRequest object to do a simple POST request to a method on our Controller. Let's create the method on the Controller and call it "UpdateStats". In this example, I am not passing any parameters through, but these could just as easily be added onto the request. Workers use a method called "postMessage" to return a result to the thread that called it. Whatever we return in this postMessage will be returned to the original thread.

That's it! If you fire up the example, you will notice that the code executes in the background and doesn't affect the responsiveness of the page. In this example I have called a method on a controller in the background, however you could run some intensive JavaScript on the front end too. The list of uses for using HTML5 Web Workers is endless! The HTML5 Web Workers are "truly" asynchronous.

Support

As you will have noticed, I included a reference to Modernizer to check if the browser supports Workers. At the time of writing this article, there is a surprising amount of support for Web Workers. However, some of the major browsers (IE) are still playing a bit of catch-up. Firefox, Chrome, Safari, Opera and IE (10) all offer support for Workers. For more information check out caniuse.com. If the browser that you are targeting doesn't fully support Web Workers yet, you could simply fall back to calling the service traditionally.

For more information on the HTML5 Web Workers spec, please check out the W3C draft. There are some good simple examples on using Workers on the site. A copy of the project used in this example is available to download here.