Peter Lubbers - Pro HTML 5 Programming

158
CHAPTER 6 ■ USING THE HTML5 WEBSOCKET API
Figure 6-7. broadcast.html in action in two browsers
Building an Application with HTML5 WebSockets
Now that we’ve seen the basics of WebSocket, it’s time to tackle something a little more substantial.
Previously, we used the HTML5 Geolocation API to build an application that allowed us to calculate
distance traveled directly inside our web page. We can utilize those same Geolocation techniques, mixed
together with our new support for WebSockets, and create a simple application that keeps multiple
participants connected: a location tracker.
■ Note We’ll be using the broadcast WebSocket server described above, so if you aren’t familiar with it you
should consider taking some time to learn its basics.
In this application, we’ll combine the WebSocket and Geolocation support by determining our
location and broadcasting it to all available listeners. Everyone who loads this application and connects
to the same broadcast server will regularly send their geographic location using the WebSocket. At the
same time, the application will listen for any messages from the server and update in real-time display
entries for everyone it hears about. In a race scenario, this sort of application could keep runners
informed of the location of all their competitors and prompt them to run faster (or slow down).