Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Websocket protocol overview

8,184 views

Published on

Websocket protocol overview and implement

  • Be the first to comment

Websocket protocol overview

  1. 1. The way to HTML5
  2. 2. The way to HTML5
  3. 3. FD
  4. 4. FD $.ajax(‘http://localhost/do_sth/’,{ ‘type’:‘GET’, ‘dataType’:‘json’, ‘success’:function(data){ console.log(data); } });
  5. 5. 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);}
  6. 6. HTTPdebug, WPO
  7. 7. HTTP debug, WPOWebSocketHTTP
  8. 8. HTTP debug, WPOWebSocketHTTP new WebSocket(ws_uri)
  9. 9. WebSocket protocol protocolWebSocket server
  10. 10. WebSocket API
  11. 11. WebSocket API API WebSocket
  12. 12. WebSocket API API WebSocketvar ws_uri = "ws://localhost:9999";webSocket = new WebSocket(ws_uri);webSocket.onmessage = function(e) { console.log("Got echo: " + e.data);}
  13. 13. WebSocket APIWebSocket API WebSocket Protocol
  14. 14. WebSocket Protocol 10 chrome 14+ , firefox 7+chrome blog
  15. 15. WebSocket Protocol 10 chrome 14+ , firefox 7+chrome blog
  16. 16. WebSocket Protocoloverview: “ ” API onmessage API
  17. 17. WebSocket Protocoloverview: frame frame message frame message frame message
  18. 18. WebSocket Protocoloverview: frame WebSocket Protocol raw data, raw data message ( control frame )
  19. 19. WebSocket ProtocolHandShake:
  20. 20. WebSocket ProtocolHandShake: GET WebSocket HTTP Header origin , WebSocket Version , WebSocket Key , Cookies Connection: Upgrade Upgrade: websocket WebSocket
  21. 21. WebSocket ProtocolHandShake: HTTP/1.1 101 Switching Protocols Connection: Upgrade Upgrade: websocket websocket
  22. 22. WebSocket ProtocolHandShake: Sec-WebSocket-Protocol: chat subprotocol为
  23. 23. WebSocket ProtocolHandShake: Sec-WebSocket-Origin: http://work server
  24. 24. WebSocket ProtocolHandShake: Sec-WebSocket-Origin: http://work server Sec HTTP Header javascript
  25. 25. WebSocket ProtocolHandShake: server client client websocket hankshake XHR form
  26. 26. WebSocket ProtocolHandShake: server HandShake HTTP header Sec-WebSocket-key, "258EAFA5-E914-47DA-95CA- C5AB0DC85B11" SHA-1 hash , base64-encode , Response Header “Sec-WebSocket-
  27. 27. WebSocket ProtocolHandShake: WebSocket Pythongit checkout handshake
  28. 28. WebSocket Protocolframe :
  29. 29. WebSocket Protocolframe :
  30. 30. WebSocket Protocolframe : FIN 1bit, message RSV0 RSV1 RSV2 1bit, 0 opcode: 4bit, payload data
  31. 31. WebSocket Protocolframe : FIN 1bit, message RSV0 RSV1 RSV2 1bit, 0 opcode: 4bit, payload data
  32. 32. 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
  33. 33. WebSocket Protocolframe : 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
  34. 34. WebSocket Protocolframe : Payload data: (x+y)bytes , payload data Extension data: x bytes, 0 Application data: y bytes , payload data
  35. 35. WebSocket Protocolframe : WebSocket server frame
  36. 36. WebSocket Protocolmore : http:// tools.ietf.org/html/draft-ietf-hybi- thewebsocketprotocol-10
  37. 37. Python: AutobahnNode.js : http://socket.io/#homeRuby : https://github.com/gimite/web-socket-rubyJava: https://github.com/TooTallNate/Java-WebSocket
  38. 38. Q&A

×