Websockets on the JVM: Atmosphere to the rescue!

WebSockets on the JVM:
Atmosphere to the rescue!
@jfarcand
Async-IO.org, http://async-io.org
CTO
@atmo_framework @jfarcand

WebSockets: Myth or Reality
WebSocket a standard? Really?
Tricks for Production Ready
WebSocket Application
@atmo_framework @asyncio

WebSockets
is a web technology providing for bi-directional,
full-duplex communications channels
over a single TCP connection.
Polling Long Polling Streaming
Browser Server
request
empty response
request
response
event
Browser Server Browser Server
request
response
request
event
request
response part
event
response part
event
response
request
event
event
WebSocket
Browser Server
request
Response
event
response
event

Agenda
•Who I am
•Atmosphere
•WebSockets: Serveur Side
•WebSocket: Client Side
•Socket.IO and Socks.js
•Conclusion

Who is this strange accent guy
• Creator of Frameworks
• Grizzly (NIO Framework)
• AsyncHttpClient
(HTTP/WebSocket)
• Atmosphere Framework
• Ex-GlassFish, Tomcat & Jetty
« committer »
• Ex Sun Microsystem, France
Telecom, Ning, Sonatype

Currently
•Founder anf CTO Async-
IO.org
•Since 2013
•Atmosphere Support,
Atmosphere Pro & Elite
•Atmosphere is still licenced
Apache 2

Async-IO

WebSockets: Server Side
blank slide
for your own
pictures

•Tomcat 7+, Jetty 7+, GlassFish 3+, Resin 2+, JBoss
7.1.2+ native Websocket API
•Non Portable, Unstable API
•Missing Functionality
•What the point of Atmosphere then???????

blank slide
for your own
pictures

Atmosphere
To
The
Rescue!

Atmosphere:
github.com/Atmosphere
•Portable, Stable, EVERYWHERE
•Use Native API or JSR 356
•Javascript API(s) & Java (wAsync)
•950+ mailing list

JAX Awards 2014
Nominated for Most
Innovative Java
Technology

Atmosphere: Well Established!!
http://www.parleys.c
om/play/514892260
364bc17fc56bde7/c
hapter0/about

Atmosphere: Run on top of

atmosphere.js
•100% Javascript Library
•Small, portable, mobile optimized
•Transparent Fallback
•One API to Rule them all: WebSockets/Server Sides
Event/Long-Polling/HTML File/JSONP/Polling/Streaming
etc.

Atmosphere : Clients

Atmosphere: Browsers
6+
3.5+
4+
3+
10+

Atmosphere: Into the Cloud
•Your Atmosphere’s Application transparently work into
the cloud
Proxy/Load
balancer

Atmosphere: Cloud

blank slide
for your own
pictures
Enterprise
Ready?

Atmosphere Pro!
• atmosphere-satellite: replicate your data and code together In-Memory for
faster execution and seamless elastic scalability across your
Atmosphere's Nodes/Servers.
• atmosphere-tower-control: Monitor your Atmosphere's Node/Server state
via any JMX compliant tool like Java Mission Control. Get statistics on
how many websocket or long-polling clients are currently connected,
add/move connected clients from one node to another, for example in
case of a node being restarted, etc.
• atmosphere-postman: Client/Server extension to Atmosphere to support
message delivery guarantee.
http://async-io.org/AtmospherePro.html

