Websocket protocol overview

7,916 views

Published on

Websocket protocol overview and implement

0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,916
On SlideShare
0
From Embeds
0
Number of Embeds
3,302
Actions
Shares
0
Downloads
110
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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

    ×