Your SlideShare is downloading. ×
0
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

V2 peter-lubbers-sf-jug-websocket

3,803

Published on

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,803
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
133
Comments
0
Likes
3
Embeds 0
No embeds

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
  • WebSocket is text-only
  • Cross-site scripting error in earlier version of Firefox and Firebug
  • Because the path may contain sensitive information, the referer is sometimes not sent by browsers attempting to protect user privacy.
  • Transcript

    • 1. San Francisco Java User Group Meeting
      May 11, 2010
      HTML5 WebSocket& Communication 
      By Peter Lubbers,
      Kaazing
    • 2. About Peter Lubbers
      • Director of Documentation and Training, Kaazing Yes, we’re hiring!
      Co-Founder San Francisco HTML5 User Grouphttp://www.sfhtml5.org/
      • Ultra Distance Runner
      Twitter: @peterlubbers
      Co-author Pro HTML5 Programming
      Alpha Release: www.prohtml5.com
      Special 50% Off Coupon Code:APRESSPROHTML5WR (expires May 31st)
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 3. New HTML5 User Groups!
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
      • San Franciscohttp://www.sfhtml5.org/First meetup: 28 May
      • 4. New Yorkhttp://www.meetup.com/NY-HTML5-User-Group/First meetup: 16 June
      • 5. Londonhttp://www.meetup.com/LondonHTML5UG/First meetup: 19 May
    • Agenda
      HTML5 WebSocket
      Tin-can communication
      Meet HTML5 WebSocket
      HTML5 WebSocket in the enterprise
      Scaling through simplicity
      HTML5 Communication
      Server-Sent Events
      XMLHttpRequest Level 2
      Cross Document Messaging
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 6. HTML5 WebSocket
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 7. Today’s Requirements
      • Today’s Web applications demand reliable, real-time communications with near-zero latency
      • 8. Not just broadcast, but bi-directional communication
      • 9. Examples:
      • 10. Financial applications
      • 11. Social networking applications
      • 12. Online games
      • 13. Smart power grid
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 14. The Perils of Polling
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
      No-Fly list notupdated…
    • 15. HTTP Is Not Full Duplex
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 16. About HTTP
      HTTP was originally designed for document transfer
      Until now, it has been cumbersome to achieve real-time, bi-directional web communication due to the limitations of HTTP
      • HTTP is half-duplex (traffic flows in only one direction at a time)
      • 17. Header information is sent with each HTTP request and response, which can be an unnecessary overhead
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 18. About Ajax and Comet
      • Great toilet cleaners…
      • 19. Ajax (Asynchronous JavaScript and XML) can be used to build interactive Web apps
      Content can change without refreshing the entire page
      User-perceived low latency
      • “Real-time” often achieved through polling and long-polling (Comet or Reverse Ajax)
      Comet lack of a standard implementation
      Comet adds lots of complexity
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 20. Half-Duplex Architecture
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 21. Polling Architecture
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 22. Polling
      • Polling is “nearly real-time”
      • 23. Used in Ajax applications to simulate real-time communication
      • 24. Browser sends HTTP requests at regular intervals and immediately receives a response
      In low-message-rate situations, many connections are opened and closed needlessly
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 25. Long Polling Architecture
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 26. Long Polling
      • Also known as asynchronous-polling
      • 27. Browser sends a request to the server and the server keeps the request open for a set period
      • 28. HTTP headers, present in both long-polling and polling often account for most of the network traffic
      In high-message rate situations, long-polling results in a continuous loop of immediate polls
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 29. Streaming Architecture
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 30. Streaming
      • More efficient, but sometimes problematic
      • 31. Possible complications:
      Proxies and firewalls
      Response builds up and must be flushed periodically
      Cross-domain issues to do with browser connection limits
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 32. Comet Demo
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 33. HTTP Request Headers
      POST /gwt/EventService HTTP/1.1
      Host: gpokr.com
      Connection: keep-alive
      User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/532.5 (KHTML, like Gecko) Chrome/4.1.249.1064 Safari/532.5
      Referer: http://gpokr.com/gwt/7F5E66657B938E2FDE9CD39095A0E9E6.cache.html
      Content-Length: 134
      Origin: http://gpokr.com
      Content-Type: text/plain; charset=utf-8
      Accept: */*
      Accept-Encoding: gzip,deflate,sdch
      Accept-Language: en-US,en;q=0.8
      Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3
      Cookie: __utmz=247824721.1273102477.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none); JSESSIONID=E7AAE0E60B01FB88D1E3799FAD5C62B3; __utma=247824721.1247485893.1273102477.1273104838.1273107686.3; __utmc=247824721; __utmb=247824721.4.10.127
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 34. HTTP Response Headers
      200 OK
      Server: Apache-Coyote/1.1
      Expires: Thu, 06 May 2010 01:06:51 GMT
      Content-Type: text/plain;charset=UTF-8
      Content-Length: 303
      Date: Thu, 06 May 2010 01:06:50 GMT
      • Total (unnecessary) HTTP request and response header information overhead: 871 bytes (example)
      • 35. Overhead can be as much as 2000 bytes
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 36. HTTP Header Traffic Analysis
      • Example network throughput for HTTP request and response headers associated with polling
      • 37. Use case A: 1,000 clients polling every second:
      • 38. Network throughput is (871 x 1,000) = 871,000 bytes = 6,968,000 bits per second (~6.6 Mbps)
      • 39. Use case B: 10,000 clients polling every second:
      • 40. Network throughput is (871 x 10,000) = 8,710,000 bytes = 69,680,000 bits per second (~66 Mbps)
      • 41. Use case C: 100,000 clients polling every second:
      • 42. 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.
    • 43. Comet: Headache 2.0
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 44. Complexity does not scale
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 45. Vote NO on Tin Cans and String for Communication!
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 46. Enter HTML5 WebSocket!
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 47. HTML5 WebSocket
      • W3C API and IETF Protocol
      • 48. Full-duplex text-based socket
      • 49. Enables web pages to communicate with a remote host
      • 50. Traverses firewalls, proxies, and routers seamlessly
      • 51. Leverages Cross-Origin Resource Sharing (CORS)
      • 52. Share port with existing HTTP content (80/443)
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 53. Pop Quiz
      What does WebSocket have in common with model trains?
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 54. Possible WebSocket Architecture
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 55. HTML5 WebSocket Schemes
      • WebSocket
      ws://www.websocket.org/text
      • WebSocket Secure
      wss://www.websocket.org/encrypted-text
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 56. HTML5 WebSocket
      • Connection established by upgrading from the HTTP protocol to the WebSocket protocol using the same TCP connection
      • 57. 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.
    • 58. 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.
    • 59. HTML5 WebSocket Frames
      • Frames can be sent full-duplex, in either direction at any the same time
      • 60. Each frame of data:
      Starts with a 0x00 byte and End with a 0xFF byte
      Contains UTF-8 data in between
      • Example:
      x00Hello, WebSocketxff
      There is no defined maximum size
      If the user agent has content that is too large to be handled, it must fail the Web Socket connection
      JavaScript does not allow >4GB of data, so that is a practical maximum
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 61. Using the WebSocket API
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 62. Checking For Browser Support
      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.
    • 63. Using the WebSocket API
      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.
    • 64. Using the WebSocket API
      JavaScript
      // Sending data
      mySocket.send(“HTML5 WebSocket Rocks!”);
      //Close WebSocket
      mySocket.close();
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 65. Browser Support for WebSocket
      Chrome 4.0+
      WebKit Nightly builds
      Support planned for Firefox:“We really really want to support WebSockets in the next version of Firefox.” –Christopher Blizzard, Mozilla
      Dev channel
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 66. Example: NativeWebSocket in Chrome
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 67. WebSocket Emulation
      • Kaazing WebSocket Gateway
      • 68. http://www.kaazing.com/download
      • 69. Makes WebSocket work in all browsers today (including I.E. 6)
      • 70. Flash WebSocket implementation
      • 71. http://github.com/gimite/web-socket-js
      • 72. Requires opening port on the server’s firewall 
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 73. Beyond WebSocket
      • Once you have WebSocket, you can communicate with WebSocket Servers and back-end servers and directly with message brokers
      • 74. You can extend client-server protocols to the web:
      • 75. XMPP, Jabber
      • 76. Pub/Sub (Stomp/AMQP)
      • 77. Gaming protocols
      • 78. Any TCP-based protocol
      • 79. Browser becomes a first-class network communication citizen
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 80. Financial Applications
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 81. Example: WebSocket-Based Quake II GamePort
      http://code.google.com/p/quake2-gwt-port
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 82. Twitter Feed
      http://kaazing.me
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 83. WebSocket in the Enterprise 
    • 84. WebSocket and Web Intermediaries
      Web Socket protocol itself is unaware of proxy servers and firewalls
      WebSocket features an HTTP-compatible handshake so that HTTP servers can share their default HTTP and HTTPS ports (80 and 443) with a WebSocket server
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 85. Securing WebSocket Traffic
      WebSocket defines the ws:// and wss:// schemes
      WSS is WS over TLS (Transport Layer Security), formerly known as SSL (Secure Socket Layer) support (Similar to HTTPS)
      An HTTPS connection is established after a successful TLS handshake (using public and private key certificates)
      HTTPS is not a separate protocol, but it is HTTP running on top of a TLS connection (default ports is 443)
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 86. Proxy Servers
      A proxy server is a server that acts as an intermediary between a client and another server (for example, a web server on the Internet)
      Commonly used for content caching, Internet connectivity, security, and enterprise content filtering
      May also buffer unencrypted HTTP responses, thereby introducing unpredictable latency during HTTP response streaming
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 87. Types of Proxy Servers
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 88. WebSocket Proxy Traversal
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
      http://www.infoq.com/articles/Web-Sockets-Proxy-Servers
    • 89. Load Balancing Routers
      TCP(layer-4) load-balancing routers should work well with HTML5 Web Sockets, because they have the same connection profile: connect once up front and stay connected, rather than the HTTP document transfer request-response profile
      HTTP (Layer 7) load-balancing routers expect HTTP traffic and can easily get confused by WebSocket upgrade traffic. For that reason, Layer 7 load balancing routers may need to be configured to be explicitly aware of WebSocket traffic
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 90. Firewalls
      Since firewalls normally just enforce the rules for inbound traffic rejection and outbound traffic routing (for example, through the proxy server), there are usually no specific WebSocket traffic-related firewall concerns
      For regular socket connections (for example, for a desktop client) you must open a port on the firewall
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 91. WebSocket Traffic Analysis  
    • 92. WebSocket Demo
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 93. Dramatic Reduction in Network Traffic
      • With WebSocket, each frame has only 2 bytes of packaging (a 500:1 or even 1000:1 reduction)
      • 94. No latency involved in establishing new TCP connections for each HTTP message
      • 95. Dramatic reduction in unnecessary network traffic and latency
      • 96. Remember the Polling HTTP header traffic? 665 Mbps network throughput for just headers
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 97. WebSocket Framing Analysis
      • Example network throughput overhead associated with WebSocket framing
      • 98. 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)
      • 99. 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)
      • 100. 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.
    • 101. Polling vs. WebSocket
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 102. Latency Reduction
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 103. 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.
    • 104. HTML5 Communication
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 105. HTML5 Communication
      HTML5 defines a few more handy communication features:
      Cross Document Messaging
      XMLHttpRequest Level 2
      Server-Sent Events
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 106. Cross Document Messaging
      Enables secure cross-origin communication across iframes, tabs, and windows (using origin security)
      Defines the PostMessage API as a standard way to send messages
      Provides asynchronous message passing between JavaScript contexts
      HTML5 clarifies and refines domain security by introducing the concept of an origin
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 107. Same-OriginPolicy
      The browsers’ same-origin policies prevent a script (or document) loaded from one origin from communicating with a document loaded from another origin
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 108. Origin Concept
      An origin is a subset of an address used for modeling trust relationships on the Web
      Origins are made up of a scheme, a host, and a port—different origin:
      https://www.example.com
      http://www.example.com
      The path is not considered in the origin value—same origin:
      http://www.example.com/index.html
      http://www.example.com/page2.html
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 109. Cross Document Messaging
      When you send a message, the sender specifies the receiver’s origin
      When you receive a message, the sender’s origin is included as part of the message (The message’s origin is provided by the browser and cannot be spoofed)
      This allows you to decide which messages to process and which to ignore
      You can keep a white list and process only messages from documents with trusted origins
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 110. PostMessage Architecture
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 111. PostMessage API
      The PostMessage API can be used for communicating between documents with the same origin
      PostMessage provides asynchronous message passing between JavaScript contexts.
      Useful when communication might otherwise be disallowed by the same-domain policy
      Also provides a consistent, easy-to-use API
      Also used in other HTML5 APIs for communication between JavaScript contexts, for example in HTML5 Web Workers
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 112. Using the PostMessage API
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 113. Using the PostMessage API
      JavaScript
      //Sending a message:
      myFrame.contentWindow.postMessage('Hello, world', 'http://www.example.com/');
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 114. Using the PostMessage API
      JavaScript
      //Listening for messages:
      window.addEventListener(“message”, messageHandler, true);
      function messageHandler(e) {
      switch(e.origin) {
      case “friend.example.com”:
      // process message
      processMessage(e.data);
      break;
      default:
      // message origin not recognized
      // ignoring message
      }
      }
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 115. Browser Support for Cross Document Messaging
      Chrome 2.0+
      Firefox 3.5+
      IE 8.0+
      Opera 9.6+
      Safari 4.0+
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 116. XMLHttpRequest Level 2
      XMLHttpRequest Level 2
      XMLHttpRequest is the API that made Ajax possible
      XMLHttpRequest Level 2 significantly enhances XMLHttpRequest
      Progress events
      Cross-origin XMLHttpRequest
      XMLHttpRequest Level 2 allows for cross-origin XMLHttpRequests using Cross Origin Resource Sharing (CORS)
      http://www.w3.org/TR/access-control/
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 117. Cross-origin HTTP requests
      Cross-origin HTTP requests have an Origin header that provides the server with the request’s origin
      This header is protected by the browser and cannot be changed from application code
      In essence, a network equivalent of the origin property found on message events used in Cross Document Messaging.
      The origin header differs from the older referer [sic] header in that the referer is a complete URL including the path
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 118. Origin and Referer (Request)
      JavaScript
      POST /main HTTP/1.1
      Host: www.example.net
      User-Agent: Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:1.9.1.3) Gecko/20090910 Ubuntu/9.04 (jaunty) Shiretoko/3.5.3
      Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
      Accept-Language: en-us,en;q=0.5
      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://www.example.com/path
      Origin: http://www.example.com
      Pragma: no-cache
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 119. Origin and Referer (Response)
      JavaScript
      HTTP/1.1 201 Created
      Transfer-Encoding: chunked
      Server: Kaazing Gateway
      Date: Mon, 02 Nov 2009 06:55:08 GMT
      Content-Type: text/plain
      Access-Control-Allow-Origin: http://www.example.com
      Access-Control-Allow-Credentials: true
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 120. Progress Events
      One of the most important API improvements in XMLHttpRequest have been the changes related to progressive responses
      Before XHR Level 2:
      There was only a single readystatechange event
      Inconsistently implemented across browsers (for example, readyState 3  (progress) never fires in Internet Explorer)
      Lacked a way to communicate upload progress. Implementing (for example, building an upload progress bar was not a trivial task)
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 121. Progress Events
      • XMLHttpRequest Level 2 supports named progress events:
      loadstart
      progress
      abort
      error
      load
      loadend
      • readyState property and readystatechange events retained for backward compatibility
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 122. Using the XMLHttpRequest API
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 123. Progress Events
      • Progress events have fields for:
      The total amount of data to transfer
      The amount that has already transferred
      Whether the total is known (Boolean value)
      JavaScript
      crossOriginRequest.upload.onprogress = function(e) {
      var total = e.total;
      var loaded = e.loaded;
      if (e.lengthComputable) {
      // do something with the progress information
      }
      }
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 124. Cross-Origin XMLHttpRequest
      • XMLHttpRequest Level 2 allows for cross-origin XMLHttpRequests using Cross Origin Resource Sharing (CORS)
      http://www.w3.org/TR/access-control/
      JavaScript
      //from http://www.example.com
      var crossOriginRequest = new XMLHttpRequest();
      crossOriginRequest.open("GET", "http://www.example.net/stockfeed", true);
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 125. Browser Support for XMLHttpRequest Level 2
      Chrome 2.0+
      Firefox 3.5+
      Safari 4.0+
      Note: some server side participation may be required (CORS)
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 126. HTML5Server-Sent Events
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 127. Server-Sent Events
      Server-Sent Events (SSE) standardizes and formalizes how a continuous stream of data can be sent from a server to a browser
      Effectively standardizes Comet and Reverse Ajax
      EventSource API for broadcasting data from server to client
      SSE is compatible with almost any setup that uses HTTP today (WebSocket requires that intermediaries support full-duplex connections)
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 128. Server-Sent Events
      Server-Sent features
      Reconnection
      Event IDs
      Ability to send arbitrary events
      Server-Sent Events can be used for automated data push mechanisms (for example, updating Web Storage)
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 129. SSE Architecture
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 130. Using the EventSource API
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 131. Using the EventSource API
      JavaScript
      //Connects to a server URL to receive an event stream:var stream = new EventSource("http://news.kaazing.com");
      Set event handlers:
      stream.onopen = function() { alert(“open”); }
      stream.onmessage = function(event) { alert(“message: “ + event.data); }
      stream.onerror = function() { alert(“error”); }
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 132. Example: News Broadcast
      http://kaazing.me/
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 133. Browser Support for Server-Sent Events
      Opera 9.0+ partial support
      Development in Firefox Trunk
      Dev channel
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 134. Q&A
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
    • 135. SF JUG HTML5 Meeting Special!
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
      HTML5ROCKS
      10% Off Any HTML5 Training
      With Coupon Code HTML5ROCKS
      http://tech.kaazing.com/training/index.html
    • 136. Copyright © 2010 Kaazing Corporation, All rights reserved.
      All 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.

    ×