WebSocket protocol

  • 3,500 views
Uploaded on

A slide presented at "Yet another html5j meet-up" (July 5th 2012)

A slide presented at "Yet another html5j meet-up" (July 5th 2012)

More in: Technology
  • 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
3,500
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
69
Comments
0
Likes
10

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

Transcript

  • 1. Yet another html5j meetup on July 5th, 2012WEBSOCKET PROTOCOL http://goo.gl/0kJGW2012/7/5(THU)KENSAKU KOMATSU
  • 2. SELF-INTRODUCTION• Researching cutting-edge web technology • Especially APIs related to NW, in preference • Google API Expert (HTML5)• Microsoft Most Valuable Professional(IE)• Twitter: @komasshu• Blog: http://blog.livedoor.jp/kotesaki
  • 3. ACTIVITIES http://www.html5rocks.com/en/tutorials/speed/quick/(I LOVE SPEED!!) Referred!!, But… orz (I know I should do feedback) http://wakachi.komasshu.info/
  • 4. TODAY’S MAIN IDEATwo topics1. Introduction to WebSocket and SPDY2. Dive into WebSocket Protocol.
  • 5. http://www.flickr.com/photos/cubedude27/4892016155/TOPIC1:Introduction to WebSocket andSPDY
  • 6. EVOLVINGOF WEB SERVICES1991 2012http://www.ibarakiken.gr.jp/www/index.html http://www.ocn.ne.jp/ https://www.facebook.com/
  • 7. COMMUNICATION MODEL HAS BEEN CHANGED1991 2012http://www.ibarakiken.gr.jp/www/index.html http://www.ocn.ne.jp/ https://www.facebook.com/ Multiple resources Single resource + Multiple resources Bi-directional
  • 8. TRANSPORTPROTOCOLHAS NOTCHANGEDREQUEST GET index.html RESPONSEREQUEST GET style.css RESPONSE
  • 9. ISSUESINHTTPSlowinmultiple resources Periodically polling hello! “hello”
  • 10. CURRENT PRACTICEFOR SOLVING ISSUESConcurrent tcp connections Long Polling hello! “hello”
  • 11. BUT STILL…• Concurrent tcp request • Increase server load • Heavy loadto intermediary • e.g. NAT, proxy, FireWall…• Long polling • Complicated coding • Increase traffics • Header: k – 10k order • Payload : 10 bytes order …
  • 12. CUTTING EDGEPROTOCOLSSPDY, WEBSOCKETSPDY WebSocket ・Enable bidirectional communication wo/ restrictions. (request not needed) ・Header overhead is hello! extremely small. ・Multiplex request Under single https “hello” connection.
  • 13. PROTOCOL STACKS SPDY WebSocket SPDY (HTTP layer) Any protocols SPDY (framing layer) WebSocket TLS TLS TCP TCPSSBP will be applied here?
  • 14. A COMPARATIVETABLE SPDY WebSocketGoal reduce the latency of web provide two-way pages communication to browser- based applicationHow to setup 1. apply patch/module to 1. setup middleware your middleware 2. write server side programming 3. write client side javascriptMigration very easy expensiveCoding skill not required  mandatoryWhat we can Fast while downloading web Anything (especially bi-serve? resources. directional webapps (e.g. chat, push services, online game ))
  • 15. TOPIC2: Dive into WebSocket Protocol http://www.flickr.com/photos/nektar/6085553520/sizes/z/in/photostream/
  • 16. DEMO:MULTI DEVICE WebIntents +INTERACTION ServiceDiscovery (uPnP) WebSocket
  • 17. DEMO: COMPARATIVETEST (WS VS HTTP) http://refws.komasshu.info/echocompare.html
  • 18. REF: CASE HTTP// send request$.get(“http://example.com”, function(data, e) {// when data is receivedconsole.log(data);}); To receive data, sending request must be required.
  • 19. HOW TO USE WEBSOCKET?(BROWSER SIDE API)// initiate connectionvarws = new WebSocket(“ws://example.com/”);// right after connection establishedws.onconnect = function(e) { ... };// when data arrival from serverws.onmessage = function(e) { console.log(e.data); }// send data to serverws.send(“hello”);// close connectionws.close(); sending and receiving data works independently.
  • 20. PROTOCOL OVERVIEWThe WebSocketProtocol (RFC6455)•Has two parts • handshake • in context of HTTP/1.1 • data transfer • frame format•protocol schema • ws (80), wss(443)•browsers • chrome, firefox, safari, opera(need configuration), IE10 • iOS safari, Android browser (Chrome)
  • 21. SEQUENCE OVERVIEW handshake data transfer closing
  • 22. HANDSHAKE client to server server to client
  • 23. DATA FRAMING indicates text, binary, ping, pong, close ... Payload data is masked with Masking-key (XOR base) (preventing Firewall Circumvention & Cache Poisoning)
  • 24. WHAT FORPING/PONG? Under no-traffic, intermediaries release session table Load Fire NAT Balan Wall cer websocket connection Known as “silent close”.
  • 25. WHAT FOR PING/PONG? [CONT] Load ping Fire NAT Balan pong Wall cer websocket connectionping & pong is used to prevent silent close (Keep-alive)
  • 26. ADDITIONAL INFO CGN IN MOBILE NWCGN is already installed into almost all mobile career NW.So using ping/pong is necessary (also thinking about battery issues). G Career Grade NAT P P P P IPv4 Private address NW
  • 27. GETTING REACHABILITY Treat WS traffic as HTTP/1.1 ⇨ Data framing will blocked ;-( Load Fire proxy Balan Wall cer websocket connection Use WSS (prevent interruption)
  • 28. SUBPROTOCOL•WebSocket can handle any data schema. • example: transfer mouse coordinates • option1 : {x: 1, y:240} • option2 : [1, 240] • option3 : {x: “1px”, y: “240px”} • ...... lack of interoperability•subprotocol addresses the interoperability problem • define schema, sequence, ... • should register IANA • identifier, common name, definition
  • 29. SUBPROTOCOL[CONT] http://www.iana.org/assignments/websocket/websocket.xml
  • 30. EXTENSIONTwo proposal are now discussed.•Multiplexing Extension • http://tools.ietf.org/html/draft-ietf-hybi-websocket-multiplexing- 03•Per-frame Compression • http://tools.ietf.org/html/draft-ietf-hybi-websocket-perframe- compression-04
  • 31. SOCKET.IOAutomatically fallback from WebSocket to Comet.Automatic keep-alive, name space, ... very convenient!! http://socket.io/
  • 32. FOR SCALABLE SERVICES redis, mongoDB, ... sync status / message sharing WS WS WS WS server server server servernode-proxy Load balancer some persistencynginx(work in progress) will required (source IP hash, user access cookie ...)
  • 33. CONCLUSION•WebSocket • provide two-way communication to browser-based application • NO request & response restrictions • default port is 80 (ws), 443(wss) • consists of two parts • handshake : upgrade mechanism • data transfer : text (utf-8) and binary • ping/pong • prevent silent close • wss • get reach ability • subprotocol • interoperability • extensions • multiplexing, per-frame compression
  • 34. http://www.flickr.com/photos/23086934@N02/2250806050/