Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

WebSocket protocol

5.402 visualizaciones

Publicado el

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

Publicado en: Tecnología

WebSocket protocol

  1. 1. Yet another html5j meetup on July 5th, 2012WEBSOCKET PROTOCOL KOMATSU
  2. 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:
  3. 3. ACTIVITIES LOVE SPEED!!) Referred!!, But… orz (I know I should do feedback)
  4. 4. TODAY’S MAIN IDEATwo topics1. Introduction to WebSocket and SPDY2. Dive into WebSocket Protocol.
  5. 5. to WebSocket andSPDY
  7. 7. COMMUNICATION MODEL HAS BEEN CHANGED1991 2012 Multiple resources Single resource + Multiple resources Bi-directional
  9. 9. ISSUESINHTTPSlowinmultiple resources Periodically polling hello! “hello”
  10. 10. CURRENT PRACTICEFOR SOLVING ISSUESConcurrent tcp connections Long Polling hello! “hello”
  11. 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. 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. 13. PROTOCOL STACKS SPDY WebSocket SPDY (HTTP layer) Any protocols SPDY (framing layer) WebSocket TLS TLS TCP TCPSSBP will be applied here?
  14. 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. 15. TOPIC2: Dive into WebSocket Protocol
  16. 16. DEMO:MULTI DEVICE WebIntents +INTERACTION ServiceDiscovery (uPnP) WebSocket
  18. 18. REF: CASE HTTP// send request$.get(“”, function(data, e) {// when data is receivedconsole.log(data);}); To receive data, sending request must be required.
  19. 19. HOW TO USE WEBSOCKET?(BROWSER SIDE API)// initiate connectionvarws = new WebSocket(“ws://”);// right after connection establishedws.onconnect = function(e) { ... };// when data arrival from serverws.onmessage = function(e) { console.log(; }// send data to serverws.send(“hello”);// close connectionws.close(); sending and receiving data works independently.
  20. 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. 21. SEQUENCE OVERVIEW handshake data transfer closing
  22. 22. HANDSHAKE client to server server to client
  23. 23. DATA FRAMING indicates text, binary, ping, pong, close ... Payload data is masked with Masking-key (XOR base) (preventing Firewall Circumvention & Cache Poisoning)
  24. 24. WHAT FORPING/PONG? Under no-traffic, intermediaries release session table Load Fire NAT Balan Wall cer websocket connection Known as “silent close”.
  25. 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. 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. 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. 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
  30. 30. EXTENSIONTwo proposal are now discussed.•Multiplexing Extension • 03•Per-frame Compression • compression-04
  31. 31. SOCKET.IOAutomatically fallback from WebSocket to Comet.Automatic keep-alive, name space, ... very convenient!!
  32. 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. 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. 34.