- Web Worker provides a way to get Concurrency in JavaScript programming.
- Web Worker runs in browsers background.
- Web Worker are available in 2 different taste Dedicated and Shared worker.
- In this demo, “We will learn to create a dedicated worker which will generate square of number”.
- We can check the browser support for Web Worker by checking the existence of Worker property inside the window object.The following code shows the script for detecting web worker feature support.
<!DOCTYPE html>
<html>
<head lang="en">
<title>Web Worker Feature Detection</title>
</head>
<body>
<script>
var isWorkerSupported = window.Worker ? true : false;
console.log("Is Web Worker Supported: "+isWorkerSupported);
</script>
</body>
</html>
- As of today(2nd April 2015) we can find the support of web worker using Can I use? online tool.The following screenshot shows the different browser support.
- The following code shows a dedicated worker for creating square of number and present in doSquareWorker.js file.The keyword self refers to the current worker script listening to a message event.It means any script pass a message using postMessage() method to the doSquareWorker.js.The worker extract the passed object using event.data property and calculates the square using Math.pow() method and pass the result to the calling script using postMessage() method.
self.addEventListener("message",function(event){
var inputData = event.data,
inputNumber = parseInt(inputData.number,10),
squareResult = Math.pow(inputNumber,2);
self.postMessage({result:squareResult});
});
- The following code shows the initialization of a dedicated worker and passing the number to the doSquareWorker.js file and present in squareWorkerDemo.html file.A input type number element is present which takes a number from the user and when the square button is clicked it post the number as a message to the doSquareWorker.js . square worker calculates the square and returns the response to calling script.The calling script extract the result from worker using the similar approach by listening to the message event in worker object.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Square Web Worker Demo</title>
</head>
<body>
<h1 id="resultContainer"></h1>
<input type="number" id="inputNumber" placeholder="Enter a number" value="5">
<button id="squareButton"> SQUARE</button>
<script>
var squareWorker = new Worker("doSquareWorker.js"),
resultContainer = document.getElementById("resultContainer"),
squareButton = document.getElementById("squareButton"),
inputNumber=document.getElementById("inputNumber");
squareButton.addEventListener("click",function(){
squareWorker.postMessage({number:inputNumber.value});
});
squareWorker.addEventListener("message",function(workerEvent){
var responseData = workerEvent.data,
squareResult= responseData.result;
resultContainer.innerText = squareResult;
});
</script>
</body>
</html>
- The following screenshot shows the output of previous code in chrome browser.
- The demo code can be downloaded from below link.
- The demo code can be found in the following embedded Plunker.
