SlideShare a Scribd company logo

Introduction to WebSockets

Gunnar Hillert
Gunnar Hillert

WebSocket is a protocol that provides bidirectional communication over a single TCP connection. It uses an HTTP handshake to establish a connection and then transmits messages as frames that can contain text or binary data. The frames include a header with metadata like opcode and payload length. WebSocket aims to provide a standard for browser-based applications that require real-time data updates from a server.

Technology
1 of 87
Downloaded 270 times
1
2
3
Most read
4
5
6
Most read
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Most read
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
Introduction to WebSockets
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
Objectives • Survey the lay of the land • Less focus on syntax and mechanics • Broad, pragmatic perspective • Special emphasis on Java 3
Where to find the slides + samples? • Slides: https://slideshare.net/hillert/ajug2012websocket • Samples: https://github.com/cbeams/bitcoin-rt 4
WebSocket 101 5
The Problem • Some web apps need two-way communication / rapid updates • AJAX and Comet techniques can amount to an “abuse of HTTP” 6
The Problem • Too many connections • Too much overhead • Too great a burden on the client 7
The Usual Suspects • Trading • Chat • Gaming • Collaboration • Visualization 8
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
The Approach • Two-way messaging over a single connection • Layer on TCP • Not HTTP, but uses HTTP to bootstrap • Extremely low-overhead 10
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
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
bitcoin-rt • visualize Bitcoin transactions in real time • inspired by original bitcoinmonitor.com 13
14
bitcoin-rt vs bitcoinmonitor • WebSockets instead of Long Polling • d3.js (http://d3js.org/) instead of JQuery UI • MongoDB for persistence 15
16
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/ 17
https://github.com/cbeams/bitcoin-rt 18
bitcoin-rt Node.js demo 19
WebSocket benefits • more resource-efficient • lower-latency data • conceptually simpler 20
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
Browser Support http://caniuse.com/#feat=websockets (Dec 17, 2012) 22
Browser Share World-Wide http://gs.statcounter.com/ 23
Browser Share China http://gs.statcounter.com/ 24
Browser Versions World-Wide http://gs.statcounter.com/ 25
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
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
Proxy Issues • Explicit proxies with HTTP Connect • Transparent proxies propagation of Upgrade header • Retaining the Connection header • WebSocket frames vs HTTP traffic 28
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
Keeping Connections Alive • Internet inherently unreliable • Both server and client can go away • Wireless connection may fade out • and so on 30
A New Set of Challenges • Keep-alive ("ping!") • Heartbeat ("I'm still here!") • Message delivery guarantee • Buffering 31
How Did We Get Here? 32
Some History • 1996 - Java Applets/Netscape 2.0 • 1999/2000 - XMLHttpRequest (XHR) • 2003 - Macromedia/Adobe Flash (RTMP Protocol) 33
Comet • March 2006 - Comet - Alex Russell • event-driven, server-push data streaming • e.g. in GMail's GTalk interface 34
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
Path to WebSockets • 2007 - TCPConnection API and protocol (Ian Hickson) • WebSocket - First public draft January 2008 36
IETF Standardization 37
Network Working Group • 2009-Jan - hixie-00 • 2010-Feb - hixie-75 - Chrome 4 • 2010-May - hixie-76 - Disabled in FF/Opera 38
HyBi Working Group • 2010-May - hybi-00 - Same as hixie-76 • 2011-April - hybi-07 - Firefox 6 • 2011-Dec - RFC6455 39
RFC 6455 The WebSocket Protocol Final Version: Dec 2011 http://tools.ietf.org/html/rfc6455 40
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
WebSocket Schemes • Unencrypted: ws:// • Encrypted: wss:// • Use encrypted scheme 42
WebSocket Handshake • Request: Sec-WebSocket-Key Header • Response - 258EAFA5-E914-47DA-95CA-C5AB0DC85B11 • Appended to key + SHA-1 + base64 • Sec-WebSocket-Accept Header 43
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
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 RSV1-3 (1 bit each) - Reserved for extensions +-+-+-+-+-------+-+-------------+-------------------------------+ |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 | +-------------------------------+-------------------------------+ TextFIN (1 bit) - Final fragment in a message | Masking-key (continued) | Payload Data | +-------------------------------- - - - - - - - - - - - - - - - + : Payload Data continued ... : + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + | Payload Data continued ... | +---------------------------------------------------------------+ http://www.ietf.org/rfc/rfc6455.txt 45
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 | +-------------------------------+-------------------------------+ | Opcode (4 bits) -(continued) payload | Masking-key Which type of Payload Data | +-------------------------------- - - - - - - - - - - - - - - - + : • Text frame, binary frame, Payload Data continued ... control frames : + •- Continuation frame indicates-data- - - -to- - - - frame - - - - - - - - + - - - - - - - - - - - belongs previous - - | Payload Data continued ... | +---------------------------------------------------------------+ http://www.ietf.org/rfc/rfc6455.txt 46
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 +-+-+-+-+-------+-+-------------+-------------------------------+ Mask (1 bit) - Clients must mask |F|R|R|R| opcode|M| Payload len | Extended payload length | |I|S|S|S| (4) |A| (7) • Clients must mask | (16/64) | |N|V|V|V| |S| • Minimize data sniffing + Proxy cache-poisoning | | (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 ... | +---------------------------------------------------------------+ Masking-key (32bit) - Random (XOR) for each frame http://www.ietf.org/rfc/rfc6455.txt 47
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 | +-------------------------------+-------------------------------+ | Payload length (continued) in bytes | Masking-key (7, 16 or 64 bit) Payload Data | +-------------------------------- - - - - - - - - - - - - - - - + : Payload Data continued ... : + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + | Payload Data continued ... | +---------------------------------------------------------------+ http://www.ietf.org/rfc/rfc6455.txt data Extension data + Application 48
WebSocket Control Frames • Communicate state about the WebSocket • Close (0x8) • Ping (0x9) • Pong (0xA) • More possible in future • 125 bytes or less 49
Close Frame • Terminates WebSocket connection • Can contain a body (UTF-8 encoded) • Defines a set of Status Codes, e.g: • 1000 = normal closure • 1001 = endpoint is “going away” 50
Ping + Pong Frame • Serves as keepalive (Ping followed by Pong) • Check whether the remote endpoint is still responsive • Can be sent at any time (WebSocket established, before close) • Just Pongs (unsolicited) = unidirectional heartbeat 51
WebSocket Extensions • WebSocket Per-frame Compression (Draft) • Multiplexing Extension (Draft) • Extensions Header: Sec-WebSocket-Extensions • Used in the opening handshake (HTTP) 52
Multiplexing Extension (MUX) • http://tools.ietf.org/html/draft-ietf-hybi-websocket- multiplexing-08 • Separate logical connections over underlying transport connection 53
Sub-Protocols • Sub-Protocol Header: Sec-WebSocket-Protocol • IANA Registry: http://www.iana.org/assignments/websocket/websocket.xml – STOMP – WAMP – soap (WTF?) 54
HTML5 WebSockets = W3C API + IETF Protocol 55
The WebSocket API • W3C Candidate Recommendation 20 Sep 2012 • http://www.w3.org/TR/websockets/ • Browser client-side API 56
The WebSocket API • Binary data supported: Blob or ArrayBuffer format • Can inspect extensions (read-only) • No support for ping/pong frames 57
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 58
Event Handlers • onopen • onmessage • onerror • onclose 59
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); ... }; ... 60
JSR 356: Java API for WebSocket • Early Draft Review, latest version Dec 2012 • http://jcp.org/en/jsr/detail?id=356 61
Non-Java Solutions 62
Non-Java Solutions • Node.js websocket package – https://npmjs.org/package/websocket • Socket.IO – http://socket.io • SockJS – http://sockjs.org 63
More Than Just WebSockets • XHR streaming • XHR long polling • Hidden iframe • Flash socket • Polling 64
Socket.IO • Engine.IO • Socket.IO 65
SockJS Transports 66
Socket.IO vs SockJS • Socket.IO more popular, SockJS gaining ground • SockJS focused on transports, horizontal scalability • Discussion thread 67
Where We Are In Java Land 68
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 69
bitcoin-rt: Tomcat demo 70
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 71
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/ 72
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/ 73
Client Side • AsyncHttpClient https://github.com/sonatype/async-http-client • Jetty • Netty • vert.x • Grizzly 74
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 75
What's under discussion • Client and server-side API • Use of annotations (or use API directly) • Support for extensions • Security considerations • Thread model 76
What's under discussion • Client and server-side API • Use of annotations (or use API directly) • Support for extensions • Security considerations • Thread model 77
Resources • All drafts so far http://java.net/projects/websocket-spec/downloads/ directory/Spec%20javadoc%20Drafts • The latest v010 Early Draft Review http://java.net/projects/websocket-spec/downloads/ directory/Spec%20javadoc%20Drafts/v010 • Mailing list archives http://java.net/projects/websocket-spec/lists 78
Spring Integration WebSocket Support • Atmosphere based Extension (Coming) • WebSocket implementation using TCP Adapters (demo) • Considering adding Client Support (SockJS) • Event Bus support (Integration with Integration.js) 79
Building a Non-Trivial Application 80
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 81
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 82
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 83
Many questions remain • Usage patterns • Higher-level protocols • XMPP, AMQP, JMS, … 84
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 85
Predictions: Java • JSR-356 will be important • Frameworks have a big role to play • Atmosphere is there today • Dedicated Spring support in consideration 86
Questions? Thanks! http://twitter.com/ghillert http://cbeams.github.com/bitcoin-rt 87

