Asynchronous Web Programming with HTML5 WebSockets and Java

Asynchronous Web
Programming with HTML5
WebSockets and Java
James Falkner
Community Manager, Liferay, Inc.
james.falkner@liferay.com
@schtool

The Asynchronous Word
• Literally: Without Time
• Events that occur outside of the main program
execution flow
• Asynchronous != parallel/multi-threading

Execution Models
Single-Threaded Synchronous Model
• Not much to say here

Execution Models
Threaded Model
• CPU controls interleaving
• Developer must
coordinate
threads/processes
• “preemptive multitasking”

Execution Models
Asynchronous Model
• Developer controls interleaving
• “cooperative multitasking”
• Wave goodbye to race conditions,
synchronized, and deadlocks!
• Windows 3.x, MacOS 9.x, Space
Shuttle

Execution Models
The green code (your code!)
runs uninterrupted until it
(you!) reaches a “good
stopping point”
(I/O)

What does this buy me?
NOTHING! Except when
• Task Pool is large
• Task I/O >> Task CPU
• Tasks mostly independent
… Like web servers

Asynchronous Web Programming with HTML5 WebSockets and Java

Threaded vs. Event-Driven
while (true) {
client = accept(80);
/* blocked! */
new Thread(new Handler(client)).start();
}
vs.
new Server(80, {
onConnect: {
handler.handle(client);
}
});
/* no blocking here, move along */

Threaded vs. Event-Driven
• Both can solve the exact same set of problems
• In fact, they are semantically equivalent
• Threaded costs in complexity and context
switching
• Event-Driven costs in complexity and no
context switching

Forces
• When to consider event-driven, asynchronous
programming models?

Async/Eventing Support
• Hardware/OS: Interrupts, select(), etc
• Languages: callbacks, closures, futures,
promises, Reactor/IOU pattern
• All accomplish the same thing: do this thing
for me, and when you’re done, do this other
dependent thing
• Frameworks
• Makes async/event programming possible or
easier
• JavaEE, Play, Vert.x, Cramp, node.js,
Twisted, …

Reducing Complexity
• Use established patterns
• Use established libraries and tooling
https://github.com/caolan/async

Event-Driven Java/JavaEE
• Java 1.0: Threads and AWT
• Java 1.4: NIO (Non-blocking I/O, nee New I/O)
• J2EE 1.2: JMS
• JavaEE 6: @Asynchronous and CDI
JavaEE 7: WebSockets
• Future: Lambda Expressions (closures)
myButton.addActionListener(ae -> {
System.out.println(ae.getSource());
});

Early Event-Driven Java
• Closure-like listeners (e.g. addActionListener(), handlers)
• Captured “free” variables must be final
• Hogging CPU in listener is bad
• References to this and OuterClass.this

Event-Driven JavaEE
• Servlet 3.0
• Async servlets
• JAX-RS (Jersey)
• Client Async API (via Futures/callbacks)
• Server Async HTTP Requests
• JMS
• Message Redelivery, QoS, scalability, …
• CDI/EJB
• Via @Inject, @Asynchronous and @Observes

JavaEE Example: Event
Definition
public class HelloEvent {
private String msg;
public HelloEvent(String msg) {
msg = msg;
}
public String getMessage() {
return message;
}
}

JavaEE Example: Event
Subscriber
@Stateless
public class HelloListener {
@Asynchronous
public void listen(@Observes HelloEvent helloEvent){
System.out.println("HelloEvent: " + helloEvent);
}
}

