WebSocket protocol
Download as PPTX, PDF13 likes3,765 views
1. The document discusses a meetup about WebSocket and SPDY protocols on July 5th, 2012 presented by Kensaku Komatsu. 2. The presentation covered introductions to WebSocket and SPDY, how they address issues with HTTP such as slow loading of multiple resources, and compared their communication models and transport protocols. 3. The main topics were introductions to WebSocket and SPDY, and a deeper dive into the WebSocket protocol including its handshake process, data framing, ping/pong functionality, and additional aspects like subprotocols and extensions.
![WHAT FOR
PING/PONG? [CONT]
Load ping
Fire
NAT Balan
pong Wall
cer
websocket
connection
ping & pong is used to prevent silent close (Keep-alive)](https://image.slidesharecdn.com/july5thwebsocket-120705034533-phpapp02/85/WebSocket-protocol-25-320.jpg)
![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](https://image.slidesharecdn.com/july5thwebsocket-120705034533-phpapp02/85/WebSocket-protocol-28-320.jpg)
![SUBPROTOCOL[CONT]
http://www.iana.org/assignments/websocket/websocket.xml](https://image.slidesharecdn.com/july5thwebsocket-120705034533-phpapp02/85/WebSocket-protocol-29-320.jpg)
More Related Content
What's hot (20)
Viewers also liked (8)
Similar to WebSocket protocol (20)
More from Kensaku Komatsu (20)
Recently uploaded (20)
![[Webinar] Scaling Made Simple: Getting Started with No-Code Web Apps](https://cdn.slidesharecdn.com/ss_thumbnails/webinarscalingmadesimplegettingstartedwithno-codewebapps-mar52025-250305183437-f03c78a3-thumbnail.jpg?width=560&fit=bounds)
![Formal Methods: Whence and Whither? [Martin Fränzle Festkolloquium, 2025]](https://cdn.slidesharecdn.com/ss_thumbnails/mf2025-250305164811-a0930761-thumbnail.jpg?width=560&fit=bounds)
WebSocket protocol
- 1. Yet another html5j meetup on July 5th, 2012 WEBSOCKET PROTOCOL http://goo.gl/0kJGW 2012/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 IDEA Two topics 1. Introduction to WebSocket and SPDY 2. Dive into WebSocket Protocol.
- 5. http://www.flickr.com/photos/cubedude27/4892016155/ TOPIC1: Introduction to WebSocket and SPDY
- 6. EVOLVINGOF WEB SERVICES 1991 2012 http://www.ibarakiken.gr.jp/www/index.html http://www.ocn.ne.jp/ https://www.facebook.com/
- 7. COMMUNICATION MODEL HAS BEEN CHANGED 1991 2012 http://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. TRANSPORT PROTOCOLHAS NOT CHANGED REQUEST GET index.html RESPONSE REQUEST GET style.css RESPONSE
- 9. ISSUESINHTTP Slowinmultiple resources Periodically polling hello! “hello”
- 10. CURRENT PRACTICE FOR SOLVING ISSUES Concurrent 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 EDGE PROTOCOLS SPDY, WEBSOCKET SPDY 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 TCP SSBP will be applied here?
- 14. A COMPARATIVE TABLE SPDY WebSocket Goal reduce the latency of web provide two-way pages communication to browser- based application How to setup 1. apply patch/module to 1. setup middleware your middleware 2. write server side programming 3. write client side javascript Migration very easy expensive Coding skill not required mandatory What 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: COMPARATIVE TEST (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 received console.log(data); }); To receive data, sending request must be required.
- 19. HOW TO USE WEBSOCKET? (BROWSER SIDE API) // initiate connection varws = new WebSocket(“ws://example.com/”); // right after connection established ws.onconnect = function(e) { ... }; // when data arrival from server ws.onmessage = function(e) { console.log(e.data); } // send data to server ws.send(“hello”); // close connection ws.close(); sending and receiving data works independently.
- 20. PROTOCOL OVERVIEW The 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 FOR PING/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 connection ping & pong is used to prevent silent close (Keep-alive)
- 26. ADDITIONAL INFO CGN IN MOBILE NW CGN 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 REACH ABILITY 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. EXTENSION Two 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.IO Automatically 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 server node-proxy Load balancer some persistency nginx(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