JavaScript Worker

Javascript Course

• Receiving data in the worker file
• Terminate Worker
• Importing scripts in worker file

Web Worker is a JavaScript object running in the background, without affecting the performance of the page. The worker thread can perform tasks without interfering with the user interface.
You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the background.

Creating a Web Worker

Generally, a JavaScript web worker is created in a separated file on server, for exampe worker.js. This file contains the code that will run in the worker thread.

You can run whatever JS code you like inside the worker file, with some exceptions.
You can't directly manipulate the DOM from inside a worker, or use default methods and properties of the window, document, and parent objects. But you can use a large number of items available under window, including: XMLHttpRequest (Ajax), WebSockets, Navigator and IndexedDB.

In the page where you want to use the web worker, create an Worker object instance with this syntax.

if(window.Worker){
 var wrk = new Worker('worker.js');
}

Simple JavaScript Worker exampe

Here is an exampe, a script that displays a count number which runs continuously in a worker file. The script is stored in the "workers_ex.js" file and used it into a webpage.

Code in workers_ex.js

var ic =0;

function timedCount(){
 ic++;
 postMessage(ic);
 setTimeout('timedCount()', 500);
}

timedCount();

Code in webpage

<h4>Example JavaScript Worker</h4>
<blockquote>Count numbers: <b id='resp'></b></blockquote>
<button id='bt_startw'>Start Worker</button> - 
<button id='bt_stopw'>Stop Worker</button> - 

<script>
var wrk; //to store Worker object
var resp = document.getElementById('resp');

function startWorker(){
 if(window.Worker){
 //if wrk undefined or false, defines it
 if(!wrk) wrk = new Worker('javascript/worker_ex.js');

 //adds data in #resp when message from worker
 wrk.addEventListener('message', (ev)=>{
 resp.innerHTML = ev.data;
 });
 }
}

function stopWorker(){ 
 wrk.terminate();
 wrk = false;
}

//click event on Start /Stop Worker buttons
document.getElementById('bt_startw').addEventListener('click', startWorker);
document.getElementById('bt_stopw').addEventListener('click', stopWorker);
</script>

Receiving data in the worker file

The page script cand send data to the worker script with the postMessage() method.

addEventListener('message', (ev)=>{
 var data = ev.data;
}

You can send any type of data with postMessage(): string, number, array, object, boolean.

Code in worker_ex.js

//when data is received from webpage
addEventListener('message', (ev)=>{
 var str = ev.data;

 //object with data to send with postMessage()
 var re ={s:str.split('').reverse().join(''), n:str.length};
 postMessage(re);
}

Code in webpage

<h4>Example data to worker</h4>
<p>Type some text in this field:</p>
Text: <input type='text' id='inp1'/>
<blockquote id='resp'>Here it displays the text reversed, and number of characters.</blockquote>

<script>
var resp = document.getElementById('resp');

//defines Worker object if the browser supports it
var wrk = (window.Worker) ? new Worker('javascript/worker_ex.js') :false;

//if wrk defined
if(wrk){
 //on keyup event
 document.getElementById('inp1').addEventListener('keyup', (ev)=>{
 wrk.postMessage(ev.target.value); //post data to worker
 });

 //gets data from worker
 wrk.addEventListener('message', (ew)=>{
 if(ew.data.n) resp.innerHTML ='Reversed text: '+ ew.data.s +'<br>Nr. characters: '+ ew.data.n;
 });
}
</script>

Normally web workers are not used for such simple scripts, but for more CPU intensive tasks, in applications like games, WebSockets, and repetitive ajax requests.
To debug the JS code in worker file, you can use console.log() method in that file.

Terminate Worker

When a web worker object is created, it will continue to listen for messages (even after the external script is finished) until it is terminated.
To terminate a web worker from the main page, and free browser/computer resources, use the terminate() method.

//worker file
// code to run..

if(some condition) close();

Importing scripts in worker file

With the importScripts() function you can import one or more external scripts in the worker file.

importScripts('foo.js'); //imports foo.js
importScripts('foo.js', 'bar.js'); //imports two scripts
importScripts('//example.com/hello.js'); //imports scripts from other domain