HTML5 Guidelines for Web Developers

226 Chapter 8—Web Storage and Offline Web Applications 8.4.3.3 JavaScript Functions of the Game The HTML part of our example was ...

8.4 Example: Click to tick! 227 canvas.onclick = function(evt) { checkPosition(evt); }; ... startGame(0); }; The functions addOp ...

228 Chapter 8—Web Storage and Offline Web Applications The timestamp ts is the time in milliseconds since 1.1.1970. Now that the ...

8.4 Example: Click to tick! 229 _get('updateButton').style.visibility = 'visible'; } else { _get('onlineStatus').innerHTML = 'Of ...

230 Chapter 8—Web Storage and Offline Web Applications z Combine with Geolocation API. This expansion takes our example a bit fu ...

9 WebSockets The Hypertext Transfer Protocol (HTTP) is just great. Together with FTP, SMTP, IMAP, and many others, it is part of ...

232 Chapter 9—WebSockets GET determines the method for the request; in this case we want to get informa- tion from the server. T ...

9.1 The WebSocket Server 233 However, we will provide a few comments to clarify: Although an HTTP request in- volves sending sev ...

234 Chapter 9—WebSockets node.js does not yet contain a WebSocket server, but help is available on the In- ternet. At http://git ...

9.2 Example: A Broadcast Server 235 Figure 9.1 Four connections to the WebSocket broadcast server 9.2.1 The Broadcast Client In ...

236 Chapter 9—WebSockets function $(a) { return document.getElementById(a); } var ws, currentUser, ele; window.onload = function ...

9.2 Example: A Broadcast Server 237 function sendmsg() { ws.send($("ta").value); } ws.onclose = function(e){ $("status").innerHT ...

238 Chapter 9—WebSockets The first event handler (connection) handles the new connections. As in Chap- ter 8 in the section 8.5, ...

9.3 Example: Battleships! 239 As with the connection event, all users receive a message in the close event as well. In this case ...

240 Chapter 9—WebSockets Figure 9.2 The game “Battleships!” in action In the HTML code, control elements and game dialogs are de ...

9.3 Example: Battleships! 241 Figure 9.3 Start page of the “Battleships!” game If you click OK after logging in, the connection ...

242 Chapter 9—WebSockets Before we can start digitalizing the ships, we need to find a partner so we can play. This is done by s ...

9.3 Example: Battleships! 243 var txt = ''+msg.from.nick+''; txt += 'wants to play a game with you.'; txt += 'Accept?'; frm.send ...

244 Chapter 9—WebSockets If the invitation to play was answered with Yes, the server is informed that the two players are now pl ...

9.3 Example: Battleships! 245 the fields belonging to each ship as an array of arrays. A copy of these arrays is worked through ...