WebSocket protocol
-
Upload
kensaku-komatsu -
Category
Technology
-
view
3.683 -
download
2
description
Transcript of WebSocket protocol
![Page 1: WebSocket protocol](https://reader034.fdocuments.us/reader034/viewer/2022042601/5555a648d8b42a8e1f8b5465/html5/thumbnails/1.jpg)
WEBSOCKET PROTOCOL
2012/7/5(THU)
KENSAKU KOMATSU
http://goo.gl/0kJGW
Yet another html5j meetup on July 5th, 2012
![Page 2: WebSocket protocol](https://reader034.fdocuments.us/reader034/viewer/2022042601/5555a648d8b42a8e1f8b5465/html5/thumbnails/2.jpg)
• 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
![Page 3: WebSocket protocol](https://reader034.fdocuments.us/reader034/viewer/2022042601/5555a648d8b42a8e1f8b5465/html5/thumbnails/3.jpg)
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/
![Page 4: WebSocket protocol](https://reader034.fdocuments.us/reader034/viewer/2022042601/5555a648d8b42a8e1f8b5465/html5/thumbnails/4.jpg)
TODAY’S MAIN IDEA
Two topics
1. Introduction to WebSocket and SPDY
2. Dive into WebSocket Protocol.
![Page 5: WebSocket protocol](https://reader034.fdocuments.us/reader034/viewer/2022042601/5555a648d8b42a8e1f8b5465/html5/thumbnails/5.jpg)
TOPIC1:
Introduction to WebSocket and SPDY
http://www.flickr.com/photos/cubedude27/4892016155/
![Page 6: WebSocket protocol](https://reader034.fdocuments.us/reader034/viewer/2022042601/5555a648d8b42a8e1f8b5465/html5/thumbnails/6.jpg)
EVOLVING OFWEB SERVICES
http://www.ocn.ne.jp/http://www.ibarakiken.gr.jp/www/index.html https://www.facebook.com/
1991 2012
![Page 7: WebSocket protocol](https://reader034.fdocuments.us/reader034/viewer/2022042601/5555a648d8b42a8e1f8b5465/html5/thumbnails/7.jpg)
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
![Page 8: WebSocket protocol](https://reader034.fdocuments.us/reader034/viewer/2022042601/5555a648d8b42a8e1f8b5465/html5/thumbnails/8.jpg)
TRANSPORT PROTOCOL HAS NOT CHANGED
GET index.html
GET style.css
REQUEST
RESPONSE
REQUEST
RESPONSE
That’s HTTP.
![Page 9: WebSocket protocol](https://reader034.fdocuments.us/reader034/viewer/2022042601/5555a648d8b42a8e1f8b5465/html5/thumbnails/9.jpg)
ISSUES IN HTTP
Slow in multiple resources Periodically polling
hello!
“hello”
![Page 10: WebSocket protocol](https://reader034.fdocuments.us/reader034/viewer/2022042601/5555a648d8b42a8e1f8b5465/html5/thumbnails/10.jpg)
CURRENT PRACTICEFOR SOLVING ISSUES
Concurrent tcp connections Long Polling
“hello”
hello!
![Page 11: WebSocket protocol](https://reader034.fdocuments.us/reader034/viewer/2022042601/5555a648d8b42a8e1f8b5465/html5/thumbnails/11.jpg)
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 …
![Page 12: WebSocket protocol](https://reader034.fdocuments.us/reader034/viewer/2022042601/5555a648d8b42a8e1f8b5465/html5/thumbnails/12.jpg)
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.
![Page 13: WebSocket protocol](https://reader034.fdocuments.us/reader034/viewer/2022042601/5555a648d8b42a8e1f8b5465/html5/thumbnails/13.jpg)
WebSocket
PROTOCOL STACKS
TCP
TLS
Any protocols
SPDY (framing layer)
TCP
TLS
SPDY (HTTP layer)
SSBP will be applied here?
WebSocketSPDY
![Page 14: WebSocket protocol](https://reader034.fdocuments.us/reader034/viewer/2022042601/5555a648d8b42a8e1f8b5465/html5/thumbnails/14.jpg)
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 ))
![Page 15: WebSocket protocol](https://reader034.fdocuments.us/reader034/viewer/2022042601/5555a648d8b42a8e1f8b5465/html5/thumbnails/15.jpg)
TOPIC2:
Dive into WebSocket Protocol
http://www.flickr.com/photos/nektar/6085553520/sizes/z/in/photostream/
![Page 16: WebSocket protocol](https://reader034.fdocuments.us/reader034/viewer/2022042601/5555a648d8b42a8e1f8b5465/html5/thumbnails/16.jpg)
DEMO:MULTI DEVICEINTERACTION
WebIntents+
ServiceDiscovery (uPnP)
WebSocket
![Page 17: WebSocket protocol](https://reader034.fdocuments.us/reader034/viewer/2022042601/5555a648d8b42a8e1f8b5465/html5/thumbnails/17.jpg)
DEMO: COMPARATIVE TEST (WS VS HTTP)
http://refws.komasshu.info/echocompare.html
![Page 18: WebSocket protocol](https://reader034.fdocuments.us/reader034/viewer/2022042601/5555a648d8b42a8e1f8b5465/html5/thumbnails/18.jpg)
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.
![Page 19: WebSocket protocol](https://reader034.fdocuments.us/reader034/viewer/2022042601/5555a648d8b42a8e1f8b5465/html5/thumbnails/19.jpg)
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.
![Page 20: WebSocket protocol](https://reader034.fdocuments.us/reader034/viewer/2022042601/5555a648d8b42a8e1f8b5465/html5/thumbnails/20.jpg)
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)
![Page 21: WebSocket protocol](https://reader034.fdocuments.us/reader034/viewer/2022042601/5555a648d8b42a8e1f8b5465/html5/thumbnails/21.jpg)
SEQUENCE OVERVIEW
handshake
data transfer
closing
![Page 22: WebSocket protocol](https://reader034.fdocuments.us/reader034/viewer/2022042601/5555a648d8b42a8e1f8b5465/html5/thumbnails/22.jpg)
HANDSHAKEclient to server
server to client
![Page 23: WebSocket protocol](https://reader034.fdocuments.us/reader034/viewer/2022042601/5555a648d8b42a8e1f8b5465/html5/thumbnails/23.jpg)
DATA FRAMINGindicates text, binary, ping, pong, close ...
Payload data is masked with Masking-key (XOR base)(preventing Firewall Circumvention & Cache Poisoning)
![Page 24: WebSocket protocol](https://reader034.fdocuments.us/reader034/viewer/2022042601/5555a648d8b42a8e1f8b5465/html5/thumbnails/24.jpg)
WHAT FOR PING/PONG?
NATFireWall
LoadBalan
cer
Under no-traffic, intermediariesrelease session table
Known as “silent close”.
websocketconnection
![Page 25: WebSocket protocol](https://reader034.fdocuments.us/reader034/viewer/2022042601/5555a648d8b42a8e1f8b5465/html5/thumbnails/25.jpg)
WHAT FOR PING/PONG? [CONT]
NATFireWall
LoadBalan
cerwebsocketconnection
ping
pong
ping & pong is used to prevent silent close (Keep-alive)
![Page 26: WebSocket protocol](https://reader034.fdocuments.us/reader034/viewer/2022042601/5555a648d8b42a8e1f8b5465/html5/thumbnails/26.jpg)
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).
![Page 27: WebSocket protocol](https://reader034.fdocuments.us/reader034/viewer/2022042601/5555a648d8b42a8e1f8b5465/html5/thumbnails/27.jpg)
GETTING REACH ABILITY
proxyFireWall
LoadBalan
cerwebsocketconnection
Use WSS (prevent interruption)
Treat WS traffic as HTTP/1.1⇨ Data framing will blocked ;-(
![Page 28: WebSocket protocol](https://reader034.fdocuments.us/reader034/viewer/2022042601/5555a648d8b42a8e1f8b5465/html5/thumbnails/28.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
![Page 29: WebSocket protocol](https://reader034.fdocuments.us/reader034/viewer/2022042601/5555a648d8b42a8e1f8b5465/html5/thumbnails/29.jpg)
SUBPROTOCOL[CONT]
http://www.iana.org/assignments/websocket/websocket.xml
![Page 30: WebSocket protocol](https://reader034.fdocuments.us/reader034/viewer/2022042601/5555a648d8b42a8e1f8b5465/html5/thumbnails/30.jpg)
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
![Page 31: WebSocket protocol](https://reader034.fdocuments.us/reader034/viewer/2022042601/5555a648d8b42a8e1f8b5465/html5/thumbnails/31.jpg)
SOCKET.IO
Automatically fallback from WebSocket to Comet.
Automatic keep-alive, name space, ... very convenient!!
http://socket.io/
![Page 32: WebSocket protocol](https://reader034.fdocuments.us/reader034/viewer/2022042601/5555a648d8b42a8e1f8b5465/html5/thumbnails/32.jpg)
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)
![Page 33: WebSocket protocol](https://reader034.fdocuments.us/reader034/viewer/2022042601/5555a648d8b42a8e1f8b5465/html5/thumbnails/33.jpg)
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
![Page 34: WebSocket protocol](https://reader034.fdocuments.us/reader034/viewer/2022042601/5555a648d8b42a8e1f8b5465/html5/thumbnails/34.jpg)
THANK YOU!!
http://www.flickr.com/photos/23086934@N02/2250806050/