Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
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.
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
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/
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)
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
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