(Talk originally given @ KCDC - http://kcdc.info ). Over the last decade, advances in web computing have removed many of the barriers to entry for developers. New languages, frameworks, and development methodologies have kickstarted new ideas and new ways to develop web applications to make modern life easier and more efficient. WebSockets (introduced as part of HTML5) is one such technology that enables a new class of scalable, super-responsive, collaborative, and real-time web applications with a wide range of uses. In this talk, we will first cover the basics of asynchronous web programming using WebSockets, including predecessors such as polling and long-polling, applications of WebSockets, its limitations and potential bottlenecks, and potential future improvements. Next, we will demo and dissect a real-world use case for realtime social data analytics, using the Apache Tomcat implementation of WebSockets and the Java-based Liferay Portal Server. This will include a discussion about development of WebSocket endpoints, its lifecycle within the application container and browser, debugging WebSockets, and scalability topics.

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

2. The Asynchronous World

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

4. Execution Models

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

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

7. 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

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

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

11. Programming Models

12. 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 */

13. 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

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

15. 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, …

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

17. Typical Evented Web Apps

18. 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());
});

19. 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

20. 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

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

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

23. 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}"/>

24. JavaEE Example: Async Servlet

25. JavaEE Example: Async Servlet

26. Event-Driven Framework: Vert.x

27. 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

28. 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

30. 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, …

31. Wire Protocol

32. Wire Protocol

33. 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

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

35. Handshake

36. 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

37. 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!”);
}

38. 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.
};

39. 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();

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

42. Demo
WebSocket
ServerEndpoint
JVM
HTTP
WS

43. Demo Part Deux
WebSocket
ServerEndpoint
JVM
Node
HTTP
HTTP
WS

44. 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

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

46. 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)

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