All About HTML5 Web Workers

The Web Workers API makes it possible to run JavaScript files asynchronously and autonomously. Web workers are essentially threads that run JavaScript files. Therefore, when using a web worker, multiple threads can be implemented in a web application. Create a web worker You create a network of such workers:

var webworker = new Webworker ("https://google.com/");

The string passed as a parameter to Worker () is the URL of the JavaScript file to execute. Communicate with network workers Use the HTML5 messaging API to communicate with Web workers, publish messages, and receive messages from Web workers. Here is an example:

var webworker = new Webworker ("https://google.com/");

webworker.onmessage = Function (event) {
    alert ("Answer:" + event.data);
}

webworker.postMessage ("Hello webworker!");

First, create a worker. Second, set up onmessage event monitoring function among network workers. This function is called when a worker sends a message to the page in which it was created. Third, use the worker.postMessage () function to send the message to the Web Worker. Internet workers can answer this:

this.onmessage = function (event) {
    postMessage ("Response of Network Worker");
}

This code is part of the web worker's JavaScript file. This keyword is a reference to the instance of the web worker itself. The onmassage event listener function is added to the web worker. This is not the same message listener as the page created by the added Web worker, even if both are added to the Worker instance. Network workers use postMessage() to respond to the message. Exchange JSON In the first implementation of a web worker, the browser only allows the exchange of strings as messages. You can use the JSON.stringify () function to encode a JSON object and decode it again using the JSON.parse () function. However, recent implementations allow the exchange of values or JSON objects that can be processed by a structured cloning algorithm. The implementation of network workers This is a complete implementation of a web worker:

this.onmessage = function (event) {
    postMessage ("Network Worker Response");
}

// Implementation of web worker thread code
setInterval (function () {runEveryXSeconds ()}, 5000);

Function runEveryXSeconds () {
    postMessage ("Return the call to:" + new Date (). getTime ());
}

The network worker listens for messages and sends a message every 5 seconds to launch its page. An instance of Web Worker Here you can execute the sample code shown above. Click the button below to run the example. Start Web Worker To stop sending messages every 5 seconds, press Update in your browser. Web worker sandbox Web workers run in a limited environment, which means that Web workers can only access features normally accessed by JavaScript while running in a browser. Web workers do not have access to the DOM of pages created by Web workers. The following is a list of what network workers can do with web workers' JavaScript: Listen to messages, use on message events monitoring function. Send the message via the postMessage() function. Send an AJAX request using XMLHttpRequest. Create a timer using the setTimeout() and sendInterval() functions. Network socket SQL Web database Network workers Import more scripts using importScripts() Import JavaScript into web worker You can use the importScripts() function to import JavaScript files for use in Web Workers. This is a special feature available to network workers. Here is an example:

importScripts("myscript.js");
importScripts("scriptOne.js", "scriptTwo.js");

You can load one or more scripts using the importScripts () function, as shown in the previous example. The scripts are loaded and run one by one synchronously.