1. HTML 5
WebSockets
Volodymyr Lavrynovych

2. HTTP Hacks
 Polling
 Long Polling
 Streaming

3. HTTP request-response (Polling)
Client Server
Connect-Poll
No data in response
Connect-Poll
No data in response
Connect-Poll
Data

4. Server-Sent Events (Long Polling)
Client Server
Connect-Poll
Data
Poll
Data

5. Streaming
Client Server
Connect
Push
Close Connection
Push
Push
Push

6. WebSocketBidirectional communication technology for web apps

7. WebSocket
 Standard W3C protocol (RFC6455)
 Web Browsers include window.WebSocket
object. No plugins required
 Java EE 7 includes WebSocket API (JSR-356)

8. W3C: WebSocket Interface

9. Security
The wss encryption is done the same way as in https
HTTP://... HTTPS://...
WS://… WSS://…

10. How it works?
1. Establish a socket connection via HTTP for
the initial handshake
2. Switch the protocol from HTTP to a socket-
based protocol
3. Send messages in both directions
simultaneously

11. The WebSocket handshake
Browser request Server response
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
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept:
HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat

12. Polling – overhead calculation
A:
1,000 clients polling every second: Network throughput is (959 x 1,000) =
959,000 bytes = 7,672,000 bits per second (7,67 megabits per second)
B:
10,000 clients polling every second: Network throughput is (959 x 10,000) =
9,590,000 bytes = 76,720,000 bits per second (76,72 Mbps)
C:
10,000 clients polling every second: Network throughput is (959 x 100,000) =
95,900,000 bytes = 767,200,000 bits per second (767,2 Mbps)

13. WebSocket – overhead calculation
A:
1,000 clients receive 1 message per second: Network throughput is (2 x 1,000) =
2,000 bytes = 16,000 bits per second (0.016 megabits per second)
B:
10,000 clients receive 1 message per second: Network throughput is (2 x
10,000) = 20,000 bytes = 160,000 bits per second (0.16 Mbps)
C:
100,000 clients receive 1 message per second: Network throughput is (2 x
100,000) = 200,000 bytes = 1,600,000 bits per second (1,6 Mbps)

14. Comparing overheads
megabits per second
Polling, C,
767.2
Polling, B,
76.72
Polling, A, 7.67
WebSocket, C,
1.6
WebSocket, B,
0.16
WebSocket, A,
0.016
WebSocket Polling

15. window.WebSocket object

16. JS: WebSocket events
Event Event Handler Description
open ws.onopen This event occurs when socket
connection is established.
message ws.onmessage This event occurs when client
receives data from server.
error ws.onerror This event occurs when there is
any error in communication.
close ws.onclose This event occurs when
connection is closed.

17. JS: WebSocket methods
Method Description
ws.send() The send(data) method transmits data
using the connection.
ws.close() The close() method would be used to
terminate any existing connection.

18. JS: WebSocket object creation

19. & WebSocket

20. How to?
 Create an endpoint class.
 Implement the lifecycle methods of the
endpoint.
 Add your business logic to the endpoint.
 Deploy the endpoint inside a web application.

21. Programmatic Endpoints
To deploy this programmatic endpoint, use the following code in your Java EE application:

22. Annotated Endpoints
Annotation Event Example
OnOpen Connection opened. @OnOpen public void open(Session session, EndpointConfig conf) { }
OnMessage Message received. @OnMessage public void message (Session session, String msg) { }
OnError Connection error. @OnError public void error(Session session, Throwable error) { }
OnClose Connection closed. @OnClose public void close(Session session, CloseReason reason) { }

23. Simple Chat
Example

24. index.html

25. chat.js

26. ChatEndpoint.java (part 1)

27. ChatEndpoint.java (part 2)

28. Configurator.java

29. UI

30. WebSocket Frame Inspection
(with Google Chrome Developer Tools)
Demo

31. My notes
 WebSockets needed 20 sec to identify disconnection
on client-side
 No possibility to identify disconnection on server-side
 To get HttpSession or other data from outside you
should use your implementation of
ServerEndpointConfig.Configurator class.
 Each connection to WebSocket server creates new
instance of javax.websocket.Session class

32. Compatibility
IE Firefox Chrome Safari Opera
iOS
Safari
Opera
Mini
Android
Browser
Blackberry
Browser
IE
Mobile
Current 11.0 25.0 30.0 7.0 17.0 7.0 5.0-7.0 4.2-4.3 10.0 10.0
Near
future 31.0 18.0
Source: http://caniuse.com/#feat=websockets

33. Flash-based workaround

34. Links
Java API for WebSocket
http://docs.oracle.com/javaee/7/tutorial/doc/websocket.htm
HTML5 - WebSockets Tutorial
http://www.tutorialspoint.com/html5/html5_websocket.htm
The WebSocket API
http://www.w3.org/TR/websockets/
Flash-based workaround
https://github.com/gimite/web-socket-js

35. Thank you!
vlavrynovych@malkosua.com