Fix broken
browsers/s
ervers for
you! `
blank slide
for your own
pictures

Atmosphere
var socket = atmosphere;
var subSocket;
var request = { url: document.location.toString() + 'chat’, contentType : "application/json”, transport : "websocket" , trackMessageLength :
true };
request.onOpen = function(response) {
content.html($('<p>', { text: 'Atmosphere connected using ' + response.transport }));
};
request.onMessage = function (response) {
var json = atmosphere.util.parseJSON(response.responseBody)
…
};
request.onClose = function(response) {…};
request.onReopen = function(response) {….}
request.onTransportFailure = function(errorMsg, request) {…}
subSocket = socket.subscribe(request);

@ManagedService(path = "/chat”)
public class Chat {
@Ready
public void onReady(AtmosphereResource r) {..}
@Disconnect
public void onDisconnect(AtmosphereResourceEvent e) {..}
@Message( encoders = {JacksonEncoder.class},
decoders = {JacksonDecoder.class})
public Reply onMessage(Message message){
return handleAndReply(message);
}
}
Atmosphere

Problem #1 – Fallback
•Browser
• Old version
• No support (IE 9)
•Proxys
• Disconnect, block
•Load Balancer
• Breaks Session Affinity

Fallback with Atmosphere
public void onReady(AtmosphereResource r) {
switch (r.transport()) {
case WEBSOCKET:
case SSE:
case LONG-POLLING:
case STREAMING:
case JSONP:
case POLLING:
r.write(“Atmosphere is cool”);
}
}

Atmosphere I/O
•WebSocket uses « non blocking I/O »
•Fallback simulates « non blocking I/O>
Browsers behave the same way as packet are delivered
uniformely.

Problem #2 –Protocol
Tomcat 7.x/8.x => RFC
6455 (Version 13) !!<=
Safari 5.0.x
Jetty9.1+ => Hixie 76
<= Safari 5.0.x

Protocol Version
•Atmosphere => Transparent Fallback in case the
protocol is not supported

Problem #3 – Lost Lost Lost
• I/O error, websocket message
will be lost.
• Message must be put inside a
cache
• Message must be discarted if
the connection never come
back.

Atmosphere – Messages Lost
@ManagedService(path = "/chat”)
public class Chat {
@Message
public void onMessage(AtmosphereResource r, String message){
// Transparently cache the message in case of a problem
// Transparently write it back once reconnected
r.write(message);
}
}

Problem #4 – Proxy
• Existing Proxy are cutting the
connection.
• Must recover transparently
from a disconnect.
• Heartbeat saves your day!

Atmosphere – Proxy ? No Problem!

Problem #5 – New Spec!
• Difference between Tomcat,
Undertow and Jetty already!
• Spec is young, missing fondamental
concepts.
• Tomcat 8.0.12 is stable. GlassFish 4
is dead, Jetty 9.1.3 stable,
Undertow 1.1.Final is stable,
WelLogic is broken.

Problem #5 – JSR 356: Tomcat vs
Jetty
@Message
public void onMessage(String m, Session s) {
for (Session s: sessions.getOpenSessions()){
// Tomcat will throw an IllegalStateException
// if more than one thread call sendXXX.
// Jetty won’t!
session.getAsyncRemote().sendText(m);
}
}

Problem #5 – JSR 356: Tomcat vs
Jetty
private final Semaphore semaphore = new Semaphore(1, true);
@Message
public void onMessage(String m, Session s) {
for (Session s: sessions.getOpenSessions()){
try{
semaphore.acquireUninterruptibly();
session.getAsyncRemote().sendText(m, …);
}finally {
semaphore.release();
}
}
}

Problem #5 – Tomcat vs Jetty
• I/O Event aren’t delivered the same
way.
• CloseReason not the same depending
on the server!!!!
// Hack
if (closeCode == 1000 && getContainerName().contains("Tomcat")) {
closeCode = 1005;
}

Firefox is the new Internet Explorer
6!
// Reload a tab/window
// Firefox => 1001
// Chrome => 1000
if (isFirefox && c.getCode() == CloseReason.GOING_AWAY
|| c.getCode() == CloseReason.NO_STATUS_CODE) {
...
}

Firefox is the new Internet Explorer
6!
Reload in Firefox produces phantom
websockets connections!!!!!!!

Problem #6 – Closing Code
• How to detect if a
websocket was closed by a
Proxy, a Load Balancer or
the Browser!!

Hell exists!!

Atmosphere
@Disconnect
public void onClose(AtmosphereResourceEvent e) {
if (e.isClosedByClient()){
} else if (e.isClosedByApplication()) {
} else if (e.isUnexpectlyClosed()) {
}

WebSockets: Client Side
blank slide
for your own
pictures

WebSockets: Javascript API
W•ebWSo3cCk eStpewcsifi=ca tnieown WebSocket(“ws://127.0.0.1:8080”);
ws.onopen = function (message) {
};
ws.onclose = function (message) {
};
ws.onmessage = function (message) {
}

WebSocket: Supported Browsers
10+
10+
6+
5+
10+
?
2+

W3C API
Ohhhhhhhhh
•Pong/Ping: No exposed
•Headers: Can’t add/read
•Query String: No API, append them to the url
•Cookie: Impossible to read them

Atmosphere: First request
•W3C Specification T 127.0.0.1:52212 -> 127.0.0.1:8080 [AP]
GET /chat?X-Atmosphere-tracking-id=0&X-Atmosphere-
Framework=2.2.0-javascript&X-Atmosphere-Transport=websocket&X-Atmosphere-
TrackMessageSize=true&X-Cache-Date=0&Content-
Type=application/json&X-atmo-protocol=true HTTP/1.1.
Upgrade: websocket.
Connection: Upgrade.
Host: 127.0.0.1:8080.
Origin: http://127.0.0.1:8080.
Sec-WebSocket-Key: TCBKrAyFFwW8HUXqLpj2wg==.
Sec-WebSocket-Version: 13.
Sec-WebSocket-Extensions: permessage-deflate;
client_max_window_bits, x-webkit-deflate-frame.

Atmosphere: First request
•W3C Specification
T 127.0.0.1:8080 -> 127.0.0.1:52212 [AP]
HTTP/1.1 101 Switching Protocols.
X-Atmosphere-first-request: true.
X-Atmosphere-tracking-id: bb7aeeb7-9e44-4aa9-848d-14bba6532de9.
Connection: Upgrade.
Sec-WebSocket-Accept: 5mHABDQFkWBtjoinv3lj+6dVwHg=.
Upgrade: WebSocket.

Problem #1 – onclose
• Firefox will execute the
ws.onclose function on F5
(reload)
• Chrome/Safari ….. NOT!

Problem #1: onclose
ws.onclose = function(closeReason) {
switch(closeReason.code) {
case 1000:
….
}
// Firefox will execute this logic on every reload
// closeReason.wasClean unreliable
if (dirtyClose) {
reconnectTo(…);
}
}

Atmosphere: onclose
// Hahahaha go to hell Firefox!!
atmosphere.onClose = function (callback) {
};

Problem #2 – Messages’ length
• Messages can be truncated
when the server write
them
• The Browser received
them in two chunks or I/O
operation

Problem #2: Messages’ length
// Craaaaaaashhhhhhhhhhhhh
ws.onmessage = function (callback) {
window.JSON.parse(callback.data);
};

Problem #2: What’s Up, Doctor!
// atmosphere.js transparently
// handles it
atmosphere.onMessage = function (callback) {
window.JSON.parse(callback.responseBody);
};

Problem #3 – UUID and Cookie
• No Cookie to identify
the client

Problem #3 – UUID and Cookie
• Solutions:
• Normal request => set-cookie
• Next WebSockets
• Useful if you deploy on
Amazon
(1) HTTP
(2) websockets

Atmosphere: Handshake Protocol
T 127.0.0.1:8080 -> 127.0.0.1:52212 [AP]
.651|bb7aeeb7-9e44-4aa9-848d-14bba6532de9|1397426374301|
T 127.0.0.1:8080 -> 127.0.0.1:52212 [AP]
..
T 127.0.0.1:8080 -> 127.0.0.1:52212 [AP]
..

• Proxy can close the websocket or
completely ignore the websocket
handshake, completely fooling the
server…and the browser!
• ws.open never called!!!!

websocket.onopen = function (message) {
alert(“Ha ha ha good luck!!!”);
}
websocket.onmessage = function(message) {
// Never called
alert(“Sleep on it!!!”);
}

atmosphere.onReopen = function (callback) {
// Yeahhhh!!!
};
atmosphere.onTransportFailure = function (callback) {
// Apache Proxy, I hate you!!!
};

Hazelcast

Socket.IO and Socks.js
SockJs et Socket.io
blank slide
for your own
pictures

Socket.IO
• For Node.js
• Streaming, Long-Polling and now Websocket
• Extremely popular, lot of »issues »
602 => https://github.com/LearnBoost/socket.io/issues
• Supported by Atmosphere, both client and server side. Replace
node.js

Socket.IO - Atmosphere
@•ManWag3eCdS Serpveiccief(ipcaatthi o=n "/chat”)
public class Chat {
@Ready
@Disconnect
}
}

Socket.IO - Atmosphere
var socket = io.connect('', {'resource’:document.location.toString() + 'chat'});
socket.on('connect', function () {
content.html($('<p>',
{ text:'Atmosphere connected using this.socket.transport.name}));
});
socket.on('chat message', function() {
var json = jQuery.parseJSON(msg);
…
}
);
socket.on(‘error’, function (e) {…});

Socks.js
•For Node.js
•Emulate WebSocket, with « fallback »
•Socks.js popularity increase, due to Spring 4, Vert.x
and Atmosphere support

Socks.js - Atmosphere
@•ManWag3eCdS Serpveiccief(ipcaatthi o=n "/clavarder”)
public class Chat {
@Ready
@Disconnect
}
}

Socks.js- Atmosphere
var socket = new SockJS('http://' + window.location.host + '/chat', null, {
'protocols_whitelist': ['websocket', 'xhr-streaming',
'iframe-eventsource', 'iframe-htmlfile',
'xhr-polling', 'jsonp-polling'] });
socket.onopen = function() {
content.html($('<p>', { text: 'Atmosphere connected using SockJs client'}));
}
socket.onmessage = function (response) {
var message = response.data;
var json = JSON.parse(message);
}
socket.onclose = function() {
}

Conclusion
•WebSockets in Prod without fallback? You’re Crazy!!
•Atmosphere is production ready, and fixes all the
issues listed here!
•What are you waiting for?

@All images copyright JeanFrancois Arcand
Credits
https://www.linkedin.com/in/jfarcand
http://async-io.org
http://github.com/Atmosphere/atmosphere
http://github.com/jfarcand

Websockets on the JVM: Atmosphere to the rescue!

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Websockets on the JVM: Atmosphere to the rescue! (20)

Websockets on the JVM: Atmosphere to the rescue!