CHAPTER 10 USING THE WEB WORKERS API
Figure 10-3. A simple web page that uses Web Workers
To set up proper communication with your Web Worker, code has to be added to the main page (the page that calls the Web Worker) as well as the worker JavaScript file.
Coding the Main Page
To communicate from the page to the Web Worker, you call postMessage to pass in the required data. To listen to incoming messages and errors that are sent by the Web Worker to the page, you set up an event listener.
To set up communication between the main page and the Web Worker, first add the call to postMessage to the main page, as follows:
document.getElementById("helloButton").onclick = function() { worker.postMessage("Here's a message for you");
}
In the preceding example, a message is sent to the Web Worker when the user clicks the Post a Message button. Next, add an event listener to the page that listens for messages from the Web Worker:
worker.addEventListener("message", messageHandler, true);
245
CHAPTER 10 USING THE WEB WORKERS API
function messageHandler(e) {
// process message from worker
}
Coding the Web Worker JavaScript File
You must now add similar code to the Web Worker JavaScript file—event handlers must be set up to process incoming messages and errors, and communication with the page is handled with a call to postMessage.
To complete the communication between the page and the Web Worker, first, add the call to postMessage; for example, inside a messageHandler function:
function messageHandler(e) {
postMessage("worker says: " + e.data + " too");
}
Next, add an event listener to the Web Worker JavaScript file that handles messages coming from the main page:
addEventListener("message", messageHandler, true);
In this example, the messageHandler function is called immediately when the message is received so that the message can be echoed back.
Note that if this was a shared worker, you would use a slightly different syntax (using a port):
sharedWorker.port.addEventListener("message", messageHandler, true); sharedWorker.port.postMessage("Hello HTML5");
In addition, the worker can listen to a connect event for incoming connections. You can use this to count active connections.
Handling Errors
Unhandled errors in a Web Worker script fire error events on the Web Worker object. Listening for these error events is especially important when you are debugging scripts that make use of Web Workers. The following shows an example of an error handling function in a Web Worker JavaScript file that logs errors to the console:
function errorHandler(e) { console.log(e.message, e);
}
To handle the errors, you must add an event listener to the main page:
worker.addEventListener("error", errorHandler, true);
Most browsers don’t have a great way to step through Web Worker code yet, but Google Chrome offers Web Worker debugging capabilities in its Chrome Developer Tools (in the Scripts tab, look for Worker inspectors), as shown in Figure 10-4.
246
CHAPTER 10 USING THE WEB WORKERS API
Figure 10-4. Web Worker debugging options in Chrome Developer Tools
Stopping Web Workers
Web Workers don’t stop by themselves; but the page that started them can stop them. If the page is closed, Web Workers will be garbage-collected, so rest assured you won’t have any zombie workers hanging around performing background tasks. However, you may want to reclaim resources when a Web Worker is no longer needed―perhaps when the main page is notified that the Web Worker has finished its tasks. You may also wish to cancel a long-running task in response to user actions. Calling terminate stops the Web Worker. A terminated Web Worker will no longer respond to messages or perform any additional computations. You cannot restart a worker; instead, you can create a new worker using the same URL:
worker.terminate();
Using Web Workers within Web Workers
The Worker API can be used inside Web Worker scripts to create subworkers:
var subWorker = new Worker("subWorker.js");
247
CHAPTER 10 USING THE WEB WORKERS API
Lots of Workers
Peter says: “If you spawn a Worker that recursively spawns subworker with the same JavaScript source file, you will see some interesting results, to say the least.”
Using Timers
Although Web Workers cannot access the window object, they can make use of the full JavaScript timing API, typically found on the global window:
var t = setTimeout(postMessage, 2000, "delayed message");
Example Code
For completeness, Listings 10-2 and 10-3 show the code for the simple page and the Web Worker JavaScript file.
248
CHAPTER 10 USING THE WEB WORKERS API
Listing 10-2. Simple HTML Page That Calls a Web Worker
<!DOCTYPE html>
<title>Simple Web Workers Example</title> <link rel="stylesheet" href="styles.css">
<h1>Simple Web Workers Example</h1>
<p id="support">Your browser does not support Web Workers.</p>
<button id="stopButton" >Stop Task</button> <button id="helloButton" >Post a Message</button>
<script>
function stopWorker() { worker.terminate();
}
function messageHandler(e) { console.log(e.data);
}
function errorHandler(e) { console.warn(e.message, e);
}
function loadDemo() {
if (typeof(Worker) !== "undefined") { document.getElementById("support").innerHTML =
"Excellent! Your browser supports Web Workers";
worker = new Worker("echoWorker.js"); worker.addEventListener("message", messageHandler, true); worker.addEventListener("error", errorHandler, true);
document.getElementById("helloButton").onclick = function() { worker.postMessage("Here's a message for you");
}
document.getElementById("stopButton").onclick = stopWorker;
}
}
window.addEventListener("load", loadDemo, true); </script>
Listing 10-3. Simple Web Worker JavaScript File
function messageHandler(e) {
postMessage("worker says: " + e.data + " too");
}
addEventListener("message", messageHandler, true);
249