22
1 Simone Bordet [email protected]

Realizzare applicazioni Web con WebSocket, by Simone Bordet

Embed Size (px)

DESCRIPTION

Il protocollo WebSocket è ormai diventato un protocollo standard (RFC 6455), e ormai quasi tutti i browsers lo supportano. A differenza di HTTP permette una vera comunicazione bidirezionale tra client e server, permettendo di realizzare applicazioni molto scalabili. In questa sessione daremo uno sguardo al protocollo WebSocket e esamineremo come scrivere una applicazione web utilizzando WebSocket.

Citation preview

Page 1: Realizzare applicazioni Web con WebSocket, by Simone Bordet

1Simone Bordet

[email protected]

Page 2: Realizzare applicazioni Web con WebSocket, by Simone Bordet

2Simone Bordet

[email protected]

How to Build

WebSocket

Web Applications

Page 3: Realizzare applicazioni Web con WebSocket, by Simone Bordet

3Simone Bordet

[email protected]

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.

Page 4: Realizzare applicazioni Web con WebSocket, by Simone Bordet

4Simone Bordet

[email protected]

Agenda

What is WebSocket

WebSocket Browser API

WebSocket Server API

Demo

Q&A

Page 5: Realizzare applicazioni Web con WebSocket, by Simone Bordet

5Simone Bordet

[email protected]

What is WebSocket ?

Page 6: Realizzare applicazioni Web con WebSocket, by Simone Bordet

6Simone Bordet

[email protected]

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

Page 7: Realizzare applicazioni Web con WebSocket, by Simone Bordet

7Simone Bordet

[email protected]

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

Page 8: Realizzare applicazioni Web con WebSocket, by Simone Bordet

8Simone Bordet

[email protected]

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=

Page 9: Realizzare applicazioni Web con WebSocket, by Simone Bordet

9Simone Bordet

[email protected]

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 |+---------------------------------------------------------------+

Page 10: Realizzare applicazioni Web con WebSocket, by Simone Bordet

10Simone Bordet

[email protected]

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

Page 11: Realizzare applicazioni Web con WebSocket, by Simone Bordet

11Simone Bordet

[email protected]

WebSocket Performance

Page 12: Realizzare applicazioni Web con WebSocket, by Simone Bordet

12Simone Bordet

[email protected]

WebSocket Performance

Page 13: Realizzare applicazioni Web con WebSocket, by Simone Bordet

13Simone Bordet

[email protected]

WebSocket Browser API

Page 14: Realizzare applicazioni Web con WebSocket, by Simone Bordet

14Simone Bordet

[email protected]

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

};

Page 15: Realizzare applicazioni Web con WebSocket, by Simone Bordet

15Simone Bordet

[email protected]

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

Page 16: Realizzare applicazioni Web con WebSocket, by Simone Bordet

16Simone Bordet

[email protected]

WebSocket Server API

Page 17: Realizzare applicazioni Web con WebSocket, by Simone Bordet

17Simone Bordet

[email protected]

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

Page 18: Realizzare applicazioni Web con WebSocket, by Simone Bordet

18Simone Bordet

[email protected]

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

}

}

Page 19: Realizzare applicazioni Web con WebSocket, by Simone Bordet

19Simone Bordet

[email protected]

Page 20: Realizzare applicazioni Web con WebSocket, by Simone Bordet

20Simone Bordet

[email protected]

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

Page 21: Realizzare applicazioni Web con WebSocket, by Simone Bordet

21Simone Bordet

[email protected]

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

Page 22: Realizzare applicazioni Web con WebSocket, by Simone Bordet

22Simone Bordet

[email protected]

Questions&

Answers