0
The way to HTML5
The way to HTML5
FD
FD $.ajax(‘http://localhost/do_sth/’,{     ‘type’:‘GET’,     ‘dataType’:‘json’,     ‘success’:function(data){         cons...
var ws_uri = "ws://localhost:9999";if ("WebSocket" in window) {    webSocket = new WebSocket(ws_uri);}else if("MozWebSocke...
HTTPdebug, WPO
HTTP   debug, WPOWebSocketHTTP
HTTP   debug, WPOWebSocketHTTP   new WebSocket(ws_uri)
WebSocket protocol             protocolWebSocket server
WebSocket API
WebSocket API API       WebSocket
WebSocket API  API          WebSocketvar ws_uri = "ws://localhost:9999";webSocket = new WebSocket(ws_uri);webSocket.onmess...
WebSocket APIWebSocket API       WebSocket Protocol
WebSocket Protocol 10       chrome 14+ , firefox 7+chrome blog
WebSocket Protocol 10       chrome 14+ , firefox 7+chrome blog
WebSocket Protocoloverview:                        “      ”            API             onmessage                  API
WebSocket Protocoloverview:                      frame            frame  message                 frame    message         ...
WebSocket Protocoloverview:  frame          WebSocket Protocol    raw data,           raw data            message    ( con...
WebSocket ProtocolHandShake:
WebSocket ProtocolHandShake:             GET WebSocket            HTTP Header     origin , WebSocket Version , WebSocket K...
WebSocket ProtocolHandShake:                       HTTP/1.1 101 Switching Protocols Connection: Upgrade Upgrade: websocket...
WebSocket ProtocolHandShake:     Sec-WebSocket-Protocol: chat             subprotocol为
WebSocket ProtocolHandShake: Sec-WebSocket-Origin: http://work      server
WebSocket ProtocolHandShake: Sec-WebSocket-Origin: http://work      server Sec          HTTP Header javascript
WebSocket ProtocolHandShake:        server        client             client   websocket hankshake                     XHR ...
WebSocket ProtocolHandShake:               server HandShake     HTTP header Sec-WebSocket-key,   "258EAFA5-E914-47DA-95CA-...
WebSocket ProtocolHandShake:                              WebSocket                         Pythongit checkout handshake
WebSocket Protocolframe      :
WebSocket Protocolframe      :
WebSocket Protocolframe          : FIN 1bit,                message RSV0   RSV1       RSV2      1bit,                     ...
WebSocket Protocolframe          : FIN 1bit,                message RSV0   RSV1       RSV2      1bit,                     ...
WebSocket Protocol      frame           :opcode  *    %x0 denotes a continuation frame       FIN 1bit,              messag...
WebSocket Protocolframe           : mask: 1bit ,        payload data    1               masking-key                       ...
WebSocket Protocolframe         : Payload data: (x+y)bytes , payload data Extension data: x bytes,      0 Application data...
WebSocket Protocolframe      :                  WebSocket server               frame
WebSocket Protocolmore :                  http:// tools.ietf.org/html/draft-ietf-hybi- thewebsocketprotocol-10
Python: AutobahnNode.js : http://socket.io/#homeRuby : https://github.com/gimite/web-socket-rubyJava: https://github.com/T...
Q&A
Websocket protocol overview
Websocket protocol overview
Websocket protocol overview
Websocket protocol overview
Upcoming SlideShare
Loading in...5
×

Websocket protocol overview

6,586

Published on

Websocket protocol overview and implement

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

No Downloads
Views
Total Views
6,586
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
95
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
  • Transcript of "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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×