Peter Lubbers from Kaazing gave a presentation on HTML5 features such as Web Workers, Geolocation, and WebSockets. He discussed how these new technologies allow for asynchronous background processing, location detection, and bi-directional real-time communications without polling. Browser support for HTML5 features was also reviewed.

1. Peter Lubbers Kaazing #dcode HTML5WebSockets,Web Workers,andGeolocation Unleashed!

3. Co-Founder San Francisco HTML5 User Grouphttp://www.sfhtml5.org/

4. Co-author Pro HTML5 Programming

5. Ultra Distance Runner

6. Twitter: @peterlubbersCopyright © 2010 - Kaazing Corporation. All rights reserved.

8. HTML5 Web Workers

9. HTML5 Geolocation

10. HTML5 Web Sockets

11. Q&A And…the first ones to answer the quiz questions win a free book! Copyright © 2010 - Kaazing Corporation. All rights reserved.

12. AboutHTML5 © 2009 – Kaazing Corporation

14. Don't reinvent the wheel (or at least make a better one!)Copyright © 2010 - Kaazing Corporation. All rights reserved.

16. Examples:

17. Native browser ability instead of complex JavaScript code

18. New doctype

19. Character set

20. HTML5 APIs

21. As they say in Holland: “So simple, a child can do the laundry!”Copyright © 2010 - Kaazing Corporation. All rights reserved.

23. Problems with plugins:

24. May not be installed

25. Can be disabled

26. Are a separate attack vector

27. Are difficult to integrate with the rest of an HTML document (plugin boundaries, clipping, and transparency issues)“Whenever a Mac crashes more often than not it’s because of Flash.” --Steve Jobs Copyright © 2010 - Kaazing Corporation. All rights reserved.

29. Just Kidding! Copyright © 2010 - Kaazing Corporation. All rights reserved.

31. Moved to a separate standards document to keep the specification focused

32. Industry still refers to the original set of features, including Web Sockets, as "HTML5“

33. See: http://www.whatwg.org/specs/web-apps/current-work/multipage/introduction.html#is-this-html5?Copyright © 2010 - Kaazing Corporation. All rights reserved.

34. HTML5 Web Workers Copyright © 2010, Kaazing Corporation,. All rights reserved.

36. Long-running JavaScript tasks can block other JavaScript on the page

37. JavaScript can cause some browser UIs to hang

38. With Web Workers:

39. Background processing capabilities to web applications can be added

40. Parallel operations can run concurrentlyCopyright © 2010 - Kaazing Corporation. All rights reserved.

42. Background number-crunchers

43. Background notification from server to a local database

44. Background price updates from server

45. Search queries

46. Graceful degradation? Easy!Copyright © 2010, Kaazing Corporation,. All rights reserved.

47. Demo Copyright © 2010, Kaazing Corporation,. All rights reserved.

48. Using the Web Workers API Copyright © 2010, Kaazing Corporation,. All rights reserved.

50. No direct access to the web page and the DOM API

51. Can use the full JavaScript timing API, typically found on the global window

52. Although HTML5 Web Workers cannot block the browser UI, they can still consume CPU cycles and make the system less responsiveCopyright © 2010, Kaazing Corporation,. All rights reserved.

54. Use Cross Document Messaging API (PostMessage)

55. On the web page:

56. Set up an (asynchronous) event listener to listen to incoming messages and errors from the worker

57. call postMessage to pass data to a worker

58. On the web page:

59. Set up an (asynchronous) event listener to listen to incoming messages and errors from the page

60. call postMessage to pass data to the pageCopyright © 2010, Kaazing Corporation,. All rights reserved.

61. JavaScript //Check if Web Workers are supported if (typeof(Worker) !== "undefined") { document.getElementById("support").innerHTML = “Your browser supports HTML5 Web Workers"; } //Create a new worker //The URL for the JavaScript file can be a relative or //absolute URL with the same origin //(the same scheme, host, and port) as the main page worker = new Worker("echoWorker.js"); //to load additional JavaScript importScripts("helper.js, "anotherHelper.js"); Copyright © 2010, Kaazing Corporation,. All rights reserved.

62. JavaScript //Main Page worker.postMessage("Here's a message for you"); //Add event listener worker.addEventListener("message", messageHandler, true); //Process incoming messages function messageHandler(e) { // process message from worker } //Handle errors worker.addEventListener("error", errorHandler, true); //Stop worker worker.terminate(); Copyright © 2010, Kaazing Corporation,. All rights reserved.

