HTML5 Web Workers-unleashed
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

HTML5 Web Workers-unleashed

  • 10,206 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Great slideshow. thanks!
    4D Planning
    Are you sure you want to
    Your message goes here
  • Chris:
    You can add a button to pause the execution by sending a message to the worker

    document.getElementById('startButton').onclick = function () {
    worker.postMessage('pause');
    }

    In the worker you then add a message handler:
    function messageHandler(e) {
    if (e.data == 'pause') {
    //pause the worker
    }
    }

    Note: you can also terminate a worker with
    worker.terminate();
    Are you sure you want to
    Your message goes here
  • i have a question for web workers. Let’s have a worker that calculates prime numbers. When a prime number is calculated the worker post this number to the page and the page show this to the screen. How can i have a button to pause the process? This will not work ... ... ... onmessage=function(e) { if (e.data==’pause’) pauseproccess=true; } ... ... ... while (!pauseproccess) { //calculate prime numbers }
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
10,206
On Slideshare
10,188
From Embeds
18
Number of Embeds
6

Actions

Shares
Downloads
405
Comments
3
Likes
12

Embeds 18

http://localhost:8888 8
http://www.linkedin.com 5
http://114.214.55.211:8888 2
http://localhost 1
http://www.e-aula.cl 1
http://www.twylah.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • Google Chrome – every tab is its own program (not one tab within a program). So if one tab goes down, the whole app doesn't crash.
  • 150 ms (TCP round trip to set up the connection plus a packet for the message)50 ms (just the packet for the message)
  • The following steps are shown in the diagram: A user navigates to a location-aware application in the browser.The application web page loads and requests coordinates from the browser by making a Geolocation function call. The browser intercepts this and requests user permission. Let's assume that the permission is granted.The browser retrieves coordinate information from the device it is running on. For example, the IP address, Wi-Fi, or GPS coordinates. This is an internal function of the browser.The browser sends these coordinates to a trusted external location service, which returns a detailed location that can now be sent back to the host of the HTML5 Geolocation application.
  • The successCallback function parameter tells the browser which function you want called when the location data is made available. This is important because operations such as fetching location data may take a long time to complete. No user wants the browser to be locked up while the location is retrieved, and no developer wants his program to pause indefinitely—especially because fetching the location data will often be waiting on a user to grant permission. The successCallback is where you will receive the actual location information and act on it.However, as in most programming scenarios, it is good to plan for failure cases. It is quite possible that the request for location information may not complete for reasons beyond your control, and for those cases you will want to provide an errorCallback function that can present the user with an explanation, or perhaps make an attempt to try again. While optional, it is recommended that you provide one.Finally, an options object can be provided to the HTML5 Geolocation service to fine-tune the way it gathers data. This is an optional parameter that we will examine later.
  • The timeout value deals with the duration needed to calculate the location value, while maximumAge refers to the frequency of the location calculation. If any single calculation takes longer than the timeout value, an error is triggered. However, if the browser does not have an up-to-date location value that is younger than maximumAge, it must refetch another value. Special values apply here: setting the maximumAge to “0” requires the value to always be re-fetched, while setting it to Infinity means it should never be refetched.
  • This sample works by using the watchPosition() capability we discussed in the last section. Every time a new position is sent to us, we will compare it to the last known position and calculate the distance traveled. This is accomplished using a well-known calculation known as the Haversine formula, which allows us to calculate distance between two longitude and latitude positions on a sphere.
  • High-message volume, small message size scenario where long-polling is potentially worse than polling.
  • WebSocket is text-only
  • HTTP used for handshake onlyOperates over a single socketTraverses firewalls and routers seamlesslyAllows authorized cross-site communicationCookie-based authenticationExisting HTTP load balancersNavigates proxies using HTTP CONNECT, same technique as https, but without the encryption
  • Text type requires high-order bit setBinary type requires high-order bit _not_ setThere is no defined maximum size. However, the protocol allows either side (browser or server) to terminate the connection if it cannot receive a large frame. So far, the definition of too large is left up to the implementation.If the user agent is faced with content that is too large to behandled appropriately, then it must fail the Web Socket connection.There is probably a practical maximum, but we have not discovered it as far as I know.You can't have four gigabytes of data in JavaScript, so the practical max is <4GB for the JavaScript implementation.
  • 150 ms (TCP round trip to set up the connection plus a packet for the message)50 ms (just the packet for the message)
  • 150 ms (TCP round trip to set up the connection plus a packet for the message)50 ms (just the packet for the message)
  • Text type requires high-order bit setBinary type requires high-order bit _not_ setThere is no defined maximum size. However, the protocol allows either side (browser or server) to terminate the connection if it cannot receive a large frame. So far, the definition of too large is left up to the implementation.If the user agent is faced with content that is too large to behandled appropriately, then it must fail the Web Socket connection.There is probably a practical maximum, but we have not discovered it as far as I know.You can't have four gigabytes of data in JavaScript, so the practical max is <4GB for the JavaScript implementation.

Transcript

  • 1. Peter Lubbers
    Kaazing
    #dcode
    HTML5WebSockets,Web Workers,andGeolocation
    Unleashed! 
  • 2. About Peter Lubbers
    • Director of Documentation and Training, Kaazing (The HTML5 WebSocket Company)
    • 3. Co-Founder San Francisco HTML5 User Grouphttp://www.sfhtml5.org/
    • 4. Co-author Pro HTML5 Programming
    • 5. Ultra Distance Runner
    • 6. Twitter: @peterlubbers
    Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 7. Agenda
    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
  • 13. HTML5 Paves the Cow Paths
    • Degrade gracefully (Evolution not revolution)
    • 14. Don't reinvent the wheel (or at least make a better one!)
    Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 15. HTML5: Simple is Better
    • Simplify wherever possible
    • 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.
  • 22. HTML5 : A Plugin-Free Paradigm
    • HTML5 provides native support for many features that were only possible with plugins or complex hacks
    • 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.
  • 28.
  • 29. Just Kidding!
    Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 30. Is This HTML5?
    • Many pieces of the HTML5 effort were originally part of the HTML5 specification
    • 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.
  • 35. HTML5 Web Workers
    • Without Web Workers:
    • 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 concurrently
    Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 41. HTML5 Web Workers
    • Web Workers are used for
    • 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.
  • 49. HTML5 Web Workers
    • Cannot access the web page’s window object (window.document)
    • 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 responsive
    Copyright © 2010, Kaazing Corporation,. All rights reserved.
  • 53. HTML5 Web Workers API
    • Create an HTML5 Web Worker object and pass in a JavaScript file to be executed
    • 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 page
    Copyright © 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.
  • 64. Browser Support
    * 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.
  • 69. Using Geolocation
    • Allows users to share their location for location-aware services
    • 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 networking
    Copyright © 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.
  • 77. Location Data
    • Location information consists of a pair of latitude and longitude coordinates and accuracy information
    • 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.13778
    Copyright © 2010, Kaazing Corporation,. All rights reserved.
  • 81. Location Metadata
    • Depending on the device, additional meta data can be provided:
    • 82. Altitude
    • 83. altitudeAccuracy
    • 84. Heading
    • 85. Speed
    • 86. If this additional metadata is not available it will be returned as a null value
    Copyright © 2010, Kaazing Corporation,. All rights reserved.
  • 87. Sources of Location Data
    • A device can use any of the following sources:
    • 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 defined
    Copyright © 2010, Kaazing Corporation,. All rights reserved.
  • 94. Location Source Pros & Cons
    Copyright © 2010, Kaazing Corporation,. All rights reserved.
  • 95. Privacy
    • HTML5 Geolocation specification mandates that a mechanism is provided to protect the user's privacy
    • 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.
  • 100. Recommendations and Reality
    • Geolocation privacy study from UC Berkeley:http://bit.ly/aS9oqf
    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?
  • 104. Types of Position Requests
    • There are two types of position requests:
    One-shot position request(getCurrentPosition)
    Repeated position updates(watchPosition)
    Copyright © 2010, Kaazing Corporation,. All rights reserved.
  • 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.
  • 107. Optional Request Attributes
    • enableHighAccuracy—Request the HTML5 Geolocation service to use a higher accuracy-detection mode if available (only supports true or false)
    • 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.
  • 110. Geolocation Error Codes
    • UNKNOWN_ERROR (code 0)An error occurred that is not covered by the other error codes
    • 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 exceeded
    Copyright © 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.
  • 116. Google Map Integration
    • Coordinates are not easy to decipher, easier to see on a map
    • 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.
  • 119. Browser Support
    * 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.
  • 125. Using WebSocket
    • Today’s Web applications demand reliable, real-time communications with near-zero latency
    • 126. Not just broadcast, but bi-directional communication
    • 127. Examples:
    • 128. Financial applications
    • 129. Social networking applications
    • 130. Online games
    • 131. Smart power grid
    Copyright © 2010, Kaazing Corporation,. All rights reserved.
  • 132. Demo
    Copyright © 2010, Kaazing Corporation,. All rights reserved.
  • 133. About HTTP
    • HTTP is half-duplex (traffic flows in only one direction at a time)
    • 134. Header information is sent with each HTTP request and response, which can be an unnecessary overhead
    Copyright © 2010, Kaazing Corporation,. All rights reserved.
  • 135. About Ajax and Comet
    • Great toilet cleaners…
    • 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 complexity
    Copyright © 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.
  • 144. HTTP Response Headers
    HTTP/1.x 200 OK
    X-Powered-By: Servlet/2.5
    Server: Sun Java System Application Server 9.1_02
    Content-Type: text/html;charset=UTF-8
    Content-Length: 321
    Date: Sat, 07 Nov 2009 00:32:46 GMT
    • Total (unnecessary) HTTP request and response header information overhead: 871 bytes (example)
    • 145. Overhead can be as much as 2000 bytes
    • 146. Does not scale!
    Copyright © 2010, Kaazing Corporation,. All rights reserved.
  • 147. HTTP Header Traffic Analysis
    • Example network throughput for HTTP request and response headers associated with polling
    • 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.
  • 155. HTML5 WebSocket
    • W3C API and IETF Protocol
    • 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 reduction
    Copyright © 2010, Kaazing Corporation,. All rights reserved.
  • 162. HTML5 WebSocket Schemes
    • WebSocket
    ws://www.websocket.org/text
    • WebSocket Secure
    wss://www.websocket.org/encrypted-text
    Copyright © 2010, Kaazing Corporation,. All rights reserved.
  • 163. WebSocket Architecture
    Copyright © 2010, Kaazing Corporation,. All rights reserved.
  • 164. HTML5 WebSocket
    • Connection established by upgrading from the HTTP protocol to the WebSocket protocol using the same TCP connection
    • 165. Once upgraded, WebSocket data frames can be sent back and forth between the client and the server in full-duplex mode
    Copyright © 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.
  • 167. HTML5 WebSocket Frames
    • Frames can be sent full-duplex, in either direction at any the same time
    • 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. x00Hello, WebSocketxff
    Copyright © 2010, Kaazing Corporation,. All rights reserved.
  • 174. Dramatic Reduction in Network Traffic
    • With WebSocket, each frame has only 2 bytes of packaging (a 500:1 or even 1000:1 reduction)
    • 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 headers
    Copyright © 2010, Kaazing Corporation,. All rights reserved.
  • 178. WebSocket Framing Analysis
    • Example network throughput overhead associated with WebSocket framing
    • 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.
  • 189. Extending WebSocket
    • Once you have WebSocket, you can communicate with WebSocket Servers and back-end servers and directly with message brokers
    • 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 citizen
    Copyright © 2010, Kaazing Corporation,. All rights reserved.
  • 196. Quake II Gamehttp://code.google.com/p/quake2-gwt-port
    Copyright © 2010, Kaazing Corporation,. All rights reserved.
  • 197. WebSocket Server Support
    Copyright © 2010, Kaazing Corporation,. All rights reserved.
  • 204. Browser Support
    * Emulation available through Kaazing WebSocket Gateway
    Copyright © 2010, Kaazing Corporation,. All rights reserved.
  • 207. Q&A
    Copyright © 2010, Kaazing Corporation,. All rights reserved.
  • 208. Resources
    • WebSocket specification :http://dev.w3.org/html5/websockets/
    • 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.html
    Copyright © 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.