More Related Content

What's hot (20)

PPT
Web-Socket
Pankaj Kumar Sharma
 
PDF
Understanding Blockchain Security
ITU
 
PDF
SDN & NFV Introduction - Open Source Data Center Networking
Thomas Graf
 
PPTX
Introduction to MQ Telemetry Transport (MQTT)
Amarjeetsingh Thakur
 
PPTX
Wireless application protocol ppt
OECLIB Odisha Electronics Control Library
 
PDF
Anthos
Meena Sambamurthy
 
PPTX
Chapter 7 - Wireless Network Security.pptx
AmanuelZewdie4
 
PDF
IoT RF Protocols
APNIC
 
PPTX
Wml
Hitesh Piprotar
 
PPTX
Http Vs Https .
simplyharshad
 
PDF
Scalable Deployment Patterns in WSO2 API Manager
WSO2
 
PDF
Demystifying OAuth 2.0
Karl McGuinness
 
PPTX
NGINX: Basics and Best Practices
NGINX, Inc.
 
PDF
Introduction to SignalR
University of Hawai‘i at Mānoa
 
PPTX
WebRTC presentation
Veselin Pizurica
 
PPT
Manet
Pushkar Dutt
 
PPTX
Hypertext transfer protocol and hypertext transfer protocol secure(HTTP and H...
rahul kundu
 
PDF
Virtualization presentation
Mangesh Gunjal
 
PDF
Smart contracts using web3.js
Felix Crisan
 
PDF
gRPC Overview
Varun Talwar
 
Web-Socket
Pankaj Kumar Sharma
 
Understanding Blockchain Security
ITU
 
SDN & NFV Introduction - Open Source Data Center Networking
Thomas Graf
 
Introduction to MQ Telemetry Transport (MQTT)
Amarjeetsingh Thakur
 
Wireless application protocol ppt
OECLIB Odisha Electronics Control Library
 
Anthos
Meena Sambamurthy
 
Chapter 7 - Wireless Network Security.pptx
AmanuelZewdie4
 
IoT RF Protocols
APNIC
 
Wml
Hitesh Piprotar
 
Http Vs Https .
simplyharshad
 
Scalable Deployment Patterns in WSO2 API Manager
WSO2
 
Demystifying OAuth 2.0
Karl McGuinness
 
NGINX: Basics and Best Practices
NGINX, Inc.
 
Introduction to SignalR
University of Hawai‘i at Mānoa
 
WebRTC presentation
Veselin Pizurica
 
Manet
Pushkar Dutt
 
Hypertext transfer protocol and hypertext transfer protocol secure(HTTP and H...
rahul kundu
 
Virtualization presentation
Mangesh Gunjal
 
Smart contracts using web3.js
Felix Crisan
 
gRPC Overview
Varun Talwar
 

Viewers also liked (20)

PPTX
Introduction to WebSockets
WASdev Community
 
KEY
The HTML5 WebSocket API
David Lindkvist
 
PPTX
vlavrynovych - WebSockets Presentation
Volodymyr Lavrynovych
 
KEY
Pushing the web — WebSockets
Roland M
 
PDF
Presentation websockets
Bert Poller
 
PDF
WebSockets with Spring 4
Sergi Almar i Graupera
 
ZIP
Websocket protocol overview
allenmeng
 
PDF
Programming WebSockets - OSCON 2010
sullis
 
PPTX
The Atmosphere Framework
jfarcand
 
PDF
Unity and WebSockets
Josh Glover
 
PDF
Kaazing
Alexander Ainslie
 
PPTX
Il primo anno di vita del bambino
Azza
 
PDF
HTML5 WebSocket for the Real-Time Web and the Internet of Things
Peter Moskovits
 
PPTX
Simple Object Access Protocol
Saatviga Sudhahar
 
PDF
Html5 web sockets - Brad Drysdale - London Web 2011-10-20
Nathan O'Hanlon
 
PPTX
SOAP--Simple Object Access Protocol
Masud Rahman
 
PPTX
Websockets on the JVM: Atmosphere to the rescue!
jfarcand
 
PPT
JMS Introduction
Alex Su
 
PPT
Java Server Faces (JSF) - advanced
BG Java EE Course
 
PDF
The Modern Java Web Developer Bootcamp - Devoxx 2013
Matt Raible
 
Introduction to WebSockets
WASdev Community
 
The HTML5 WebSocket API
David Lindkvist
 
vlavrynovych - WebSockets Presentation
Volodymyr Lavrynovych
 
Pushing the web — WebSockets
Roland M
 
Presentation websockets
Bert Poller
 
WebSockets with Spring 4
Sergi Almar i Graupera
 
Websocket protocol overview
allenmeng
 
Programming WebSockets - OSCON 2010
sullis
 
The Atmosphere Framework
jfarcand
 
Unity and WebSockets
Josh Glover
 
Kaazing
Alexander Ainslie
 
Il primo anno di vita del bambino
Azza
 
HTML5 WebSocket for the Real-Time Web and the Internet of Things
Peter Moskovits
 
Simple Object Access Protocol
Saatviga Sudhahar
 
Html5 web sockets - Brad Drysdale - London Web 2011-10-20
Nathan O'Hanlon
 
SOAP--Simple Object Access Protocol
Masud Rahman
 
Websockets on the JVM: Atmosphere to the rescue!
jfarcand
 
JMS Introduction
Alex Su
 
Java Server Faces (JSF) - advanced
BG Java EE Course
 
The Modern Java Web Developer Bootcamp - Devoxx 2013
Matt Raible
 
Ad

Similar to Introduction to WebSockets (20)

PPTX
.NET Conf 2022 - Networking in .NET 7
Karel Zikmund
 
PDF
DevNexus 2013 - Introduction to WebSockets
Gunnar Hillert
 
PDF
WebSockets wiith Scala and Play! Framework
Fabio Tiriticco
 
PPTX
HTML5 Real Time and WebSocket Code Lab (SFHTML5, GTUGSF)
Peter Lubbers
 
PDF
Programming WebSockets - April 20 2010
sullis
 
PDF
WebRTC standards update - November 2014
Victor Pascual Ávila
 
PDF
HTTP/2 Comes to Java: Servlet 4.0 and what it means for the Java/Jakarta EE e...
Edward Burns
 
PDF
DevCon 5 (July 2013) - WebSockets
Crocodile WebRTC SDK and Cloud Signalling Network
 
PDF
Developing Revolutionary Web Applications using Comet and Ajax Push
Doris Chen
 
PPTX
Training Webinar: Enterprise application performance with server push technol...
OutSystems
 
PPTX
WUG Days 2022 Brno - Networking in .NET 7.0 and YARP -- Karel Zikmund
Karel Zikmund
 
KEY
111214 node conf
Kensaku Komatsu
 
PPTX
Web sockets - Pentesting
Vandana Verma
 
PPTX
Websocket vs SSE - Paris.js - 24/06/15
streamdata.io
 
PPTX
KubeCon USA 2017 brief Overview - from Kubernetes meetup Bangalore
Krishna-Kumar
 
PDF
[workshop] The Revolutionary WebRTC
Giacomo Vacca
 
PDF
Mulesoft Pune Meetup Deck - Apr 2020
Santosh Ojha
 
PPTX
IOT and System Platform From Concepts to Code
Andy Robinson
 
PDF
WebSocket Perspectives 2015 - Clouds, Streams, Microservices and WoT
Frank Greco
 
PDF
Internet of Things - protocols review (MeetUp Wireless & Networks, Poznań 21....
Marcin Bielak
 
.NET Conf 2022 - Networking in .NET 7
Karel Zikmund
 
DevNexus 2013 - Introduction to WebSockets
Gunnar Hillert
 
WebSockets wiith Scala and Play! Framework
Fabio Tiriticco
 
HTML5 Real Time and WebSocket Code Lab (SFHTML5, GTUGSF)
Peter Lubbers
 
Programming WebSockets - April 20 2010
sullis
 
WebRTC standards update - November 2014
Victor Pascual Ávila
 
HTTP/2 Comes to Java: Servlet 4.0 and what it means for the Java/Jakarta EE e...
Edward Burns
 
DevCon 5 (July 2013) - WebSockets
Crocodile WebRTC SDK and Cloud Signalling Network
 
Developing Revolutionary Web Applications using Comet and Ajax Push
Doris Chen
 
Training Webinar: Enterprise application performance with server push technol...
OutSystems
 
WUG Days 2022 Brno - Networking in .NET 7.0 and YARP -- Karel Zikmund
Karel Zikmund
 
111214 node conf
Kensaku Komatsu
 
Web sockets - Pentesting
Vandana Verma
 
Websocket vs SSE - Paris.js - 24/06/15
streamdata.io
 
KubeCon USA 2017 brief Overview - from Kubernetes meetup Bangalore
Krishna-Kumar
 
[workshop] The Revolutionary WebRTC
Giacomo Vacca
 
Mulesoft Pune Meetup Deck - Apr 2020
Santosh Ojha
 
IOT and System Platform From Concepts to Code
Andy Robinson
 
WebSocket Perspectives 2015 - Clouds, Streams, Microservices and WoT
Frank Greco
 
Internet of Things - protocols review (MeetUp Wireless & Networks, Poznań 21....
Marcin Bielak
 
Ad

More from Gunnar Hillert (15)

PDF
High Precision GPS Positioning for Spring Developers
Gunnar Hillert
 
PDF
Migrating to Angular 5 for Spring Developers
Gunnar Hillert
 
PDF
The Spring Update
Gunnar Hillert
 
PDF
Ajug - The Spring Update
Gunnar Hillert
 
PPTX
s2gx2015 who needs batch
Gunnar Hillert
 
PDF
Spring Batch Performance Tuning
Gunnar Hillert
 
PDF
Creating Modular Test-Driven SPAs with Spring and AngularJS
Gunnar Hillert
 
PDF
Modular Test-driven SPAs with Spring and AngularJS
Gunnar Hillert
 
PDF
Atlanta JUG - Integrating Spring Batch and Spring Integration
Gunnar Hillert
 
KEY
S2GX 2012 - Spring Projects Infrastructure
Gunnar Hillert
 
KEY
S2GX 2012 - What's New in Spring Integration
Gunnar Hillert
 
KEY
S2GX 2012 - Introduction to Spring Integration and Spring Batch
Gunnar Hillert
 
PPTX
Spring Projects Infrastructure
Gunnar Hillert
 
PDF
Cloud Foundry for Spring Developers
Gunnar Hillert
 
KEY
jRecruiter - The AJUG Job Posting Service
Gunnar Hillert
 
High Precision GPS Positioning for Spring Developers
Gunnar Hillert
 
Migrating to Angular 5 for Spring Developers
Gunnar Hillert
 
The Spring Update
Gunnar Hillert
 
Ajug - The Spring Update
Gunnar Hillert
 
s2gx2015 who needs batch
Gunnar Hillert
 
Spring Batch Performance Tuning
Gunnar Hillert
 
Creating Modular Test-Driven SPAs with Spring and AngularJS
Gunnar Hillert
 
Modular Test-driven SPAs with Spring and AngularJS
Gunnar Hillert
 
Atlanta JUG - Integrating Spring Batch and Spring Integration
Gunnar Hillert
 
S2GX 2012 - Spring Projects Infrastructure
Gunnar Hillert
 
S2GX 2012 - What's New in Spring Integration
Gunnar Hillert
 
S2GX 2012 - Introduction to Spring Integration and Spring Batch
Gunnar Hillert
 
Spring Projects Infrastructure
Gunnar Hillert
 
Cloud Foundry for Spring Developers
Gunnar Hillert
 
jRecruiter - The AJUG Job Posting Service
Gunnar Hillert
 

Recently uploaded (20)

PPTX
Future Tech Innovations 2025 – A TechLists Insight
TechLists
 
PDF
Empower Inclusion Through Accessible Java Applications
Ana-Maria Mihalceanu
 
PDF
Advancing WebDriver BiDi support in WebKit
Igalia
 
PDF
“NPU IP Hardware Shaped Through Software and Use-case Analysis,” a Presentati...
Edge AI and Vision Alliance
 
PPTX
Webinar: Introduction to LF Energy EVerest
DanBrown980551
 
PDF
Building Real-Time Digital Twins with IBM Maximo & ArcGIS Indoors
Safe Software
 
PDF
Jak MŚP w Europie Środkowo-Wschodniej odnajdują się w świecie AI
dominikamizerska1
 
PDF
Newgen Beyond Frankenstein_Build vs Buy_Digital_version.pdf
darshakparmar
 
PDF
How Startups Are Growing Faster with App Developers in Australia.pdf
India App Developer
 
PPTX
Building Search Using OpenSearch: Limitations and Workarounds
Sease
 
PDF
Go Concurrency Real-World Patterns, Pitfalls, and Playground Battles.pdf
Emily Achieng
 
DOCX
Python coding for beginners !! Start now!#
Rajni Bhardwaj Grover
 
PDF
Using FME to Develop Self-Service CAD Applications for a Major UK Police Force
Safe Software
 
PDF
IoT-Powered Industrial Transformation – Smart Manufacturing to Connected Heal...
Rejig Digital
 
PDF
"Beyond English: Navigating the Challenges of Building a Ukrainian-language R...
Fwdays
 
PDF
CIFDAQ Market Insights for July 7th 2025
CIFDAQ
 
PPTX
"Autonomy of LLM Agents: Current State and Future Prospects", Oles` Petriv
Fwdays
 
PDF
Agentic AI lifecycle for Enterprise Hyper-Automation
Debmalya Biswas
 
DOCX
Cryptography Quiz: test your knowledge of this important security concept.
Rajni Bhardwaj Grover
 
PDF
Reverse Engineering of Security Products: Developing an Advanced Microsoft De...
nwbxhhcyjv
 
Future Tech Innovations 2025 – A TechLists Insight
TechLists
 
Empower Inclusion Through Accessible Java Applications
Ana-Maria Mihalceanu
 
Advancing WebDriver BiDi support in WebKit
Igalia
 
“NPU IP Hardware Shaped Through Software and Use-case Analysis,” a Presentati...
Edge AI and Vision Alliance
 
Webinar: Introduction to LF Energy EVerest
DanBrown980551
 
Building Real-Time Digital Twins with IBM Maximo & ArcGIS Indoors
Safe Software
 
Jak MŚP w Europie Środkowo-Wschodniej odnajdują się w świecie AI
dominikamizerska1
 
Newgen Beyond Frankenstein_Build vs Buy_Digital_version.pdf
darshakparmar
 
How Startups Are Growing Faster with App Developers in Australia.pdf
India App Developer
 
Building Search Using OpenSearch: Limitations and Workarounds
Sease
 
Go Concurrency Real-World Patterns, Pitfalls, and Playground Battles.pdf
Emily Achieng
 
Python coding for beginners !! Start now!#
Rajni Bhardwaj Grover
 
Using FME to Develop Self-Service CAD Applications for a Major UK Police Force
Safe Software
 
IoT-Powered Industrial Transformation – Smart Manufacturing to Connected Heal...
Rejig Digital
 
"Beyond English: Navigating the Challenges of Building a Ukrainian-language R...
Fwdays
 
CIFDAQ Market Insights for July 7th 2025
CIFDAQ
 
"Autonomy of LLM Agents: Current State and Future Prospects", Oles` Petriv
Fwdays
 
Agentic AI lifecycle for Enterprise Hyper-Automation
Debmalya Biswas
 
Cryptography Quiz: test your knowledge of this important security concept.
Rajni Bhardwaj Grover
 
Reverse Engineering of Security Products: Developing an Advanced Microsoft De...
nwbxhhcyjv
 

Introduction to WebSockets

  • 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
  • 3. Objectives • Survey the lay of the land • Less focus on syntax and mechanics • Broad, pragmatic perspective • Special emphasis on Java 3
  • 4. Where to find the slides + samples? • Slides: https://slideshare.net/hillert/ajug2012websocket • Samples: https://github.com/cbeams/bitcoin-rt 4
  • 6. The Problem • Some web apps need two-way communication / rapid updates • AJAX and Comet techniques can amount to an “abuse of HTTP” 6
  • 7. The Problem • Too many connections • Too much overhead • Too great a burden on the client 7
  • 8. The Usual Suspects • Trading • Chat • Gaming • Collaboration • Visualization 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
  • 10. The Approach • Two-way messaging over a single connection • Layer on TCP • Not HTTP, but uses HTTP to bootstrap • Extremely low-overhead 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
  • 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
  • 13. bitcoin-rt • visualize Bitcoin transactions in real time • inspired by original bitcoinmonitor.com 13
  • 14. 14
  • 15. bitcoin-rt vs bitcoinmonitor • WebSockets instead of Long Polling • d3.js (http://d3js.org/) instead of JQuery UI • MongoDB for persistence 15
  • 16. 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/ 17
  • 20. WebSocket benefits • more resource-efficient • lower-latency data • conceptually simpler 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
  • 22. Browser Support http://caniuse.com/#feat=websockets (Dec 17, 2012) 22
  • 23. Browser Share World-Wide http://gs.statcounter.com/ 23
  • 24. Browser Share China http://gs.statcounter.com/ 24
  • 25. Browser Versions World-Wide http://gs.statcounter.com/ 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
  • 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
  • 28. Proxy Issues • Explicit proxies with HTTP Connect • Transparent proxies propagation of Upgrade header • Retaining the Connection header • WebSocket frames vs HTTP traffic 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
  • 30. Keeping Connections Alive • Internet inherently unreliable • Both server and client can go away • Wireless connection may fade out • and so on 30
  • 31. A New Set of Challenges • Keep-alive ("ping!") • Heartbeat ("I'm still here!") • Message delivery guarantee • Buffering 31
  • 32. How Did We Get Here? 32
  • 33. Some History • 1996 - Java Applets/Netscape 2.0 • 1999/2000 - XMLHttpRequest (XHR) • 2003 - Macromedia/Adobe Flash (RTMP Protocol) 33
  • 34. Comet • March 2006 - Comet - Alex Russell • event-driven, server-push data streaming • e.g. in GMail's GTalk interface 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
  • 36. Path to WebSockets • 2007 - TCPConnection API and protocol (Ian Hickson) • WebSocket - First public draft January 2008 36
  • 38. Network Working Group • 2009-Jan - hixie-00 • 2010-Feb - hixie-75 - Chrome 4 • 2010-May - hixie-76 - Disabled in FF/Opera 38
  • 39. HyBi Working Group • 2010-May - hybi-00 - Same as hixie-76 • 2011-April - hybi-07 - Firefox 6 • 2011-Dec - RFC6455 39
  • 40. RFC 6455 The WebSocket Protocol Final Version: Dec 2011 http://tools.ietf.org/html/rfc6455 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
  • 42. WebSocket Schemes • Unencrypted: ws:// • Encrypted: wss:// • Use encrypted scheme 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
  • 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
  • 45. 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 RSV1-3 (1 bit each) - Reserved for extensions +-+-+-+-+-------+-+-------------+-------------------------------+ |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 | +-------------------------------+-------------------------------+ TextFIN (1 bit) - Final fragment in a message | Masking-key (continued) | Payload Data | +-------------------------------- - - - - - - - - - - - - - - - + : Payload Data continued ... : + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + | Payload Data continued ... | +---------------------------------------------------------------+ http://www.ietf.org/rfc/rfc6455.txt 45
  • 46. 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 | +-------------------------------+-------------------------------+ | Opcode (4 bits) -(continued) payload | Masking-key Which type of Payload Data | +-------------------------------- - - - - - - - - - - - - - - - + : • Text frame, binary frame, Payload Data continued ... control frames : + •- Continuation frame indicates-data- - - -to- - - - frame - - - - - - - - + - - - - - - - - - - - belongs previous - - | Payload Data continued ... | +---------------------------------------------------------------+ http://www.ietf.org/rfc/rfc6455.txt 46
  • 47. 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 +-+-+-+-+-------+-+-------------+-------------------------------+ Mask (1 bit) - Clients must mask |F|R|R|R| opcode|M| Payload len | Extended payload length | |I|S|S|S| (4) |A| (7) • Clients must mask | (16/64) | |N|V|V|V| |S| • Minimize data sniffing + Proxy cache-poisoning | | (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 ... | +---------------------------------------------------------------+ Masking-key (32bit) - Random (XOR) for each frame http://www.ietf.org/rfc/rfc6455.txt 47
  • 48. 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 | +-------------------------------+-------------------------------+ | Payload length (continued) in bytes | Masking-key (7, 16 or 64 bit) Payload Data | +-------------------------------- - - - - - - - - - - - - - - - + : Payload Data continued ... : + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + | Payload Data continued ... | +---------------------------------------------------------------+ http://www.ietf.org/rfc/rfc6455.txt data Extension data + Application 48
  • 49. WebSocket Control Frames • Communicate state about the WebSocket • Close (0x8) • Ping (0x9) • Pong (0xA) • More possible in future • 125 bytes or less 49
  • 50. Close Frame • Terminates WebSocket connection • Can contain a body (UTF-8 encoded) • Defines a set of Status Codes, e.g: • 1000 = normal closure • 1001 = endpoint is “going away” 50
  • 51. Ping + Pong Frame • Serves as keepalive (Ping followed by Pong) • Check whether the remote endpoint is still responsive • Can be sent at any time (WebSocket established, before close) • Just Pongs (unsolicited) = unidirectional heartbeat 51
  • 52. WebSocket Extensions • WebSocket Per-frame Compression (Draft) • Multiplexing Extension (Draft) • Extensions Header: Sec-WebSocket-Extensions • Used in the opening handshake (HTTP) 52
  • 53. Multiplexing Extension (MUX) • http://tools.ietf.org/html/draft-ietf-hybi-websocket- multiplexing-08 • Separate logical connections over underlying transport connection 53
  • 54. Sub-Protocols • Sub-Protocol Header: Sec-WebSocket-Protocol • IANA Registry: http://www.iana.org/assignments/websocket/websocket.xml – STOMP – WAMP – soap (WTF?) 54
  • 55. HTML5 WebSockets = W3C API + IETF Protocol 55
  • 56. The WebSocket API • W3C Candidate Recommendation 20 Sep 2012 • http://www.w3.org/TR/websockets/ • Browser client-side API 56
  • 57. The WebSocket API • Binary data supported: Blob or ArrayBuffer format • Can inspect extensions (read-only) • No support for ping/pong frames 57
  • 58. 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 58
  • 59. Event Handlers • onopen • onmessage • onerror • onclose 59
  • 60. 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); ... }; ... 60
  • 61. JSR 356: Java API for WebSocket • Early Draft Review, latest version Dec 2012 • http://jcp.org/en/jsr/detail?id=356 61
  • 63. Non-Java Solutions • Node.js websocket package – https://npmjs.org/package/websocket • Socket.IO – http://socket.io • SockJS – http://sockjs.org 63
  • 64. More Than Just WebSockets • XHR streaming • XHR long polling • Hidden iframe • Flash socket • Polling 64
  • 67. Socket.IO vs SockJS • Socket.IO more popular, SockJS gaining ground • SockJS focused on transports, horizontal scalability • Discussion thread 67
  • 68. Where We Are In Java Land 68
  • 69. 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 69
  • 71. 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 71
  • 72. 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/ 72
  • 73. 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/ 73
  • 74. Client Side • AsyncHttpClient https://github.com/sonatype/async-http-client • Jetty • Netty • vert.x • Grizzly 74
  • 75. 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 75
  • 76. What's under discussion • Client and server-side API • Use of annotations (or use API directly) • Support for extensions • Security considerations • Thread model 76
  • 77. What's under discussion • Client and server-side API • Use of annotations (or use API directly) • Support for extensions • Security considerations • Thread model 77
  • 78. Resources • All drafts so far http://java.net/projects/websocket-spec/downloads/ directory/Spec%20javadoc%20Drafts • The latest v010 Early Draft Review http://java.net/projects/websocket-spec/downloads/ directory/Spec%20javadoc%20Drafts/v010 • Mailing list archives http://java.net/projects/websocket-spec/lists 78
  • 79. Spring Integration WebSocket Support • Atmosphere based Extension (Coming) • WebSocket implementation using TCP Adapters (demo) • Considering adding Client Support (SockJS) • Event Bus support (Integration with Integration.js) 79
  • 80. Building a Non-Trivial Application 80
  • 81. 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 81
  • 82. 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 82
  • 83. 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 83
  • 84. Many questions remain • Usage patterns • Higher-level protocols • XMPP, AMQP, JMS, … 84
  • 85. 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 85
  • 86. Predictions: Java • JSR-356 will be important • Frameworks have a big role to play • Atmosphere is there today • Dedicated Spring support in consideration 86
  • 87. Questions? Thanks! http://twitter.com/ghillert http://cbeams.github.com/bitcoin-rt 87