Asynchronous Web Programming with HTML5 WebSockets and Java


Published on

(Talk originally given @ KCDC - ).
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.

Published in: Technology
1 Comment
  • Nice Slides. Can you please make it downloadable
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Asynchronous Web Programming with HTML5 WebSockets and Java

  1. 1. Asynchronous WebProgramming with HTML5WebSockets and JavaJames FalknerCommunity Manager, Liferay,
  2. 2. The Asynchronous World
  3. 3. The Asynchronous Word• Literally: Without Time• Events that occur outside of the main programexecution flow• Asynchronous != parallel/multi-threading
  4. 4. Execution Models
  5. 5. Execution ModelsSingle-Threaded Synchronous Model• Not much to say here
  6. 6. Execution ModelsThreaded Model• CPU controls interleaving• Developer mustcoordinatethreads/processes• “preemptive multitasking”
  7. 7. Execution ModelsAsynchronous Model• Developer controls interleaving• “cooperative multitasking”• Wave goodbye to race conditions,synchronized, and deadlocks!• Windows 3.x, MacOS 9.x, SpaceShuttle
  8. 8. Execution ModelsThe green code (your code!)runs uninterrupted until it(you!) reaches a “goodstopping point”(I/O)
  9. 9. What does this buy me?NOTHING! Except when• Task Pool is large• Task I/O >> Task CPU• Tasks mostly independent… Like web servers
  10. 10. Programming Models
  11. 11. Threaded vs. Event-Drivenwhile (true) {client = accept(80);/* blocked! */new Thread(new Handler(client)).start();} Server(80, {onConnect: {handler.handle(client);}});/* no blocking here, move along */
  12. 12. Threaded vs. Event-Driven• Both can solve the exact same set of problems• In fact, they are semantically equivalent• Threaded costs in complexity and contextswitching• Event-Driven costs in complexity and nocontext switching
  13. 13. Forces• When to consider event-driven, asynchronousprogramming models?
  14. 14. Async/Eventing Support• Hardware/OS: Interrupts, select(), etc• Languages: callbacks, closures, futures,promises, Reactor/IOU pattern• All accomplish the same thing: do this thingfor me, and when you’re done, do this otherdependent thing• Frameworks• Makes async/event programming possible oreasier• JavaEE, Play, Vert.x, Cramp, node.js,Twisted, …
  15. 15. Reducing Complexity• Use established patterns• Use established libraries and tooling
  16. 16. Typical Evented Web Apps
  17. 17. 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 CDIJavaEE 7: WebSockets• Future: Lambda Expressions (closures)myButton.addActionListener(ae -> {System.out.println(ae.getSource());});
  18. 18. 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
  19. 19. 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
  20. 20. JavaEE Example: EventDefinitionpublic class HelloEvent {private String msg;public HelloEvent(String msg) {msg = msg;}public String getMessage() {return message;}}
  21. 21. JavaEE Example: EventSubscriber@Statelesspublic class HelloListener {@Asynchronouspublic void listen(@Observes HelloEvent helloEvent){System.out.println("HelloEvent: " + helloEvent);}}
  22. 22. JavaEE Example: Event Publish@Named("messenger”)@Statelesspublic class HelloMessenger {@Inject Event<HelloEvent> events;public void hello() { HelloEvent("from bean " +System.currentTimeMillis()));}}<h:commandButtonvalue="Fire!"action="#{messenger.hello}"/>
  23. 23. JavaEE Example: Async Servlet
  24. 24. JavaEE Example: Async Servlet
  25. 25. Event-Driven Framework: Vert.x
  26. 26. Event-Driven JavaScript• Not just for the browseranymore• It’s cool to like it! (again)• Language features greatlyaid event-drivenprogramming• Many, many frameworks toaid in better design
  27. 27. 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
  28. 28. WebSockets• Bi-directional, full-duplex TCP connection• Asynchronous APIs• Related Standards• Protocol: IETF RFC 6455• Browser API: W3C WebSockets JavaScriptAPI• Client/Server API: JSR-356 (Java)• 50+ Implementations, 15+ Languages• Java, C#, PHP, Python, C/C++, Node, …
  29. 29. Wire Protocol
  30. 30. Wire Protocol
  31. 31. 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
  32. 32. WebSockets Options• Endpoint identification• Version negotiation• Protocol Extensions negotiation• Application Sub-protocol negotiation• Security options
  33. 33. Handshake
  34. 34. Java Server API (JSR-356)• Endpoints represent client/server connection• Sessions model set of interactions overEndpoint• sync/async messages• Injection• Custom encoding/decoding• Configuration options mirror wire protocol• Binary/Text• PathParam• Extensions
  35. 35. Java Server API@ServerEndpoint("/websocket")public class MyEndpoint {private Session session;@OnOpenpublic void open(Session session) {this.session = session;}@OnMessagepublic String echoText(String msg) {return msg;}@OnClose…@OnError…public void sendSomething() {session.getAsyncRemote().sendText(“Boo!”);}
  36. 36. Client API (JavaScript)var ws = new WebSocket(ws://host:port/endpoint);ws.onmessage = function (event) {console.log(Received text from the server: +;// 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.};
  37. 37. Client API (Other)• Non-Browser APIs for C/C++, Java, .NET, Perl,PHP, Python, C#, and probably othersWebSocket webSocketClient =new WebSocket("ws://", "basic");webSocketClient.OnClose += new EventHandler(webSocketClient_OnClose);webSocketClient.OnMessage += newEventHandler<MessageEventArgs>(webSocketClient_OnMessage);webSocketClient.Connect());webSocketClient.Send(“HELLO THERE SERVER!”);webSocketClient.Close();
  38. 38. Browser Support• Your users don’t care about WebSockets• Fallback support: jQuery, Vaadin, Atmosphere,Socket.IO, Play, etc
  39. 39. DemoWebSocketServerEndpointJVMHTTPWS
  40. 40. Demo Part DeuxWebSocketServerEndpointJVMNodeHTTPHTTPWS
  41. 41. WebSocket Gotchas• Using WebSockets in a thread-based system(e.g. the JVM)• Sending or receiving data before connection isestablished, re-establishing connections• UTF-8 Encoding• Extensions, security, masking make debuggingmore challenging
  42. 42. WebSocket Issues• Ephemeral Port Exhaustion• Evolving interfaces• Misbehaving Proxies
  43. 43. Acknowledgements (Execution Models) (problems) (more problems) (cdi examples) (asyncservlets) (vert.x example) (handshake image) (browser compat graph)
  44. 44. Asynchronous WebProgramming with HTML5WebSockets and JavaJames FalknerCommunity Manager, Liferay,