websocket protocol
DESCRIPTION
A slide presented at "Yet another html5j meet-up" (July 5th 2012)TRANSCRIPT
WEBSOCKET PROTOCOL
2012/7/5(THU)
KENSAKU KOMATSU
http://goo.gl/0kJGW
Yet another html5j meetup on July 5th, 2012
• 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
SELF-INTRODUCTION
ACTIVITIES(I LOVE SPEED!!)
http://wakachi.komasshu.info/
Referred!!, But… orz(I know I should do feedback)
http://www.html5rocks.com/en/tutorials/speed/quick/
TODAY’S MAIN IDEA
Two topics
1. Introduction to WebSocket and SPDY
2. Dive into WebSocket Protocol.
TOPIC1:
Introduction to WebSocket and SPDY
http://www.flickr.com/photos/cubedude27/4892016155/
EVOLVING OFWEB SERVICES
http://www.ocn.ne.jp/http://www.ibarakiken.gr.jp/www/index.html https://www.facebook.com/
1991 2012
COMMUNICATION MODEL HAS BEEN CHANGED
http://www.ocn.ne.jp/http://www.ibarakiken.gr.jp/www/index.html https://www.facebook.com/
1991 2012
Single resourceMultiple resources
Multiple resources+
Bi-directional
TRANSPORT PROTOCOL HAS NOT CHANGED
GET index.html
GET style.css
REQUEST
RESPONSE
REQUEST
RESPONSE
That’s HTTP.
ISSUES IN HTTP
Slow in multiple resources Periodically polling
hello!
“hello”
CURRENT PRACTICEFOR SOLVING ISSUES
Concurrent tcp connections Long Polling
“hello”
hello!
BUT STILL…
• Concurrent tcp request
• Increase server load• Heavy load to intermediary
• e.g. NAT, proxy, FireWall…
• Long polling
• Complicated coding• Increase traffics
• Header: k – 10k order• Payload : 10 bytes order …
CUTTING EDGE PROTOCOLSSPDY, WEBSOCKET
SPDY WebSocket
“hello”
hello!
・Multiplex requestUnder single https
connection.
・ Enable bidirectionalcommunication wo/
restrictions.(request not needed)・ Header overhead is
extremely small.
WebSocket
PROTOCOL STACKS
TCP
TLS
Any protocols
SPDY (framing layer)
TCP
TLS
SPDY (HTTP layer)
SSBP will be applied here?
WebSocketSPDY
A COMPARATIVE TABLESPDY WebSocket
Goal reduce the latency of web pages
provide two-way communication to browser-based application
How to setup 1. apply patch/module to your middleware
1. setup middleware2. write server side
programming3. write client side javascript
Migration very easy expensive
Coding skill not required mandatory
What we can serve?
Fast while downloading web resources.
Anything (especially bi-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 DEVICEINTERACTION
WebIntents+
ServiceDiscovery (uPnP)
WebSocket
DEMO: COMPARATIVE TEST (WS VS HTTP)
http://refws.komasshu.info/echocompare.html
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.
HOW TO USE WEBSOCKET? (BROWSER SIDE API)
// initiate connection
var ws = 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.
PROTOCOL OVERVIEWThe WebSocket Protocol (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
HANDSHAKEclient to server
server to client
DATA FRAMINGindicates text, binary, ping, pong, close ...
Payload data is masked with Masking-key (XOR base)(preventing Firewall Circumvention & Cache Poisoning)
WHAT FOR PING/PONG?
NATFireWall
LoadBalan
cer
Under no-traffic, intermediariesrelease session table
Known as “silent close”.
websocketconnection
WHAT FOR PING/PONG? [CONT]
NATFireWall
LoadBalan
cerwebsocketconnection
ping
pong
ping & pong is used to prevent silent close (Keep-alive)
IPv4 Private address NW
ADDITIONAL INFOCGN IN MOBILE NW
Career Grade NAT
G
P P P P
CGN is already installed into almost all mobile career NW.So using ping/pong is necessary (also thinking about battery issues).
GETTING REACH ABILITY
proxyFireWall
LoadBalan
cerwebsocketconnection
Use WSS (prevent interruption)
Treat WS traffic as HTTP/1.1⇨ Data framing will blocked ;-(
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
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
SOCKET.IO
Automatically fallback from WebSocket to Comet.
Automatic keep-alive, name space, ... very convenient!!
http://socket.io/
FOR SCALABLE SERVICES
Load balancer
WSserver
WSserver
WSserver
WSserver
redis, mongoDB, ...
user access
sync status /message sharing
some persistencywill required
(source IP hash,cookie ...)
node-proxynginx(work in progress)
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
THANK YOU!!
http://www.flickr.com/photos/23086934@N02/2250806050/