Realizzare applicazioni Web con WebSocket, by Simone Bordet

1Simone Bordet

sbordet@intalio.com

2Simone Bordet

sbordet@intalio.com

How to Build

WebSocket

Web Applications

3Simone Bordet

sbordet@intalio.com

Simone Bordet

Senior Engineer/Architect at Intalio/WebtideSupport for Jetty and CometD open source projects

Open Source Contributor Jetty, CometD, MX4J, Foxtrot, LiveTribe, JBoss, Larex

JVM tuning expert

Working on Web Network ProtocolsHTTP, WebSocket, SPDY, etc.

4Simone Bordet

sbordet@intalio.com

Agenda

What is WebSocket

WebSocket Browser API

WebSocket Server API

Demo

Q&A

5Simone Bordet

sbordet@intalio.com

What is WebSocket ?

6Simone Bordet

sbordet@intalio.com

WebSocket

WebSocket is the HTML 5 standard protocol for bidirectional web communicationHTTP is always client-initiatedFinally, standard server-push

Work began in 2009, ended in 2012Excruciatingly painfulBut at the end, a good standard protocol

7Simone Bordet

sbordet@intalio.com

WebSocket Protocol

The WebSocket protocol is made of 2 partsWebSocket upgradeWebSocket data exchange

WebSocket upgrade It's plain old HTTP with an “Upgrade” headerWebSocket runs on port 80Could be a trouble for inspecting HTTP proxies that

do not support WebSocket

8Simone Bordet

sbordet@intalio.com

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=

9Simone Bordet

sbordet@intalio.com

WebSocket Protocol

WebSocket data exchangeSequence 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 |+---------------------------------------------------------------+

10Simone Bordet

sbordet@intalio.com

WebSocket Protocol

Very compactSmallest data frame has only 2 bytes overhead

Typical first byte is 0x81 for a text frame0x82 for a binary frame0x88 for a close frame

WebSocket “close” frameSent by the application to signal end of dataMust be replied before closing TCP connection

Prevents loss of data

Browsers MUST mask framesBut servers are not required to

11Simone Bordet

sbordet@intalio.com

WebSocket Performance

12Simone Bordet

sbordet@intalio.com

WebSocket Performance

13Simone Bordet

sbordet@intalio.com

WebSocket Browser API

14Simone Bordet

sbordet@intalio.com

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);

};

15Simone Bordet

sbordet@intalio.com

WebSocket Browser API Usage

var ws = new window.WebSocket(“ws://localhost:8080/ws”);

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);

};

ws.send(“Hello, World”);ws.send(“Hello, World”);

16Simone Bordet

sbordet@intalio.com

WebSocket Server API

17Simone Bordet

sbordet@intalio.com

WebSocket Server API

No standard API for WebSocket webapps yet

Servlet 3.0 addressed asynchronous HTTPServlet 3.1 (JSR 340) to address this

Expected Q1 2013

For now, rely on Jetty API Java API for both client and server

18Simone Bordet

sbordet@intalio.com

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) {

}

}

19Simone Bordet

sbordet@intalio.com

20Simone Bordet

sbordet@intalio.com

Conclusions

WebSocket programming is easy !

However, may not be widely deployedOld browsersOld internet proxies

WebSocket is low-levelA framework on top gives much more productivityCometD

21Simone Bordet

sbordet@intalio.com

References

WebSocket Protocolhttp://www.ietf.org/rfc/rfc6455.txt

JSR 340 (Servlet 3.1)http://jcp.org/en/jsr/detail?id=340

WebSocket APIhttp://dev.w3.org/html5/websockets/

Jettyhttp://eclipse.org/jetty

CometDhttp://cometd.org

22Simone Bordet

sbordet@intalio.com

Questions&

Answers