Websocket protocol overview and implement

2. The way to HTML5

3. The way to HTML5

4. FD

5. FD
$.ajax(‘http://localhost/do_sth/’,{
‘type’:‘GET’,
‘dataType’:‘json’,
‘success’:function(data){
console.log(data);
}
});

7. var ws_uri = "ws://localhost:9999";
if ("WebSocket" in window) {
webSocket = new WebSocket(ws_uri);
}else if("MozWebSocket" in window) {
// Firefox 7/8
webSocket = new MozWebSocket(ws_uri);
}
webSocket.onmessage = function(e) {
console.log("Got echo: " + e.data);
}

10. HTTP
debug, WPO

11. HTTP
debug, WPO
WebSocket
HTTP

12. HTTP
debug, WPO
WebSocket
HTTP
new WebSocket(ws_uri)

13. WebSocket protocol
protocol
WebSocket server

14. WebSocket API

15. WebSocket API
API
WebSocket

16. WebSocket API
API
WebSocket
var ws_uri = "ws://localhost:9999";
webSocket = new WebSocket(ws_uri);
webSocket.onmessage = function(e) {
console.log("Got echo: " + e.data);
}

17. WebSocket API
WebSocket API WebSocket Protocol

18. WebSocket Protocol
10 chrome 14+ , firefox 7+
chrome blog

19. WebSocket Protocol
10 chrome 14+ , firefox 7+
chrome blog

20. WebSocket Protocol
overview:
“ ”
API onmessage
API

21. WebSocket Protocol
overview:
frame
frame
message frame
message frame
message

22. WebSocket Protocol
overview:
frame WebSocket Protocol
raw data, raw data
message
( control frame )

23. WebSocket Protocol
HandShake:

24. WebSocket Protocol
HandShake:
GET
WebSocket HTTP Header
origin , WebSocket Version ,
WebSocket Key , Cookies
Connection: Upgrade
Upgrade: websocket
WebSocket

25. WebSocket Protocol
HandShake:
HTTP/1.1 101
Switching Protocols
Connection: Upgrade
Upgrade: websocket
websocket

26. WebSocket Protocol
HandShake:
Sec-WebSocket-Protocol: chat
subprotocol
为

27. WebSocket Protocol
HandShake:
Sec-WebSocket-Origin: http://work
server

28. WebSocket Protocol
HandShake:
Sec-WebSocket-Origin: http://work
server
Sec HTTP Header
javascript

29. WebSocket Protocol
HandShake:
server client
client websocket
hankshake XHR
form

30. WebSocket Protocol
HandShake:
server
HandShake HTTP header
Sec-WebSocket-key,
"258EAFA5-E914-47DA-95CA-
C5AB0DC85B11"
SHA-1 hash ,
base64-encode , Response
Header “Sec-WebSocket-

31. WebSocket Protocol
HandShake:
WebSocket
Python
git checkout handshake

32. WebSocket Protocol
frame :

33. WebSocket Protocol
frame :

34. WebSocket Protocol
frame :
FIN 1bit, message
RSV0 RSV1 RSV2 1bit,
0
opcode: 4bit, payload data

35. WebSocket Protocol
frame :
FIN 1bit, message
RSV0 RSV1 RSV2 1bit,
0
opcode: 4bit, payload data

36. WebSocket Protocol
frame :
opcode
* %x0 denotes a continuation frame
FIN 1bit, message
* %x1 denotes a text frame
* %x2 denotes a binary frame
RSV0 RSV1 RSV2 1bit,
* %x3-7 are reserved for further non-control frames
0
* %x8 denotes a connection close
* %x9 denotes a ping
opcode: 4bit, payload data
* %xA denotes a pong
* %xB-F are reserved for further control frames

37. WebSocket Protocol
frame :
mask: 1bit , payload data
1 masking-key
1
payload length: 7 bits , 7+16bits , or 7+64
bits 7bit 0 -125
126 2byte
127 4byte
Masking-Key: 0 or 4 bytes. mask 0 key
0 mask 1 key 4
bytes

38. WebSocket Protocol
frame :
Payload data: (x+y)bytes , payload data
Extension data: x bytes, 0
Application data: y bytes , payload
data

39. WebSocket Protocol
frame :
WebSocket
server
frame

40. WebSocket Protocol
more :
http://
tools.ietf.org/html/draft-ietf-hybi-
thewebsocketprotocol-10

41. Python: Autobahn
Node.js : http://socket.io/#home
Ruby : https://github.com/gimite/
web-socket-ruby
Java: https://github.com/
TooTallNate/Java-WebSocket

42. Q&A