DevNexus 2013 - Introduction to WebSockets
7 likes2,801 views
This document provides an overview of WebSockets, a technology enabling two-way communication in web applications without the overhead of multiple HTTP connections. It discusses the advantages, use cases, and implementation details, particularly focusing on Java. The document also touches on browser support, proxy issues, and the evolution of the WebSocket protocol, culminating in the finalized RFC 6455 standard.
![If WebSocket is so great...
• Why does bitcoinmonitor use long polling?
• What about other sites?
– Asana.com
– Meteor (http://www.meteor.com)
self.socket = new SockJS(self.url, undefined, {
debug: false, protocols_whitelist: [
// only allow polling protocols. no websockets or streaming.
// streaming makes safari spin, and websockets hurt chrome.
'xdr-polling', 'xhr-polling', 'iframe-xhr-polling', 'jsonp-polling'
]});
github.com/meteor/meteor/blob/master/packages/stream/stream_client.js
21
Tuesday, February 19, 13 21](https://image.slidesharecdn.com/devnexus-2013-websocket-130219004709-phpapp01/85/DevNexus-2013-Introduction-to-WebSockets-21-320.jpg)
DevNexus 2013 - Introduction to WebSockets
- 1. Introduction to WebSockets Tuesday, February 19, 13 1
- 2. About Gunnar Hillert • Company: SpringSource, a division of VMware • Projects: – Spring Integration (http://www.springintegration.org) – Spring AMQP – Cloud Foundry (Maven Plugin) • Twitter: @ghillert • LinkedIn: http://www.linkedin.com/in/hillert • Blog – http://blog.springsource.org/author/ghillert/ – http://blog.hillert.com 2 Tuesday, February 19, 13 2
- 3. Objectives • Survey the lay of the land • Less focus on syntax and mechanics • Broad, pragmatic perspective • Special emphasis on Java 3 Tuesday, February 19, 13 3
- 4. Where to find the slides + samples? • Slides: slideshare.net/hillert/devnexus-2013-introduction-to-websockets • Samples: https://github.com/cbeams/bitcoin-rt • Previous Recordings: • Spring One: http://www.infoq.com/presentations/ Introduction-WebSocket • AJUG Dec 2012 - http://vimeo.com/57019021 4 Tuesday, February 19, 13 4
- 5. WebSocket 101 5 Tuesday, February 19, 13 5
- 6. The Problem • Some web apps need two-way communication / rapid updates • AJAX and Comet techniques can amount to an “abuse of HTTP” 6 Tuesday, February 19, 13 6
- 7. The Problem • Too many connections • Too much overhead • Too great a burden on the client 7 Tuesday, February 19, 13 7
- 8. The Usual Suspects • Trading • Chat • Gaming • Collaboration • Visualization 8 Tuesday, February 19, 13 8
- 9. The Goal “The goal of this technology is to provide a mechanism for browser-based applications that need two-way communication with servers that does not rely on opening multiple HTTP connections” - RFC 6455, The WebSocket Protocol 9 Tuesday, February 19, 13 9
- 10. The Approach • Two-way messaging over a single connection • Layer on TCP • Not HTTP, but uses HTTP to bootstrap • Extremely low-overhead 10 Tuesday, February 19, 13 10
- 11. The WebSocket HTTP Handshake GET /chat HTTP/1.1 Host: server.example.com Upgrade: websocket Connection: Upgrade HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade 11 Tuesday, February 19, 13 11
- 12. What’s in a Frame? 0 1 2 3 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 +-+-+-+-+-------+-+-------------+-------------------------------+ |F|R|R|R| opcode|M| Payload len | Extended payload length | |I|S|S|S| (4) |A| (7) | (16/64) | |N|V|V|V| |S| | (if payload len==126/127) | | |1|2|3| |K| | | +-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - + | Extended payload length continued, if payload len == 127 | + - - - - - - - - - - - - - - - +-------------------------------+ | |Masking-key, if MASK set to 1 | +-------------------------------+-------------------------------+ | Masking-key (continued) | Payload Data | +-------------------------------- - - - - - - - - - - - - - - - + : Payload Data continued ... : + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + | Payload Data continued ... | +---------------------------------------------------------------+ http://www.ietf.org/rfc/rfc6455.txt 12 Tuesday, February 19, 13 12
- 13. bitcoin-rt • visualize Bitcoin transactions in real time • inspired by original bitcoinmonitor.com 13 Tuesday, February 19, 13 13
- 14. 14 Tuesday, February 19, 13 14
- 15. bitcoin-rt vs bitcoinmonitor • WebSockets instead of Long Polling • d3.js (http://d3js.org/) instead of JQuery UI 15 Tuesday, February 19, 13 15
- 16. 16 Tuesday, February 19, 13 16
- 17. bitcoin-rt implementations • Node.js – http://nodejs.org/ • Node.js + SockJS – http://sockjs.org • Java + Tomcat native WebSocket API • Java + Atmosphere – https://github.com/Atmosphere • Java + Vert.x – http://vertx.io/ • Java + Spring Integration (TCP Module) 17 Tuesday, February 19, 13 17
- 18. https://github.com/cbeams/bitcoin-rt 18 Tuesday, February 19, 13 18
- 19. bitcoin-rt Node.js demo 19 Tuesday, February 19, 13 19
- 20. WebSocket benefits • more resource-efficient • lower-latency data • conceptually simpler 20 Tuesday, February 19, 13 20
- 21. If WebSocket is so great... • Why does bitcoinmonitor use long polling? • What about other sites? – Asana.com – Meteor (http://www.meteor.com) self.socket = new SockJS(self.url, undefined, { debug: false, protocols_whitelist: [ // only allow polling protocols. no websockets or streaming. // streaming makes safari spin, and websockets hurt chrome. 'xdr-polling', 'xhr-polling', 'iframe-xhr-polling', 'jsonp-polling' ]}); github.com/meteor/meteor/blob/master/packages/stream/stream_client.js 21 Tuesday, February 19, 13 21
- 22. Browser Support http://caniuse.com/#feat=websockets (Feb 17, 2013) 22 Tuesday, February 19, 13 22
- 23. Browser Share World-Wide http://gs.statcounter.com/ 23 Tuesday, February 19, 13 23
- 24. Browser Share China http://gs.statcounter.com/ 24 Tuesday, February 19, 13 24
- 25. Browser Versions World-Wide http://gs.statcounter.com/ 25 Tuesday, February 19, 13 25
- 26. HTTP Proxies • Content caching, internet connectivity, filtering • Can monitor or close connections, buffer unencrypted traffic • Designed for HTTP-based document transfer • Not for long-lived connections 26 Tuesday, February 19, 13 26
- 27. Proxy Traversal “Today, most transparent proxy servers will not yet be familiar with the Web Socket protocol and these proxy servers will be unable to support the Web Socket protocol” Peter Lubbers, in a 2010 InfoQ article 27 Tuesday, February 19, 13 27
- 28. Proxy Issues • Explicit proxies with HTTP Connect • Transparent proxies propagation of Upgrade header • Retaining the Connection header • WebSocket frames vs HTTP traffic 28 Tuesday, February 19, 13 28
- 29. A Few Rules of Thumb • “wss:” provides a much better chance of success • Same for browsers using explicit proxies • Transparent proxies can support WebSocket • But must be configured explicitly 29 Tuesday, February 19, 13 29
- 30. Keeping Connections Alive • Internet inherently unreliable • Both server and client can go away • Wireless connection may fade out • and so on 30 Tuesday, February 19, 13 30
- 31. A New Set of Challenges • Keep-alive ("ping!") • Heartbeat ("I'm still here!") • Message delivery guarantee • Buffering 31 Tuesday, February 19, 13 31
- 32. How Did We Get Here? 32 Tuesday, February 19, 13 32
- 33. Some History • 1996 - Java Applets/Netscape 2.0 • 1999/2000 - XMLHttpRequest (XHR) • 2003 - Macromedia/Adobe Flash (RTMP Protocol) 33 Tuesday, February 19, 13 33
- 34. Comet • March 2006 - Comet - Alex Russell • event-driven, server-push data streaming • e.g. in GMail's GTalk interface 34 Tuesday, February 19, 13 34
- 35. Comet • XHR long-polling / XHR multipart-replace / XHR Streaming • htmlfile ActiveX Object • Server-sent events (SSE) - Part of HTML5/W3C (EventSource) – http://www.html5rocks.com/en/tutorials/eventsource/basics/ 35 Tuesday, February 19, 13 35
- 36. Path to WebSockets • 2007 - TCPConnection API and protocol (Ian Hickson) • WebSocket - First public draft January 2008 36 Tuesday, February 19, 13 36
- 37. IETF Standardization 37 Tuesday, February 19, 13 37
- 38. Network Working Group • 2009-Jan - hixie-00 • 2010-Feb - hixie-75 - Chrome 4 • 2010-May - hixie-76 - Disabled in FF/Opera 38 Tuesday, February 19, 13 38
- 39. HyBi Working Group • 2010-May - hybi-00 - Same as hixie-76 • 2011-April - hybi-07 - Firefox 6 • 2011-Dec - RFC6455 39 Tuesday, February 19, 13 39
- 40. RFC 6455 The WebSocket Protocol Final Version: Dec 2011 http://tools.ietf.org/html/rfc6455 40 Tuesday, February 19, 13 40
- 41. WebSocket Protocol Details • TCP-based protocol • HTTP used solely for upgrade request (Status Code 101) • Bi-directional, full-duplex • Data Frames can be Text (UTF-8) or arbitrary Binary data 41 Tuesday, February 19, 13 41
- 42. WebSocket Schemes • Unencrypted: ws:// • Encrypted: wss:// • Use encrypted scheme 42 Tuesday, February 19, 13 42
- 43. WebSocket Handshake • Request: Sec-WebSocket-Key Header • Response - 258EAFA5-E914-47DA-95CA-C5AB0DC85B11 • Appended to key + SHA-1 + base64 • Sec-WebSocket-Accept Header 43 Tuesday, February 19, 13 43
- 44. WebSocket Protocol Details 0 1 2 3 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 +-+-+-+-+-------+-+-------------+-------------------------------+ |F|R|R|R| opcode|M| Payload len | Extended payload length | |I|S|S|S| (4) |A| (7) | (16/64) | |N|V|V|V| |S| | (if payload len==126/127) | | |1|2|3| |K| | | +-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - + | Extended payload length continued, if payload len == 127 | + - - - - - - - - - - - - - - - +-------------------------------+ | |Masking-key, if MASK set to 1 | +-------------------------------+-------------------------------+ | Masking-key (continued) | Payload Data | +-------------------------------- - - - - - - - - - - - - - - - + : Payload Data continued ... : + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + | Payload Data continued ... | +---------------------------------------------------------------+ http://www.ietf.org/rfc/rfc6455.txt 44 Tuesday, February 19, 13 44
- 45. WebSocket Control Frames • Communicate state about the WebSocket • Close (0x8) • Ping (0x9) • Pong (0xA) • More possible in future • 125 bytes or less 45 Tuesday, February 19, 13 45
- 46. WebSocket Extensions • WebSocket Per-frame Compression (Draft) • Multiplexing Extension (Draft) • Extensions Header: Sec-WebSocket-Extensions • Used in the opening handshake (HTTP) 46 Tuesday, February 19, 13 46
- 47. Multiplexing Extension (MUX) • http://tools.ietf.org/html/draft-ietf-hybi-websocket- multiplexing-08 • Separate logical connections over underlying transport connection 47 Tuesday, February 19, 13 47
- 48. Sub-Protocols • Sub-Protocol Header: Sec-WebSocket-Protocol • IANA Registry: http://www.iana.org/assignments/websocket/websocket.xml – STOMP – WAMP – soap (WTF?) 48 Tuesday, February 19, 13 48
- 49. HTML5 WebSockets = W3C API + IETF Protocol 49 Tuesday, February 19, 13 49
- 50. The WebSocket API • W3C Candidate Recommendation 20 Sep 2012 • http://www.w3.org/TR/websockets/ • Browser client-side API 50 Tuesday, February 19, 13 50
- 51. The WebSocket API • Binary data supported: Blob or ArrayBuffer format • Can inspect extensions (read-only) • No support for ping/pong frames 51 Tuesday, February 19, 13 51
- 52. The readyState attribute • CONNECTING (0) - Connection not yet established • OPEN (1) - Connection is established + communication possible • CLOSING (2) - Connection going through closing handshake / close() method called • CLOSED (3) - Connection is closed / could not be opened 52 Tuesday, February 19, 13 52
- 53. Event Handlers • onopen • onmessage • onerror • onclose 53 Tuesday, February 19, 13 53
- 54. Code Sample var socket = new WebSocket( 'ws://localhost:8080/bitcoin-java- servlet/tomcat'); ... socket.onmessage = function(event) { console.log(event.data); var trade = JSON.parse(event.data); ... }; ... 54 Tuesday, February 19, 13 54
- 55. Non-Java Solutions 55 Tuesday, February 19, 13 55
- 56. Non-Java Solutions • Node.js websocket package – https://npmjs.org/package/websocket • Socket.IO (Engine.IO) – http://socket.io • SockJS – http://sockjs.org 56 Tuesday, February 19, 13 56
- 57. More Than Just WebSockets • XHR streaming • XHR long polling • Hidden iframe • Flash socket • Polling 57 Tuesday, February 19, 13 57
- 58. Socket.IO vs SockJS • Socket.IO more popular, SockJS gaining ground • SockJS focused on transports, horizontal scalability • Discussion thread 58 Tuesday, February 19, 13 58
- 59. Where We Are In Java Land 59 Tuesday, February 19, 13 59
- 60. Tomcat • WebSocketServlet • Since 7.0.27 (03/2012) • Backport to 6.0.35 Issue 52918 • Fairly minimal, server-side only • http://tomcat.apache.org/tomcat-7.0-doc/web-socket- howto.html 60 Tuesday, February 19, 13 60
- 61. Jetty • Since Jetty 7.x (early adoption, complex) • Revised in Jetty 9 – http://webtide.intalio.com/2012/10/jetty-9-updated-websocket-api/ • Builds on Java 7, messages not frames, annotations http://download.eclipse.org/jetty/stable-7/apidocs/org/ eclipse/jetty/websocket/package-summary.html 61 Tuesday, February 19, 13 61
- 62. Glassfish • Since 3.1 (02/2011) • Exposes frames, server-side only • Like with earlier Jetty versions, a major revision is likely • http://antwerkz.com/glassfish-web-sockets-sample/ • Glassfish 4 integrates Tyrus (http://tyrus.java.net/) – Tyrus = JSR-356 Reference Implementation for Java API for WebSocket 62 Tuesday, February 19, 13 62
- 63. Java API for WebSocket (JSR-356) • Original discussion started in JSR-340 (Servlet 3.1) • Later split out into separate spec • Servlet spec will have an upgrade option • JSR-356 will not require Servlet API 63 Tuesday, February 19, 13 63
- 64. What's under discussion • Client and server-side API • Use of annotations (or use API directly) • Support for extensions • Security considerations • Thread model 64 Tuesday, February 19, 13 64
- 65. Implementation • Declare Endpoint @WebSocketEndpoint(value="/websocket", configuration=DefaultServerConfiguration.class) public class BitCoinEndpoint { ... } • LifeCycle – @WebSocketOpen, @WebSocketClose • Handling Messages – @WebSocketMessage • Handling Errors – @WebSocketError 65 Tuesday, February 19, 13 65
- 66. Resources • All drafts so far http://java.net/projects/websocket-spec/downloads/ directory/Spec%20javadoc%20Drafts • JSR-000356 Java API for WebSocket 1.0 Public Review http://download.oracle.com/otndocs/jcp/websocket-1_0-pr- spec/index.html • Mailing list archives http://java.net/projects/websocket-spec/lists 66 Tuesday, February 19, 13 66
- 67. Client Side • AsyncHttpClient https://github.com/sonatype/async-http-client • Jetty • Netty • vert.x • Grizzly • JSR-356 (coming) 67 Tuesday, February 19, 13 67
- 68. Other Implementations • Atmosphere https://github.com/Atmosphere/atmosphere • jWebSocket http://jwebsocket.org/ • Netty.Io https://netty.io/ • vert.x http://vertx.io/ • Grizzly http://grizzly.java.net/ 68 Tuesday, February 19, 13 68
- 69. Spring Integration WebSocket Support • Atmosphere based Extension (Coming) • Considering adding Client Support (SockJS) • Event Bus support (Integration with Integration.js) • WebSocket implementation using TCP Adapters – https://github.com/SpringSource/spring-integration-extensions/ tree/master/spring-integration-ip-extensions – passes Autobahn Testsuite (http://autobahn.ws/testsuite) 69 Tuesday, February 19, 13 69
- 70. Spring 4.0 WebSocket Support • WebSocket Support (JSR-356) • Support for SockJS and/or Socket.IO 70 Tuesday, February 19, 13 70
- 71. Building a Non-Trivial Application 71 Tuesday, February 19, 13 71
- 72. A Few Conclusions • WebSocket technology is promising • Not a silver bullet • Complement to REST • Potential replacement for Comet techniques • But the need for fallback options will persist 72 Tuesday, February 19, 13 72
- 73. A Few Conclusions • Integrating WebSockets into a real app is not yet trivial • But now is the time to begin thinking about it • “Pure WebSocket” applications in the wild unlikely 73 Tuesday, February 19, 13 73
- 74. Predictions • A consolidation of 'fallback protocols' • Leading to wide adoption in various application frameworks • SockJS currently the most promising effort – https://github.com/sockjs/sockjs-protocol 74 Tuesday, February 19, 13 74
- 75. Many questions remain • Usage patterns • Higher-level protocols • XMPP, AMQP, JMS, … 75 Tuesday, February 19, 13 75
- 76. Building a real app today • Commercial vendors have a lot to offer • Particularly – blog: http://blog.kaazing.com/ – http://www.websocket.org/ • Doing Mobile? Consider Push Technologies – Apple Push Notification Service (APNS) – Google Cloud Messaging for Android (GCM) – Consider – Spring Mobile provides early support: https://github.com/SpringSource/spring-mobile-urbanairship 76 Tuesday, February 19, 13 76
- 77. Predictions: Java • JSR-356 will be important • Frameworks have a big role to play • Atmosphere is there today • Dedicated Spring support under development 77 Tuesday, February 19, 13 77
- 78. Questions? Thanks! http://twitter.com/ghillert http://cbeams.github.com/bitcoin-rt 78 Tuesday, February 19, 13 78