63. JavaScript //Worker function messageHandler(e) { postMessage("worker says: " + e.data + " too"); } addEventListener("message", messageHandler, true); //Using a Web Worker within a Web Worker var subWorker = new Worker("subWorker.js"); Copyright © 2010, Kaazing Corporation,. All rights reserved.

65. Firefox 3.5+

66. Safari 4.0+

67. Opera 10.6+* May need to be served up from a server (origin security) Copyright © 2010, Kaazing Corporation,. All rights reserved.

68. HTML5 Geolocation Copyright © 2010, Kaazing Corporation,. All rights reserved.

70. Show user's position on map

71. Tag content (photos/sound/video)

72. Turn-by-turn navigation

73. Alert users of nearby points of interest

74. Social networkingCopyright © 2010, Kaazing Corporation,. All rights reserved.

75. Demo Copyright © 2010, Kaazing Corporation,. All rights reserved.

76. Geolocation Architecture Copyright © 2010, Kaazing Corporation,. All rights reserved.

78. Latitude is the numerical value indicating distance north or south of the equator

79. Longitude is the numerical value indicating distance east or west of Greenwich, England

80. For Example, Lake Tahoe:Latitude: 39.17222, Longitude: -120.13778Copyright © 2010, Kaazing Corporation,. All rights reserved.

82. Altitude

83. altitudeAccuracy

84. Heading

85. Speed

86. If this additional metadata is not available it will be returned as a null valueCopyright © 2010, Kaazing Corporation,. All rights reserved.

88. IP address

89. Coordinate triangulation

90. Global Positioning System (GPS)

91. Wi-Fi with MAC addresses from RFID, Wi-Fi, and Bluetooth

92. GSM or CDMA cell phone IDs

93. User definedCopyright © 2010, Kaazing Corporation,. All rights reserved.

94. Location Source Pros & Cons Copyright © 2010, Kaazing Corporation,. All rights reserved.

96. Location information should not be made available unless the application’s users grant their express permission

97. Clear privacy practices with respect to collected location data are recommended (how long data is stored, how it is encrypted, how data is shared)Copyright © 2010, Kaazing Corporation,. All rights reserved.

98. Sharing a Location Copyright © 2010, Kaazing Corporation,. All rights reserved.

99. Location Sharing Example Copyright © 2010, Kaazing Corporation,. All rights reserved.

101. Using the Geolocation API Copyright © 2010, Kaazing Corporation,. All rights reserved.

102. JavaScript //Checking for browser support: if(navigator.geolocation) { document.getElementById("support").innerHTML = "HTML5 Geolocation is supported."; } else { document.getElementById("support").innerHTML = "HTML5 Geolocation is not supported."; } Copyright © 2010, Kaazing Corporation,. All rights reserved.

103. © 2009 – Kaazing Corporation Quiz Question: What are the names of the two main Geolocation API calls?

105. JavaScript //One shot request void getCurrentPosition( in PositionCallback successCallback, in optional PositionErrorCallback errorCallback, in optional PositionOptions options); //Access user’s position navigator.geolocation.getCurrentPosition( updateLocation, handleLocationError); Copyright © 2010, Kaazing Corporation,. All rights reserved.

106. JavaScript //Update the UI function updateLocation(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; var accuracy = position.coords.accuracy; document.getElementById("latitude").innerHTML = latitude; document.getElementById("longitude").innerHTML = longitude; document.getElementById(“accuracy”).innerHTML = “This location is accurate within “ + accuracy + “ meters.” } Copyright © 2010, Kaazing Corporation,. All rights reserved.

108. Timeout—tells the browser the maximum amount of time it is allowed to calculate the current location

