Building Next Generation
Real-Time Web Applications
- Naresh Chintalcheru
Real-Time
● What are Real-Time Web Apps ?
● HTTP Half-Duplex to Full-Duplex WebSocket (WS) Protocol
● HTTP 1.1 keep-alive-...
Asynchronous
● Intro to Asynchronous Applications
● What is Non-Blocking I/O ?
● Problem spanning Threads in JEE App Serve...
Event-Driven
● What are Event-Driven Apps ?
● node.js : Server-side Javascript
● Vert.x : Event-Driven Java framework
Real-Time
What are Real-Time Web Applications ?
What are Real-Time Web Apps ?
The real-time web enables users to receive information as
soon as it is published.
Bi-direct...
Real-Time Web Apps Examples
The Real-Time Web application examples.
● Gmail
● ESPN Sports
● Gotomeetings
● Netflix (Perfec...
Problems with HTTP
HTTP is the fundamental web protocol and problems with
HTTP are ......
● One-way
● request/response
● s...
HTTP 1.1 keep-alive
HTTP 1.1 keep-alive-mechanism or persistent connection
Connection: Keep-Alive
Keep-Alive: timeout=10, ...
Real-Time "Hacks"
With HTTP 1.1 keep-alive connections real-time "hacks" or
"simulations"
● Long Polling
● AJAX (XMLHTTPRe...
AJAX request
How AJAX XMLHTTPRequest is different than regular HTTP
Request
window.open()
● HTTP Request browser will stop...
Problems with "Hacks"
Problem with real-time simulations
● HTTP Web Server timeouts, Proxy Server timeouts
● Too many conn...
HTTP Protocol is Still Not Real-time
HTTP 1.1 keep-alive-mechanism
has persistent connections ......
But not ..........
Fu...
Duplex Communication
What are Full Duplex Communication ?
Duplex Communication
What are Full-Duplex Communication ?
Allows communication in both directions and happens
simultaneous...
Duplex Communication
HTTP is a Half-Duplex Protocol
-Walkie-Talkie ("Over" command)
-One lane road with traffic controller...
Duplex Communication Quiz
1. TCP Protocol is a Full Duplex ?
2. Database Connection Full Duplex ?
3. Middleware MQ/JMS Con...
Duplex Communication Quiz
Difference Keep-alive & Full-Duplex
● A Keep Alive HTTP header since HTTP 1.0, which is used
to indicate a HTTP client wou...
Real-Time Web
Real-Time web applications needs two-way bi-directional and
Full Duplex communication.
So upgrade HTTP Proto...
Upgrade HTTP Protocol
Upgrade HTTP Protocol to Full Duplex Protocol
RFC6455 WebSocket Protocol
W3C standard on Dec 2011
WebSocket Protocol
What is WebSocket ?
WebSocket Protocol
● WebSocket is a Full Duplex Web Protocol
● Two-way messaging over single connection
● It is not a HTTP...
WebSocket Protocol
● HTTP://server.com , WS://server.com
● HTTPS://server.com, WSS://server.com (Secured)
● Extremely Low-...
Real-Time App design
State Farm ADA - JEE Application Deployment tool
● ADA Current way
● ADA with "Hacks" long polling
● ...
Form based Apps
● ADA is not a revenue generating application
● What about Insurance Quote ?
● What about Insurance Claims...
WebSocket Applications
● Current web applications are "Form based" applications
targeting simple or happy path of the Busi...
WebSocket Performance
● Each HTTP Request/Response (header+body) have
minimum of 871 Bytes overhead.
● WebSocket frames ha...
WebSocket Performance
WebSocket Performance
● Web Sockets can provide a 500:1 or depending on the size
of the HTTP headers or even a 1000:1 redu...
WebSocket Fundamentals
How WebSocket Protocol works ?
WebSocket Handshake Request
WebSocket Handshake Request: To establish a WebSocket
connection, the client sends a WebSocket...
WebSocket Handshake Response
WebSocket Server Response: Server WebSocket handshake
response
HTTP/1.1 101 Switching Protoco...
WebSocket Handshake
● The handshake resembles HTTP so that servers can
handle HTTP connections as well as WebSocket
connec...
WebSocket Extensions
● With extensions to the protocol, this can also be used for
multiplexing several streams simultaneou...
WebSocket Security
Same SSL/TLS based Security
WebSocket Applications
● Trading [Stocks, Biding Apps ebay.com]
● Chat [Gmail]
● Games
● Collaboration
● Dashboard Reports...
WebSocket Applications
● Current web applications are "Form based" applications
targeting simple or happy path of the Busi...
WebSocket Java API
● JSR-356/JEE 7 Java WebSocket Annotation based API
javax.websocket.*
● Server Endpoint
@ServerEndpoint...
WebSocket Java API
● Connection Open
@OnOpen
public void myOnOpen (Session session) { }
● On Message
@OnMessage
public Str...
WebSocket Java API
● Zero or more string parameters annotated with
@PathParam, referring to path parameters on the endpoin...
WebSocket Session vs HTTPSession
● WebSocket Session is closed after connection closes.
HTTPSession is destroyed based on ...
WebSocket Challenges
● RESTFul web services depend on the HTTP Methods such
as GET/POST but WebSocket does not have such
m...
Spring Framework
● Spring Framework 4.0 supports WebSocket protocol.
● If browser does not support WebSocket the Spring
fr...
Future of Web Protocol
● Google SPDY/HTTP 2.0
● WebRTC for peer-to-peer communication
● Installable Web Apps (App Store fo...
Google SPDY & WebRTC
● Google proposed Web Network protocol SPDY. Might be
part of HTTP 2.0
● Primary goal is to reduce We...
Google SPDY & WebRTC
Installable Web Application
● With low latency and improved browser functionality the
new generation of Javascript, HTML &...
Question and Answers
Questions ?????
Email Feedback Appreciated
Upcoming SlideShare
Loading in...5
×

Building Next Generation Real-Time Web Applications using Websockets

8,738

Published on

Building Next Generation Real-Time Web Applications using Websockets

Published in: Technology, Education
4 Comments
28 Likes
Statistics
Notes
No Downloads
Views
Total Views
8,738
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
2
Comments
4
Likes
28
Embeds 0
No embeds

No notes for slide

Building Next Generation Real-Time Web Applications using Websockets

  1. 1. Building Next Generation Real-Time Web Applications - Naresh Chintalcheru
  2. 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. 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. 4. Event-Driven ● What are Event-Driven Apps ? ● node.js : Server-side Javascript ● Vert.x : Event-Driven Java framework
  5. 5. Real-Time What are Real-Time Web Applications ?
  6. 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. 7. Real-Time Web Apps Examples The Real-Time Web application examples. ● Gmail ● ESPN Sports ● Gotomeetings ● Netflix (Perfect disaster recovery app )
  8. 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. 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. 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. 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. 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. 13. HTTP Protocol is Still Not Real-time HTTP 1.1 keep-alive-mechanism has persistent connections ...... But not .......... Full-Duplex Communication ...
  14. 14. Duplex Communication What are Full Duplex Communication ?
  15. 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. 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. 17. Duplex Communication Quiz 1. TCP Protocol is a Full Duplex ? 2. Database Connection Full Duplex ? 3. Middleware MQ/JMS Connections ?
  18. 18. Duplex Communication Quiz
  19. 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. 20. Real-Time Web Real-Time web applications needs two-way bi-directional and Full Duplex communication. So upgrade HTTP Protocol ?
  21. 21. Upgrade HTTP Protocol Upgrade HTTP Protocol to Full Duplex Protocol RFC6455 WebSocket Protocol W3C standard on Dec 2011
  22. 22. WebSocket Protocol What is WebSocket ?
  23. 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. 24. WebSocket Protocol ● HTTP://server.com , WS://server.com ● HTTPS://server.com, WSS://server.com (Secured) ● Extremely Low-overhead
  25. 25. Real-Time App design State Farm ADA - JEE Application Deployment tool ● ADA Current way ● ADA with "Hacks" long polling ● ADA with WebSocket
  26. 26. Form based Apps ● ADA is not a revenue generating application ● What about Insurance Quote ? ● What about Insurance Claims ?
  27. 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. 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. 29. WebSocket Performance
  30. 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. 31. WebSocket Fundamentals How WebSocket Protocol works ?
  32. 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. 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. 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. 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. 36. WebSocket Security Same SSL/TLS based Security
  37. 37. WebSocket Applications ● Trading [Stocks, Biding Apps ebay.com] ● Chat [Gmail] ● Games ● Collaboration ● Dashboard Reports ● Visualization
  38. 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. 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. 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. 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. 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. 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. 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. 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. 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. 47. Google SPDY & WebRTC
  48. 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. 49. Question and Answers Questions ????? Email Feedback Appreciated

×