V2 peter-lubbers-sf-jug-websocket

1. San Francisco Java User Group Meeting May 11, 2010 HTML5 WebSocket& Communication By Peter Lubbers, Kaazing

4. New Yorkhttp://www.meetup.com/NY-HTML5-User-Group/First meetup: 16 June

8. Not just broadcast, but bi-directional communication

9. Examples:

10. Financial applications

11. Social networking applications

12. Online games

23. Used in Ajax applications to simulate real-time communication

24. Browser sends HTTP requests at regular intervals and immediately receives a responseIn low-message-rate situations, many connections are opened and closed needlessly Copyright © 2010 - Kaazing Corporation. All rights reserved.

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 trafficIn high-message rate situations, long-polling results in a continuous loop of immediate polls Copyright © 2010 - Kaazing Corporation. All rights reserved.

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.

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.

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:

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)

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.

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.

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.

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

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

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.

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

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

95. Dramatic reduction in unnecessary network traffic and latency

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

V2 peter-lubbers-sf-jug-websocket

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie V2 peter-lubbers-sf-jug-websocket

Ähnlich wie V2 peter-lubbers-sf-jug-websocket (20)

V2 peter-lubbers-sf-jug-websocket

Hinweis der Redaktion