The document is a presentation by Simone Bordet on WebSocket, an HTML5 protocol for bidirectional web communication developed between 2009 and 2012. It covers the WebSocket protocol details, browser and server APIs, and practical Java implementations using Jetty. The conclusion emphasizes the ease of WebSocket programming but notes challenges with older browsers and internet proxies.

1. Simone Bordet
1
sbordet@intalio.com

2. How to Build
WebSocket
Web Applications
Simone Bordet
2
sbordet@intalio.com

3. Simone Bordet
Senior Engineer/Architect at Intalio/Webtide
 Support for Jetty and CometD open source projects
Open Source Contributor
 Jetty, CometD, MX4J, Foxtrot, LiveTribe, JBoss, Larex
JVM tuning expert
Working on Web Network Protocols
 HTTP, WebSocket, SPDY, etc.
Simone Bordet
3
sbordet@intalio.com

4. Agenda
What is WebSocket
WebSocket Browser API
WebSocket Server API
Demo
Q&A
Simone Bordet
4
sbordet@intalio.com

5. What is WebSocket ?
Simone Bordet
5
sbordet@intalio.com

6. WebSocket
WebSocket is the HTML 5 standard protocol for
bidirectional web communication
 HTTP is always client-initiated
 Finally, standard server-push
Work began in 2009, ended in 2012
 Excruciatingly painful
 But at the end, a good standard protocol
Simone Bordet
6
sbordet@intalio.com

7. WebSocket Protocol
The WebSocket protocol is made of 2 parts
 WebSocket upgrade
 WebSocket data exchange
WebSocket upgrade
 It's plain old HTTP with an “Upgrade” header
 WebSocket runs on port 80
 Could be a trouble for inspecting HTTP proxies that
do not support WebSocket
Simone Bordet
7
sbordet@intalio.com

8. WebSocket Upgrade
REQUEST
GET / HTTP/1.1
Host: localhost:8080
Origin: http://localhost:8080
Connection: Upgrade
Upgrade: websocket
Sec-WebSocket-Key: SbdIETLKHQ1TNBLeZFZS0g==
Sec-WebSocket-Version: 13
RESPONSE
HTTP/1.1 101 Switching Protocols
Connection: Upgrade
Upgrade: websocket
Sec-WebSocket-Accept: y4yXRUolfnFfo3Jc5HFqRHNgx2A=
Simone Bordet
8
sbordet@intalio.com

9. WebSocket Protocol
WebSocket data exchange
 Sequence of WebSocket “frames”
0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7
+-+-+-+-+-------+-+-------------+-------------------------------+
|F|R|R|R| opcode|M| Payload len | Extended payload length |
|I|S|S|S| (4) |A| (7) | (16/64) |
|N|V|V|V| |S| | (if payload len==126/127) |
| |1|2|3| |K| | |
+-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
| Extended payload length continued, if payload len == 127 |
+ - - - - - - - - - - - - - - - +-------------------------------+
| |Masking-key, if MASK set to 1 |
+-------------------------------+-------------------------------+
| Masking-key (continued) | Payload Data |
+-------------------------------- - - - - - - - - - - - - - - - +
: Payload Data continued ... :
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
| Payload Data continued |
+---------------------------------------------------------------+
Simone Bordet
9
sbordet@intalio.com

10. WebSocket Protocol
Very compact
 Smallest data frame has only 2 bytes overhead
Typical first byte is 0x81 for a text frame
 0x82 for a binary frame
 0x88 for a close frame
WebSocket “close” frame
 Sent by the application to signal end of data
 Must be replied before closing TCP connection
Prevents loss of data
Browsers MUST mask frames
 But servers are not required to
Simone Bordet
10
sbordet@intalio.com

11. WebSocket Performance
Simone Bordet
11
sbordet@intalio.com

12. WebSocket Performance
Simone Bordet
12
sbordet@intalio.com

13. WebSocket
Browser API
Simone Bordet
13
sbordet@intalio.com

14. WebSocket Browser API
interface WebSocket {
WebSocket(DOMString url, optional (DOMString or DOMString[]) protocols)]
attribute Function? onopen;
attribute Function? onerror;
attribute Function? onclose;
attribute Function? onmessage;
void send(DOMString data);
void close(optional unsigned short code, optional DOMString reason);
attribute DOMString binaryType; // “blob” or “arraybuffer”
void send(ArrayBuffer data);
void send(Blob data);
};
Simone Bordet
14
sbordet@intalio.com

15. WebSocket Browser API Usage
var ws = new window.WebSocket(“ws://localhost:8080/ws”);
ws.send(“Hello, World”);
ws.onopen = function() {
ws.send(“Hello, World”);
};
ws.onclose = function(event) {
// Server closed
}
ws.onmessage = function(event) {
var data = event.data;
window.console.info(“Server says: ” + data);
};
Simone Bordet
15
sbordet@intalio.com

16. WebSocket
Server API
Simone Bordet
16
sbordet@intalio.com

17. WebSocket Server API
No standard API for WebSocket webapps yet
Servlet 3.0 addressed asynchronous HTTP
Servlet 3.1 (JSR 340) to address this
 Expected Q1 2013
For now, rely on Jetty API
 Java API for both client and server
Simone Bordet
17
sbordet@intalio.com

18. WebSocket Jetty API
public class MyWebSocketServlet extends WebSocketServlet {
public WebSocket doWebSocketConnect(HttpServletRequest r, String p) {
return new MyWebSocket();
}
}
public class MyWebSocket implements WebSocket.OnTextMessage {
public void onOpen(Connection connection) {
}
public void onMessage(String data) {
}
public void onClose(int closeCode, String message) {
}
}
Simone Bordet
18
sbordet@intalio.com

19. Simone Bordet
19
sbordet@intalio.com

20. Conclusions
WebSocket programming is easy !
However, may not be widely deployed
 Old browsers
 Old internet proxies
WebSocket is low-level
 A framework on top gives much more productivity
 CometD
Simone Bordet
20
sbordet@intalio.com

21. References
WebSocket Protocol
 http://www.ietf.org/rfc/rfc6455.txt
JSR 340 (Servlet 3.1)
 http://jcp.org/en/jsr/detail?id=340
WebSocket API
 http://dev.w3.org/html5/websockets/
Jetty
 http://eclipse.org/jetty
CometD
 http://cometd.org
Simone Bordet
21
sbordet@intalio.com

22. Questions
&
Answers
Simone Bordet
22
sbordet@intalio.com