Software Development Tricky

Thursday 20 April 2017

Web Worker in Javascript

Why we choose web worker in Javascript?

¨       The JavaScript code that write will usually execute in single thread. The browser works it way through this list execution task one at a time.
¨       The problem with a single-thread architecture is that particular task takes long time to complete everything else is held up until task that finishes. This is known as blocking
¨       In  client-side JavaScript applications, using a single-threaded architecture can lead to your app becoming slow or even completely unresponsive
¨       Web workers provides a facility for creating new thread for executing your JavaScript code
¨       Web workers creating a multi-threaded architecture in which browser can execute multiple task at once. Creating new threads for handling large tasks allows you to ensure that your app stays responsive and doesn’t freeze up

Reference Demo: https://nerget.com/rayjs-mt/rayjs.html

Benefits:

¨       It allow to run JavaScript code in background
¨       Web workers allow you to do concurrency in an easier way. It handle task running in parallel
¨       They don’t necessarily block each other and they don’t block the UI

Note:

¨       Call backs allow you to manage concurrency. That is handling tasks. Not always in an easy way

Drawback:

¨       Web workers can’t access DOM element from web page
¨       Web worker can’t access global variables and JavaScript function from web page
¨       Web worker can’t call alert() or confirm() functions
¨       Objects such as window, document and parent can’t be accessed inside the web worker

Sample Web worker Application:

      Step 1: make index.html page like this

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<!DOCTYPE html>
<html>
    <head>
        <title>Web Worker Demo</title>
        <script src="index.js"></script>
    </head>
    <body>
        <button onclick="startCalculation()">Start Calculation</button>
        <button onclick="sendTextMsg()">Send Text Message</button>
        <button onclick="Stop()">Stop Web Worker</button>
  <br/>
        <label id="result"></label>
    </body>
</html>

Step 2: make index.js like this

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
var worker = new Worker('demoWorker.js');

function startCalculation() {
    worker.postMessage({'cmd': 'calculate', 'values': [12, 10], 'msg': ''});
}

function sendTextMsg() {
    worker.postMessage({'cmd': 'message', 'values': null, 'msg': 'Hello! Mani'});
}

function Stop() {
    worker.postMessage({'cmd': 'message', 'values': null, 'msg': 'Bye Bye'});
}

worker.addEventListener('message', function(e) {
    document.getElementById("result").innerHTML = e.data;
})

Step 3: make demoWorker.js like this

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
self.addEventListener('message', function(e){
    var data = e.data;
    switch (data.cmd) {
        case 'calculate':
        self.postMessage("Result: " + (data.values[0] + data.values[1]));
        break;
        case 'message':
        self.postMessage("Message: " + data.msg);
        break;
        case 'stop':
        self.postMessage("Hello! Mani: " + data.msg);
        self.close(); //terminate web worker
        default:
        self.postMessage("Unknown comment");
    };
}, false)

Step 4: Now run this application any of hosting environment like IIS, IIS Express, Appache.....

      Step 5: That's All

      Output:


 If you like this post. Kindly share your feedback.


Posted by at

Followers