109. maximumAge—indicates how old a location value can be before the browser must attempt to recalculate (default is zero, meaning that the browser must attempt to recalculate a value immediately.Copyright © 2010, Kaazing Corporation,. All rights reserved.

111. PERMISSION_DENIED (code 1) The user chose not to let the browser have access to the location information

112. POSITION_UNAVAILABLE (code 2)The technique used to determine the user’s location was attempted, but failed

113. TIMEOUT (code 3)The timeout value was exceededCopyright © 2010, Kaazing Corporation,. All rights reserved.

114. JavaScript //Repeated position updates var watchId =navigator.geolocation.watchPosition( updateLocation, handleLocationError); // do something with the location updates! // ... // Stop receiving location updates navigator.geolocation.clearWatch(watchId); Copyright © 2010, Kaazing Corporation,. All rights reserved.

115. Example Geolocation App watchPosition() New Location Haversine formula,calculate distance between two longitude and latitude positions on a sphere Copyright © 2010, Kaazing Corporation,. All rights reserved.

117. Google built support for HTML5 Geolocation into its user interface (Show My Location button) Copyright © 2010, Kaazing Corporation,. All rights reserved.

118. JavaScript //Show coordinates on a Google Map // Create a Google Map //See Google API for more detail var map = new google.maps.Map2(document.getElementById("map")); function updateLocation(position) { //pass the position to the Google Map and center it map.setCenter(new google.maps.LatLng( position.coords.latitude, position.coords.longitude, 13); // zoom level } navigator.geolocation.getCurrentPosition( updateLocation, handleLocationError); Copyright © 2010, Kaazing Corporation,. All rights reserved.

120. Safari 5.0

121. Chrome 5.0

122. Opera 10.6* Also possible through Gears Copyright © 2010, Kaazing Corporation,. All rights reserved.

123. HTML5 WebSocket Copyright © 2010, Kaazing Corporation,. All rights reserved.

124. Quiz Question: What do WebSockets and model trains have in common? Copyright © 2010, Kaazing Corporation,. All rights reserved.

126. Not just broadcast, but bi-directional communication

127. Examples:

128. Financial applications

129. Social networking applications

130. Online games

131. Smart power gridCopyright © 2010, Kaazing Corporation,. All rights reserved.

132. Demo Copyright © 2010, Kaazing Corporation,. All rights reserved.

134. Header information is sent with each HTTP request and response, which can be an unnecessary overheadCopyright © 2010, Kaazing Corporation,. All rights reserved.

136. Ajax (Asynchronous JavaScript and XML) is used to build highly interactive Web apps

137. Content can change without loading the entire page

138. User-perceived low latency

139. “Real-time” often achieved through polling and long-polling

140. Comet lack of a standard implementation

141. Comet adds lots of complexityCopyright © 2010, Kaazing Corporation,. All rights reserved.

142. Comet Polling Under the Covers Copyright © 2010, Kaazing Corporation,. All rights reserved.

143. HTTP Request Headers GET /PollingStock//PollingStock HTTP/1.1 Host: localhost:8080 User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.5) Gecko/20091102 Firefox/3.5.5 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: en-us Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive Referer: http://localhost:8080/PollingStock/ Cookie: showInheritedConstant=false; showInheritedProtectedConstant=false; showInheritedProperty=false; showInheritedProtectedProperty=false; showInheritedMethod=false; showInheritedProtectedMethod=false; showInheritedEvent=false; showInheritedStyle=false; showInheritedEffect=false; Copyright © 2010, Kaazing Corporation,. All rights reserved.

145. Overhead can be as much as 2000 bytes

146. Does not scale!Copyright © 2010, Kaazing Corporation,. All rights reserved.

148. Use case A: 1,000 clients polling every second:

149. Network throughput is (871 x 1,000) = 871,000 bytes = 6,968,000 bits per second (~6.6 Mbps)

150. Use case B: 10,000 clients polling every second:

151. Network throughput is (871 x 10,000) = 8,710,000 bytes = 69,680,000 bits per second (~66 Mbps)

152. Use case C: 100,000 clients polling every second:

153. Network throughput is (871 x 100,000) = 87,100,000 bytes = 696,800,000 bits per second (~665 Mbps)Copyright © 2010, Kaazing Corporation,. All rights reserved.

154. Comet: Headache 2.0 Use Comet to spellCOMplExiTy… Copyright © 2010, Kaazing Corporation,. All rights reserved.

156. Full-duplex, single socket

157. Enables web pages to communicate with a remote host

158. Traverses firewalls, proxies, and routers seamlessly

159. Leverages Cross-Origin Resource Sharing (CORS)

160. Share port with existing HTTP content

161. Dramatic overhead reductionCopyright © 2010, Kaazing Corporation,. All rights reserved.

163. WebSocket Architecture Copyright © 2010, Kaazing Corporation,. All rights reserved.

165. Once upgraded, WebSocket data frames can be sent back and forth between the client and the server in full-duplex modeCopyright © 2010, Kaazing Corporation,. All rights reserved.

166. HTML5 WebSocket Handshake Client GET /text HTTP/1.1Upgrade: WebSocketConnection: UpgradeHost: www.example.com Origin: http://example.com WebSocket-Protocol: sample… Server HTTP/1.1 101 WebSocket Protocol HandshakeUpgrade: WebSocketConnection: Upgrade WebSocket-Origin: http://example.com WebSocket-Location: ws://example.com/demo WebSocket-Protocol: sample… Copyright © 2010, Kaazing Corporation,. All rights reserved.

168. Each frame of data:

169. Starts with a 0x00 byte

170. Ends with a 0xFF byte

171. Contains UTF-8 data in between

172. Example:

173. 00Hello, WebSocketxffCopyright © 2010, Kaazing Corporation,. All rights reserved.

175. No latency involved in establishing new TCP connections for each HTTP message

176. Dramatic reduction in unnecessary network traffic and latency

177. Remember the Polling HTTP header traffic? 665 Mbps network throughput for just headersCopyright © 2010, Kaazing Corporation,. All rights reserved.

179. Use case A: 1,000 clients receive 1 message per second: Network throughput is (2 x 1,000) = 2,000 bytes = 16,000 bits per second (~0.015 Mbps)

180. Use case B: 10,000 clients receive 1 message per second: Network throughput is (2 x 10,000) = 20,000 bytes = 160,000 bits per second (~0.153 Mbps)

181. Use case C: 100,000 clients receive 1 message per second: Network throughput is (2 x 100,000) = 200,000 bytes = 1,600,000 bits per second (~1.526 Mbps)Copyright © 2010, Kaazing Corporation,. All rights reserved.

182. Polling vs. WebSocket Copyright © 2010, Kaazing Corporation,. All rights reserved.

183. Latency Reduction Copyright © 2010, Kaazing Corporation,. All rights reserved.

184. Overheard… “Reducing kilobytes of data to 2 bytes…and reducing latency from 150ms to 50ms is far more than marginal. In fact, these two factors alone are enough to make WebSocket seriously interesting to Google.” —Ian Hickson (Google, HTML5 spec lead) Copyright © 2010, Kaazing Corporation,. All rights reserved.

185. Using the WebSocket API Copyright © 2010, Kaazing Corporation,. All rights reserved.

186. JavaScript //Checking for browser support if (window.WebSocket) { document.getElementById("support").innerHTML = "HTML5 WebSocket is supported"; } else { document.getElementById("support").innerHTML = "HTML5 WebSocket is not supported"; } Copyright © 2010, Kaazing Corporation,. All rights reserved.

187. JavaScript //Create new WebSocket var mySocket = new WebSocket(“ws://www.websocket.org”); // Associate listeners mySocket.onopen = function(evt) { alert(“Connection open…”); }; mySocket.onmessage = function(evt) { alert(“Received message: “ + evt.data); }; mySocket.onclose = function(evt) { alert(“Connection closed…”); }; Copyright © 2010, Kaazing Corporation,. All rights reserved.

188. JavaScript // Sending data mySocket.send(“HTML5 WebSocket Rocks!”); //Close WebSocket mySocket.close(); Copyright © 2010, Kaazing Corporation,. All rights reserved.

190. You can extend client-server protocols to the web:

191. XMPP, Jabber

192. Pub/Sub (Stomp/AMQP)

193. Gaming protocols

194. Any TCP-based protocol

195. Browser becomes a first-class network communication citizenCopyright © 2010, Kaazing Corporation,. All rights reserved.

196. Quake II Gamehttp://code.google.com/p/quake2-gwt-port Copyright © 2010, Kaazing Corporation,. All rights reserved.

198. Apache mod_pywebsocket

199. Jetty

200. phpwebsockets

201. web-socket-ruby

202. Yaws (Erlang)

203. And moreCopyright © 2010, Kaazing Corporation,. All rights reserved.

205. Safari 5.0

206. Firefox 4 (Beta)* Emulation available through Kaazing WebSocket Gateway Copyright © 2010, Kaazing Corporation,. All rights reserved.

207. Q&A Copyright © 2010, Kaazing Corporation,. All rights reserved.

209. WebSocket protocol specification :http://tools.ietf.org/html/draft-hixie-thewebsocketprotocol

210. Web Workers specification :http://dev.w3.org/html5/workers/

211. Geolocation specification:http://dev.w3.org/geo/api/spec-source.htmlCopyright © 2010, Kaazing Corporation,. All rights reserved.

212. Thanks! @peterlubbers E-mail: peter.lubbers@kaazing.com Copyright © 2010, Kaazing Corporation,. All rights reserved.

213. Copyright © 2010 Kaazing Corporation, All rights reserved. Course materials, including labs and other handouts are property of Kaazing Corporation. Except when expressly permitted by Kaazing Corporation, you may not copy, reproduce, publish, or display any part of this training material, in any form, or by any means. Copyright © 2010, Kaazing Corporation,. All rights reserved.