The document discusses the WebSocket protocol. It describes how WebSocket works at a high level by establishing a handshake between client and server using HTTP headers to switch to the WebSocket protocol. It then outlines the format of WebSocket frames which make up the communication, including fields like opcode, masking, and payload length. Finally, it provides some examples of WebSocket libraries for different programming languages.

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