Wim GoddenCu.be Solutions@wimgtr
Building interactivity with WebSockets
Who am I ?
Wim Godden (@wimgtr)
Where I'm from
Where I'm from
Where I'm from
Where I'm from
Where I'm from
Where I'm from
My town
My town
Belgium the traffic
Who am I ?
Wim Godden (@wimgtr)
Founder of Cu.be Solutions (http://cu.be)
Open Source developer since 1997
Developer of PHPCompatibility, OpenX, Nginx SLIC, ...
Speaker at PHP and Open Source conferences
Who are you ?
Developers ?
System engineers ?
Experience with websockets ?
OLD : Show content, wait for user to click link or button
vs
NEW : Show content + send user real-time updates
Real-time = key to keep users on your platform
The original implementation : refresh
Client
Server
GET /some-page
Page contents
GET /some-page
GET /some-page
GET /some-page
60
30
0
90
Time
Page contents
Page contents
Page contents
The first real-time implementation : AJAX polling
Client
Server
GET /updates
{status:0}
GET /updates
GET /updates
{status:1, ...}
GET /updates
3
2
1
4
Time
{status:0}
{status:0}
New data arrives
Long polling
Client
Server
GET /updates
GET /updates
3
2
1
4
Time
{status:1, ...}
New data arrives
SSE (Server Sent Events)
Client
Server
GET /updates
3
2
1
4
Time
{status:1, ...}
New data arrives
{status:6, ...}
New data arrives
{status:1500, ...}
New data arrives
WebSockets
Client
Server
Initiate and upgrade connection
3
2
1
4
Time
New data arrives
New data arrives
New data arrives
New data arrives
WebSockets - Handshake
Client
Server
GET
GET /chat-client HTTP/1.1Host: yourhost.comUpgrade:
websocketConnection: upgradeOrigin:
http://yourhost.comSec-Websocket-Key:
c29tZXRoaW5nIHJhbmRvbQ==Sec-Websocket-Protocol:
chatSec-Websocket-Version: 13
HTTP/1.1 101 Switching ProtocolsUpgrade: websocketConnection:
upgradeSec-Websocket-Accept:
cmFuZG9tIGFnYV0aGluZw==Sec-Websocket-Protocol: chat
WebSockets - (sub)protocols
Must be supported by client and server
Several existWAMP (provides PubSub)
STOMP (provides messaging)
Can be application specific (custom)
WebSockets Events & Methods
EventsOpen
Close
Message
Error
Methodssend()
close()
WebSockets
First draft : 2007Accepted as RFC6455 : December 2011
Browser supportIE 10+
Chrome 16+
Safari 5+
Firefox 11+
Opera 12+
Android browser 4.4+
Opera Mini not yet supported
Use socket.io for automatic fallback
Uses
Synchronization of data between users
Multiplayer HTML5 games
Live feeds
Auctions
Real-time updates on running processes
Financial applications
Messaging / chat
Advantages
Full-duplex messaging
100% asynchronous
HTTP overhead only on initial handshake
Low latency
Low bandwidth
Messages can be fragmentedSent partially (when message is not
complete yet)
Sent in-between other messages
Disadvantages
No caching (unlike XHR/HTTP)
Some application changes required
No message acknowledgment built-in
Ping-pong (present in RFC) not in most browsersWrite your
own
Use socket.io
Client code
Sending information
Checking if WebSocket support is enabled
if (window.WebSocket) { console.log("BROWSER SUPPORTED");} else
{ console.log("BROWSER NOT SUPPORTED");}
Server-side Code
Time for a nice demo ;-)
Security
Always use TLS (wss:// instead of ws://)
Verify the Origin header
Pass along a random token to the handshake request
Some minor tips and tricks
If you proxy WebSocket traffic through nginx :
HAProxy :
Interesting read : https://hpbn.co/websocket/
location /websocket { proxy_pass http://backend;
proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade"; proxy_read_timeout 3600;
proxy_send_timeout 3600; }
defaults http timeout connect 30s timeout client 30s timeout
server 30s timeout tunnel 1h
Useful tools
Chrome developer console
Firefox add-on : WebSockets Monitor
Thor (benchmark) - https://github.com/observing/thor
Websocket-bench - https://github.com/M6Web/websocket-bench
Socket.io (for backward compatibility)
SockJS (for backward compatibility)
Questions ?
Questions ?
Contact
Twitter @wimgtr
Slides http://www.slideshare.net/wimg
E-mail [email protected]
Thanks !
