HTML and CSS Reference
In-Depth Information
method. The code wouldn't need this if it used onmessage .
Next is the messages.js worker:
importScripts('xhr.js');
importScripts('database.js');
var connections = [];
onconnect = function(event) {
connections.push(event.ports[0]);
}
var xhr = new XHR('/get-new-messages');
xhr.oncomplete = function (messages) {
database.updateMessages(messages);
for (var i = 0; i < connections.length; i++) {
connections[i].postMessage(JSON.stringify(messages));
}
xhr.send(); // causes us to loop forever
};
xhr.send();
When a client document connects to the worker, the connect
event is fi red, which allows me to capture the connection port.
This is collected through the event.ports[0] reference, even
though there will never be more than one item inside the ports
property. However the worker reference is inside this, so we
can use this to post messages and receive messages.
As you see in the previous example, when the Ajax complete
function runs, I loop through all of the connected ports and send
them each a message of the new email messages that have
come in. This way the connected clients act as dumb terminals,
oblivious to any of the real work going on to store the messages
in the client-side database.
Debugging a worker
We've gotten to the point in web development where the tools
for debugging are so much better than 10 years ago. All the lat-
est browsers come with their own JavaScript debugger (though
Firefox still requires Firebug as a plugin); it's a haven of debug-
ging when compared to the bad old days of using alert boxes
left, right, and centre.
 
Search WWH ::




Custom Search