Peter Lubbers - Pro HTML 5 Programming

document.getElementById("helloButton").onclick = function() {
worker.postMessage("Here's a message for you");
}
CHAPTER 8 ■ USING THE HTML5 WEB WORKERS API
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);
function messageHandler(e) {
// process message from worker
}
Coding the HTML5 Web Worker JavaScript File
You must now add similar code to theWeb 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.
Handling Errors
Unhandled errors in an HTML5 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);
197