Peter Lubbers - Pro HTML 5 Programming

234
CHAPTER 9 ■ USING THE HTML5 WEB STORAGE API
notifications. In the second window, open the racerBroadcast.html file. After this page, too, has
connected to the WebSocket broadcast site, enter a name for your racer, and click the Start button. You’ll
see that the racer broadcast has transmitted the location of your favorite racer, and it should show up in
the leader board in your other browser window. Figure 9-9 shows what this looks like.
Figure 9-9. Race page and racerBroadcast.html side by side
Now, navigate to other racing club pages using the Signup and About the Race links on the left side
of the page. Because all of these pages have been configured to load our script, they will immediately
load and populate the leader board with the previous racer data, which was delivered while browsing
other pages. Send more racer status notifications (from the broadcast page), and you’ll see them
propagate through the club site pages as you navigate, as well.
Now that we’ve finished our code, let’s review what we’ve built. We’ve created a simple function
block, suitable for inclusion in a shared JavaScript library, which connects to a WebSocket broadcast
server and listens for racer updates. When an update is received, the script displays the position in the
page and stores it using HTML5 sessionStorage. When the page is loaded, it checks for any previously
stored racer position values, thus maintaining the state as the user navigates the site. What are some of
the benefits we gain from this approach?
• Reduced network traffic: Race information is stored locally in the browser. Once it
arrives, it sticks around for every page load, rather than using cookies or server
requests to fetch it again.
• Immediate display of values: The browser pages themselves can be cached rather
than loaded from the network, because the dynamic parts of the page—the
current leaderboard status—are local data. This data is rapidly displayed without
any network load time.