WebSocket protocol
Upcoming SlideShare
Loading in...5

WebSocket protocol



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

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



Total Views
Views on SlideShare
Embed Views



4 Embeds 8

http://us-w1.rockmelt.com 3
https://twitter.com 3
https://si0.twimg.com 1
http://tweetedtimes.com 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

WebSocket protocol WebSocket protocol Presentation Transcript

  • Yet another html5j meetup on July 5th, 2012WEBSOCKET PROTOCOL http://goo.gl/0kJGW2012/7/5(THU)KENSAKU KOMATSU
  • 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
  • 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/
  • TODAY’S MAIN IDEATwo topics1. Introduction to WebSocket and SPDY2. Dive into WebSocket Protocol.
  • http://www.flickr.com/photos/cubedude27/4892016155/TOPIC1:Introduction to WebSocket andSPDY
  • EVOLVINGOF WEB SERVICES1991 2012http://www.ibarakiken.gr.jp/www/index.html http://www.ocn.ne.jp/ https://www.facebook.com/
  • 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
  • ISSUESINHTTPSlowinmultiple resources Periodically polling hello! “hello”
  • CURRENT PRACTICEFOR SOLVING ISSUESConcurrent tcp connections Long Polling hello! “hello”
  • 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 …
  • 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.
  • PROTOCOL STACKS SPDY WebSocket SPDY (HTTP layer) Any protocols SPDY (framing layer) WebSocket TLS TLS TCP TCPSSBP will be applied here?
  • 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 ))
  • TOPIC2: Dive into WebSocket Protocol http://www.flickr.com/photos/nektar/6085553520/sizes/z/in/photostream/
  • DEMO:MULTI DEVICE WebIntents +INTERACTION ServiceDiscovery (uPnP) WebSocket
  • DEMO: COMPARATIVETEST (WS VS HTTP) http://refws.komasshu.info/echocompare.html
  • 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.
  • 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.
  • 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)
  • SEQUENCE OVERVIEW handshake data transfer closing
  • HANDSHAKE client to server server to client
  • DATA FRAMING indicates text, binary, ping, pong, close ... Payload data is masked with Masking-key (XOR base) (preventing Firewall Circumvention & Cache Poisoning)
  • WHAT FORPING/PONG? Under no-traffic, intermediaries release session table Load Fire NAT Balan Wall cer websocket connection Known as “silent close”.
  • WHAT FOR PING/PONG? [CONT] Load ping Fire NAT Balan pong Wall cer websocket connectionping & pong is used to prevent silent close (Keep-alive)
  • 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
  • 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)
  • 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
  • SUBPROTOCOL[CONT] http://www.iana.org/assignments/websocket/websocket.xml
  • 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
  • SOCKET.IOAutomatically fallback from WebSocket to Comet.Automatic keep-alive, name space, ... very convenient!! http://socket.io/
  • 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 ...)
  • 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
  • http://www.flickr.com/photos/23086934@N02/2250806050/