Peter Lubbers - Pro HTML 5 Programming

CHAPTER 6 ■ USING THE HTML5 WEBSOCKET API
function handleLocationError(error) {
switch(error.code)
{
case 0:
updateGeolocationStatus("There was an error while retrieving your location: " +
error.message);
break;
case 1:
updateGeolocationStatus("The user prevented this page from retrieving a
location.");
break;
case 2:
updateGeolocationStatus("The browser was unable to determine your location: " +
error.message);
break;
case 3:
updateGeolocationStatus("The browser timed out before retrieving the location.");
break;
}
}
Adding the WebSocket Code
Now, let’s examine something more substantial. The loadDemo function is called on the initial load of our
page, making it the starting point of the application.
function loadDemo() {
// test to make sure that sockets are supported
if (window.WebSocket) {
}
// the location of our broadcast WebSocket server
url = "ws://localhost:8080";
socket = new WebSocket(url);
socket.onopen = function() {
updateSocketStatus("Connected to WebSocket tracker server");
}
socket.onmessage = function(e) {
updateSocketStatus("Updated location from " + dataReturned(e.data));
}
The first thing we do here is set up our WebSocket connection. As with any HTML5 technology, it is
wise to check for support before jumping right in, so we test to make sure that window.WebSocket is a
supported object in this browser.
Once that is verified, we make a connection to the remote broadcast server using the connect string
format described above. The connection is stored in our globally declared socket variable.
Finally, we declare two handlers to take action when our WebSocket receives updates. The onopen
handler will merely update the status message to let the user know that we made a successful
connection. The onmessage will similarly update the status to let the user know that a message has
161