Web Worker: a concurrent application

The Worker object run a script at the same time a page is displayed, operating asynchronously and that communicate with the page.

The script loaded by the Worker can thus run a long treatment without blocking the the current page or interactions with the user. A bit like Ajax, but client-side in JavaScript rather than on the server.
Ajax may be used when data stored on the server are needed, while a Worker is relevant when they are provided by the user.

Be warned first: Creating a worker is very costly in resources: we should not create multiple instances simultaneously if we want the app to work on all computers including the less powerful.

The Worker object

Compatibility: IE 10, Firefox 31, Chrome 31, Safari 7, latest Android et iOS.

In the web page

It is very easy to start a task to run in parallel ...

var w = new Worker("myscript.js");

We can then communicate with the script. To receive the messages it sends:

w.onmessage = function(evt) {
  alert(evt.data);
}

Replace alert by the instructions of your choice.

And to send a message from the web page to the script:

w.postMessage("...content...");

In the script

The script for his part uses similar functions, but without the reference to the Worker as it is inside, the Worker object is a container in which runs the script.

To receive data:

onmessage = function(evt) {
  console.log(evt.data);
}

To send data:

postMessage("...data...");

Demonstration

To simplify the demonstration, we use very a short script (the calculation of the greatest common divisor), while in production only a long processing justify the use of a Worker.

Enter two numbers and click on the Send button

Greatest common denominator:

Result

Source code in the HTML page

JavaScript

var w = new Worker("myscript.js");
var a = 0;
var b = 0;

function message() {
  w.postMessage(JSON.stringify( {"a":a,"b":b} ));
}

w.onmessage = function(evt) {
  document.getElementById("result").innerHTML = evt.data;
}

HTML

<form method="post" action="">
  Nomber a <input type="text" value="" onchange="a=this.value;">
  Nomber b <input type="text" value="" onchange="b=this.value;">
  <input type="button" value="Send" onclick="message()">
</form>

Source code in the myscript.js file

function gcd(a,b) {
  while (a!=b) {
    if(a>b) a-=b; 
    else    b-=a;
  }
  return a;
}

onmessage = function(evt) {
  var obj = JSON.parse(evt.data);
  var a = obj["a"];
  var b = obj["b"];
  var x = gcd(a, b);
  postMessage(x);
}

The SharedWorker object

Compatibility: Edge, Firefox 31, Chrome 31. No mobile. (In may 2015).

A Worker uses a lot of resources and it is one of the reasons why SharedWorker exists: it allows a single script running in parallel to be used by several windows or frames. Another equally important reason is that it allows them to communicate.

They are also other ways to exchange data between windows and iframes as described in the article: Let iframes to communicate.