Peter Lubbers - Pro HTML 5 Programming

Figure 9-7. The example race website
CHAPTER 9 ■ USING THE HTML5 WEB STORAGE API
Each of our web pages will contain a common section to display the leader board data. Each entry in
the leader board will show the name of one of our racers and his or her current distance from the finish
line. When any of our pages is loaded, it will make a WebSocket connection to a race broadcast server
and listen for messages indicating the position of a racer. The racers, in turn, will be sending their
current position to the same broadcast server, causing the position data to stream down to the page in
real time.
All of this has been covered in previous chapters related to Geolocation and WebSockets. In fact,
much of the demonstration code here is shared with the examples from earlier in this book. However,
there is one key difference in this example: when the data arrives in the page, we will store it in the
session storage area for later retrieval. Then, whenever a user navigates to a new page, the stored data
will be retrieved and displayed before making a new WebSocket connection. In this way, the temporary
data is transferred from page to page without using any cookies or web server communication.
Just as we did in the WebSockets chapter, we’ll send our racer location messages across the web in a
simple format that is easy to read and parse. This format is a String that uses the semicolon character (;)
as a delimiter separating the chunks of data: name, latitude, and longitude. For example, a racer named
Racer X who is at latitude 37.20 and longitude –121.53 would be identified with the following string:
;Racer X;37.20;-121.53
Now, let’s dig into the code itself. Each of our pages will contain identical JavaScript code to
connect to the WebSocket server, process and display leader board messages, and save and restore the
leader board using sessionStorage. As such, this code would be a prime candidate to include in a
JavaScript library in a real application.
First, we’ll establish a few utility methods that you’ve seen before. To calculate the distance of any
particular racer from the finish line, we need routines to calculate distance between two geolocation
positions as shown in Listing 9-5.
Listing 9-5. Distance Calculation Routine
// functions for determining the distance between two
// latitude and longitude positions
function toRadians(num) {
return num * Math.PI / 180;
}
225