JavaEE Example: Event Publish
@Named("messenger”)
@Stateless
public class HelloMessenger {
@Inject Event<HelloEvent> events;
public void hello() {
events.fire(new HelloEvent("from bean " +
System.currentTimeMillis()));
}
}
<h:commandButton
value="Fire!"
action="#{messenger.hello}"/>

Event-Driven Framework: Vert.x

Event-Driven JavaScript
• Not just for the browser
anymore
• It’s cool to like it! (again)
• Language features greatly
aid event-driven
programming
• Many, many frameworks to
aid in better design

The Asynchronous Web
• Goal: Responsive, Interactive sites
• Technique: Push or Pull
• First: Pull
• Request/Response
• AJAX Pull/Poll
• Now: Push
• Long Polling
• Proprietary (e.g. Flash)
• Server-Sent Events (nee HTTP Streaming)
• WebSockets

WebSockets
• Bi-directional, full-duplex TCP connection
• Asynchronous APIs
• Related Standards
• Protocol: IETF RFC 6455
• Browser API: W3C WebSockets JavaScript
API
• Client/Server API: JSR-356 (Java)
• 50+ Implementations, 15+ Languages
• Java, C#, PHP, Python, C/C++, Node, …

Wire Protocol
• FIN
• Indicates the last frame of a message
• RSV[1-3]
• 0, or extension-specific
• OPCODE
• Frame identifier (continuation, text, close, etc)
• MASK
• Whether the frame is masked
• PAYLOAD LEN
• Length of data
• PAYLOAD DATA
• Extension Data + Application Data

WebSockets Options
• Endpoint identification
• Version negotiation
• Protocol Extensions negotiation
• Application Sub-protocol negotiation
• Security options

Java Server API (JSR-356)
• Endpoints represent client/server connection
• Sessions model set of interactions over
Endpoint
• sync/async messages
• Injection
• Custom encoding/decoding
• Configuration options mirror wire protocol
• Binary/Text
• PathParam
• Extensions

Java Server API
@ServerEndpoint("/websocket")
public class MyEndpoint {
private Session session;
@OnOpen
public void open(Session session) {
this.session = session;
}
@OnMessage
public String echoText(String msg) {
return msg;
}
@OnClose
…
@OnError
…
public void sendSomething() {
session.getAsyncRemote()
.sendText(“Boo!”);
}

Client API (JavaScript)
var ws = new WebSocket('ws://host:port/endpoint');
ws.onmessage = function (event) {
console.log('Received text from the server: ' + event.data);
// do something with it
};
ws.onerror = function(event) {
console. log("Uh oh");
};
ws.onopen = function(event) {
// Here we know connection is established,
// so enable the UI to start sending!
};
ws.onclose = function(event) {
// Here the connection is closing (e.g. user is leaving page),
// so stop sending stuff.
};

Client API (Other)
• Non-Browser APIs for C/C++, Java, .NET, Perl,
PHP, Python, C#, and probably others
WebSocket webSocketClient =
new WebSocket("ws://127.0.0.1:911/websocket", "basic");
webSocketClient.OnClose += new EventHandler(webSocketClient_OnClose);
webSocketClient.OnMessage += new
EventHandler<MessageEventArgs>(webSocketClient_OnMessage);
webSocketClient.Connect());
webSocketClient.Send(“HELLO THERE SERVER!”);
webSocketClient.Close();

Browser Support
• Your users don’t care about WebSockets
• Fallback support: jQuery, Vaadin, Atmosphere,
Socket.IO, Play, etc

Demo
WebSocket
ServerEndpoint
JVM
HTTP
WS

Demo Part Deux
WebSocket
ServerEndpoint
JVM
Node
HTTP
HTTP
WS

WebSocket Gotchas
• Using WebSockets in a thread-based system
(e.g. the JVM)
• Sending or receiving data before connection is
established, re-establishing connections
• UTF-8 Encoding
• Extensions, security, masking make debugging
more challenging

WebSocket Issues
• Ephemeral Port Exhaustion
• Evolving interfaces
• Misbehaving Proxies

Acknowledgements
http://cs.brown.edu/courses/cs168/f12/handouts/async.pdf (Execution Models)
http://www.infosecisland.com/blogview/12681-The-WebSocket-Protocol-Past-Travails-To-Be-Avoided.html (problems)
http://lucumr.pocoo.org/2012/9/24/websockets-101/ (more problems)
http://wmarkito.wordpress.com/2012/07/20/cdi-events-synchronous-x-asynchronous/ (cdi examples)
http://blog.arungupta.me/2010/05/totd-139-asynchronous-request-processing-using-servlets-3-0-and-java-ee-6/ (async
servlets)
http://vertx.io (vert.x example)
https://cwiki.apache.org/TUSCANYWIKI/develop-websocket-binding-for-apache-tuscany.html (handshake image)
http://caniuse.com/websockets (browser compat graph)

Asynchronous Web Programming with HTML5 WebSockets and Java

More Related Content

What's hot (12)

Viewers also liked (20)

Similar to Asynchronous Web Programming with HTML5 WebSockets and Java (20)

Recently uploaded (20)

Asynchronous Web Programming with HTML5 WebSockets and Java