How To Use Javascript Workers (Very Simple Example)

Welcome to a tutorial and example on how to use Javascript workers. So you have heard of Javascript workers and their “threading powers”. But just how do we create and use Javascript workers?

Yep, it’s that simple. But read on if you need a detailed example!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TLDR – QUICK SLIDES

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

QUICK NOTES

• Use http:// to access 2-main.html, not file://.

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

 

STEP 1) CREATE WORKER SCRIPT

// (A) ON RECEIVING DATA FROM "MAIN PAGE"
onmessage = evt => {
  // (A1) DO PROCESSING
  console.log("Worker has received data");
  console.log(evt.data);
  var result = +evt.data.a + +evt.data.b;
 
  // (A2) RESPOND BACK TO "MAIN PAGE"
  postMessage(result);
};
 
// (B) OPTIONAL - HANDLE ERRORS
onmessageerror = err => console.error(err);
onerror = err => console.error(err);

This should be very straightforward, do whatever processing is required in your worker script. There are only 3 “important” events to take care of:

• onmessage When the worker receives data from the “main page”. Use this as the “cue to start processing”.
• onmessageerror When the data from the “main page” cannot be deserialized. I.E. Corrupted data.
• onerror Whatever error happens.

 

 

STEP 2) CREATE WORKER OBJECT IN “MAIN PAGE”

2A) DUMMY HTML FORM

<!-- (A) DUMMY HTML FORM -->
<form onsubmit="return workDemo()">
  <input type="number" id="numA" required value="99">
  <input type="number" id="numB" required value="101">
  <input type="submit" value="Go!">
</form>

For this example, we will do the very unproductive process of sending 2 numbers to the worker script to be added together…

 

2B) WORKER PROCESSING

// (B) CREATE A NEW WORKER
var work = new Worker("1-worker.js");
 
// (C) DO THIS ON WORKER RESPONSE
work.onmessage = evt => {
  console.log("Worker has responded");
  console.log(evt.data);
};
 
// (D) OPTIONAL - MANAGE ERRORS
work.onerror = err => {
  console.error("Worker script error!");
  console.error(err);
};
 
// (E) SEND DATA TO WORKER
function workDemo () {
  work.postMessage({
    a: document.getElementById("numA").value,
    b: document.getElementById("numB").value
  });
  return false;
}

Yep, as in the introduction –

• We create a work = new Worker("1-worker.js") object.
• Send data (or message) to the worker – work.postMessage(DATA).
• Lastly, the worker will respond back with the results when it is done processing – work.onmessage = evt => {...}.

 

 

 

RESTRICTION – NO ACCESS TO DOM!

Take extra note, workers do not have access to the DOM. That is, document and window do not exist in the worker. Think of it this way – Workers are “standalone Javascript processes”.

 

SAME-ORIGIN POLICY APPLIES

The same-origin policy applies to workers.

• If your website is http://site.com, the worker script must be loaded from the same domain – new Worker("http://site.com/WORKER.JS")
• That is, it will not work if you try to load the worker script from another domain or CDN – new Worker("http://another-site.com/WORKER.JS")

 

MULTI-THREADING HICCUPS

Workers may seem to be the miracle pill for system performance, but there is a possible critical flaw when it comes to clashes in computations. Watch this video if you are interested.

 

LINKS & REFERENCES

• Using Web Workers – MDN
• Worker – MDN
• JavaScript Web Workers: A Beginner’s Guide – SitePoint

 

INFOGRAPHIC CHEAT SHEET