Building Next Generation Real-Time Web Applications using Websockets

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