• Save
Building Next Generation Real-Time Web Applications using Websockets
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


Building Next Generation Real-Time Web Applications using Websockets

Uploaded on

Building Next Generation Real-Time Web Applications using Websockets

Building Next Generation Real-Time Web Applications using Websockets

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • How is Netflix the perfect disaster recovery app? You mean by how it uses Amazon and other clouds?
    Are you sure you want to
    Your message goes here
  • great sharing
    Are you sure you want to
    Your message goes here
  • very nice tutorial.
    Are you sure you want to
    Your message goes here
  • Thanks Naresh. Very good tutorial. easy to understand.
    Are you sure you want to
    Your message goes here
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 51

http://www.linkedin.com 45
https://twitter.com 6

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Building Next Generation Real-Time Web Applications - Naresh Chintalcheru
  • 2. Real-Time ● What are Real-Time Web Apps ? ● HTTP Half-Duplex to Full-Duplex WebSocket (WS) Protocol ● HTTP 1.1 keep-alive-mechanism ● “Hacks” such as AJAX, Long Polling & Comet used to simulate real-time ● Introduction to WebSockets ● How WebSocket Protocol works ? ● HTTP Idempotent Methods ● WebSockets & RESTful Web Services ● HTTP Session Vs WebSocket Session ● Server-Push using WebSockets ● WebSocket Performance ● WebSocket Security ● JSR-356 Java WebSocket APIs ● Spring Framework 4.0 support for WebSocket & SockJS
  • 3. Asynchronous ● Intro to Asynchronous Applications ● What is Non-Blocking I/O ? ● Problem spanning Threads in JEE App Servers ● Async support in Servlets 3.0 ● Asynchronous Session EJB 3.1 ● Asynchronous Beans in Spring Framework
  • 4. Event-Driven ● What are Event-Driven Apps ? ● node.js : Server-side Javascript ● Vert.x : Event-Driven Java framework
  • 5. Real-Time What are Real-Time Web Applications ?
  • 6. What are Real-Time Web Apps ? The real-time web enables users to receive information as soon as it is published. Bi-directional two-way communication between users & system Both Pull & Push based systems.
  • 7. Real-Time Web Apps Examples The Real-Time Web application examples. ● Gmail ● ESPN Sports ● Gotomeetings ● Netflix (Perfect disaster recovery app )
  • 8. Problems with HTTP HTTP is the fundamental web protocol and problems with HTTP are ...... ● One-way ● request/response ● stateless ● Half-Duplex protocol Real-time example
  • 9. HTTP 1.1 keep-alive HTTP 1.1 keep-alive-mechanism or persistent connection Connection: Keep-Alive Keep-Alive: timeout=10, max=5 ● A connection that lasts beyond the current request/response transaction. ● Client perform multiple requests without the overhead of connection tear-down and set-up between each request. ● Fundamental web communication change.
  • 10. Real-Time "Hacks" With HTTP 1.1 keep-alive connections real-time "hacks" or "simulations" ● Long Polling ● AJAX (XMLHTTPRequest & InnerHTML) ● HTTP Streaming ● Adobe Flash "RTMP Protocol" ● Apache COMET (Gmails GTalk)
  • 11. AJAX request How AJAX XMLHTTPRequest is different than regular HTTP Request window.open() ● HTTP Request browser will stop or hang for the server response. xmlhttp.open() ● With AJAX request is Async, the JavaScript does not have to wait for the server response, but can instead execute other scripts and respond to user events while waiting for server response. Deal with the response when the
  • 12. Problems with "Hacks" Problem with real-time simulations ● HTTP Web Server timeouts, Proxy Server timeouts ● Too many connections ● Too much overhead ● Work around but not a native solution
  • 13. HTTP Protocol is Still Not Real-time HTTP 1.1 keep-alive-mechanism has persistent connections ...... But not .......... Full-Duplex Communication ...
  • 14. Duplex Communication What are Full Duplex Communication ?
  • 15. Duplex Communication What are Full-Duplex Communication ? Allows communication in both directions and happens simultaneously. -Two lane road -Telephone Lines -LAN -Mobile Networks -Cable Networks -Echo Cancellation issues
  • 16. Duplex Communication HTTP is a Half-Duplex Protocol -Walkie-Talkie ("Over" command) -One lane road with traffic controller at each end (Traffic flows in both but only directions at a time)
  • 17. Duplex Communication Quiz 1. TCP Protocol is a Full Duplex ? 2. Database Connection Full Duplex ? 3. Middleware MQ/JMS Connections ?
  • 18. Duplex Communication Quiz
  • 19. Difference Keep-alive & Full-Duplex ● A Keep Alive HTTP header since HTTP 1.0, which is used to indicate a HTTP client would like to maintain a persistent connection with HTTP server. ● The main objects is to eliminate the needs for opening TCP connection for each HTTP request. However, while there is a persistent connection open, the protocol for communication between client and server is still following the basic HTTP request/response pattern ● Full-duplex connection Server side can Push Data to client and client should be expected to process data from server side
  • 20. Real-Time Web Real-Time web applications needs two-way bi-directional and Full Duplex communication. So upgrade HTTP Protocol ?
  • 21. Upgrade HTTP Protocol Upgrade HTTP Protocol to Full Duplex Protocol RFC6455 WebSocket Protocol W3C standard on Dec 2011
  • 22. WebSocket Protocol What is WebSocket ?
  • 23. WebSocket Protocol ● WebSocket is a Full Duplex Web Protocol ● Two-way messaging over single connection ● It is not a HTTP protocol ● Depends on HTTP Protocol for the initial bootstrap and afterwards uses TCP Protocol ● Websocket differs from TCP in that it enables a stream of messages instead of a stream of bytes.
  • 24. WebSocket Protocol ● HTTP://server.com , WS://server.com ● HTTPS://server.com, WSS://server.com (Secured) ● Extremely Low-overhead
  • 25. Real-Time App design State Farm ADA - JEE Application Deployment tool ● ADA Current way ● ADA with "Hacks" long polling ● ADA with WebSocket
  • 26. Form based Apps ● ADA is not a revenue generating application ● What about Insurance Quote ? ● What about Insurance Claims ?
  • 27. WebSocket Applications ● Current web applications are "Form based" applications targeting simple or happy path of the Business Process. ● Extending the scope of "Functional Requirements" to capture the complete user experience (Customer Collaboration) ● In the future many applications will be using WebSockets
  • 28. WebSocket Performance ● Each HTTP Request/Response (header+body) have minimum of 871 Bytes overhead. ● WebSocket frames has 2 Bytes of overhead ● 1000 HTTP Clients polling a second = 6.6Mbps Network throughput ● 1000 WebSocket Clients receiving messages (1 second) = 0.015Mbps Network throughput www.websocket.org
  • 29. WebSocket Performance
  • 30. WebSocket Performance ● Web Sockets can provide a 500:1 or depending on the size of the HTTP headers or even a 1000:1 reduction in unnecessary HTTP header traffic ● Minimum of 3:1 reduction in latency ● Significantly improves Network throughput and Request latency www.websocket.org
  • 31. WebSocket Fundamentals How WebSocket Protocol works ?
  • 32. WebSocket Handshake Request WebSocket Handshake Request: To establish a WebSocket connection, the client sends a WebSocket handshake request ws://webserver.com/home GET /mychat HTTP/1.1 Host: server.example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw== Sec-WebSocket-Protocol: chat Sec-WebSocket-Version: 13 Origin: http://example.com
  • 33. WebSocket Handshake Response WebSocket Server Response: Server WebSocket handshake response HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk= Sec-WebSocket-Protocol: chat
  • 34. WebSocket Handshake ● The handshake resembles HTTP so that servers can handle HTTP connections as well as WebSocket connections on the same port. ● Once the connection is established, the client and server can send WebSocket data or text frames back and forth in full-duplex mode. ● The data is minimally framed, with a small header followed by payload. WebSocket transmissions are described as "messages"
  • 35. WebSocket Extensions ● With extensions to the protocol, this can also be used for multiplexing several streams simultaneously (for instance to avoid monopolizing use of a socket for a single large payload).
  • 36. WebSocket Security Same SSL/TLS based Security
  • 37. WebSocket Applications ● Trading [Stocks, Biding Apps ebay.com] ● Chat [Gmail] ● Games ● Collaboration ● Dashboard Reports ● Visualization
  • 38. WebSocket Applications ● Current web applications are "Form based" applications targeting simple or happy path of the Business Process. ● Extending the scope of "Functional Requirements" to capture the complete user experience (Customer Collaboration) ● In the future many applications will be using WebSockets
  • 39. WebSocket Java API ● JSR-356/JEE 7 Java WebSocket Annotation based API javax.websocket.* ● Server Endpoint @ServerEndpoint("/hello") public class MyEndpoint { } ● Client Endpoint @ClientEndpoint public class MyClientEndpoint {}
  • 40. WebSocket Java API ● Connection Open @OnOpen public void myOnOpen (Session session) { } ● On Message @OnMessage public String myOnMessage (String txt) { } ● Connection Close @OnClose public void myOnClose (CloseReason reason) { }
  • 41. WebSocket Java API ● Zero or more string parameters annotated with @PathParam, referring to path parameters on the endpoint path ● Java WebSocket API provides encoders/decoders to use custom Java object messages in the OnMessage() ● A javax.websocket.CloseReason parameter describing the reason for closing the WebSocket, for example, normal closure, protocol error, overloaded service, and so on
  • 42. WebSocket Session vs HTTPSession ● WebSocket Session is closed after connection closes. HTTPSession is destroyed based on server timeout setting. ● The javax.websocket.Session parameter. Note that this parameter cannot be used once the WebSocket is really closed, which happens after the @OnClose annotated method returns.
  • 43. WebSocket Challenges ● RESTFul web services depend on the HTTP Methods such as GET/POST but WebSocket does not have such methods. ● HTTP Proxy Servers are used to monitor or close connections, content caching, filtering and designed for HTTP-based document transfer. Not for long-lived connections ● Wireless connections, Server connections and Client connections many fade. Handling lost connections. ● Frequent Server Sockets/Threads open & close. Max 64,000 Sockets per machine.
  • 44. Spring Framework ● Spring Framework 4.0 supports WebSocket protocol. ● If browser does not support WebSocket the Spring framework uses SockJS library to emulate the WebSockets in the browsers.
  • 45. Future of Web Protocol ● Google SPDY/HTTP 2.0 ● WebRTC for peer-to-peer communication ● Installable Web Apps (App Store for Web Apps ?)
  • 46. Google SPDY & WebRTC ● Google proposed Web Network protocol SPDY. Might be part of HTTP 2.0 ● Primary goal is to reduce Web page load latency. Achieved through compression, multiplexing, and prioritization ● WebRTC is W3Cs peer-to-peer communication Protocol.
  • 47. Google SPDY & WebRTC
  • 48. Installable Web Application ● With low latency and improved browser functionality the new generation of Javascript, HTML & CSS based "Installable Web Application" similar to App Store are emerging. ● Google Chrome Web Store https://chrome.google.com/webstore/category/apps ● Firefox Marketplace https://marketplace.firefox.com/developers/
  • 49. Question and Answers Questions ????? Email Feedback Appreciated