Your SlideShare is downloading. ×
0
WebSocket protocol
WebSocket protocol
WebSocket protocol
WebSocket protocol
WebSocket protocol
WebSocket protocol
WebSocket protocol
WebSocket protocol
WebSocket protocol
WebSocket protocol
WebSocket protocol
WebSocket protocol
WebSocket protocol
WebSocket protocol
WebSocket protocol
WebSocket protocol
WebSocket protocol
WebSocket protocol
WebSocket protocol
WebSocket protocol
WebSocket protocol
WebSocket protocol
WebSocket protocol
WebSocket protocol
WebSocket protocol
WebSocket protocol
WebSocket protocol
WebSocket protocol
WebSocket protocol
WebSocket protocol
WebSocket protocol
WebSocket protocol
WebSocket protocol
WebSocket protocol
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

WebSocket protocol

3,666

Published 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)

Published in: Technology
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,666
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
72
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/

×