Your SlideShare is downloading. ×
  • Like
Websocket protocol overview
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Websocket protocol overview

  • 6,308 views
Published

Websocket protocol overview and implement

Websocket protocol overview and implement

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
6,308
On SlideShare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
93
Comments
0
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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

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