This document discusses real-time communication techniques like websockets and compares them to traditional polling. It explains that websockets provide full-duplex, low latency connections supported by modern browsers. Websockets can be used for chat, social feeds, and collaborative editing. The document also provides code samples for setting up websocket servers with Node.js and Socket.io. It discusses challenges like statefulness, scalability, and broadcasting to multiple clients.

1. HACKING WEBSOCKETS
FOR FUN AND PROFIT
@tomekcejner 2015 / SmartRecruiters Inc.

2. WHAT
REALTIME COMMUNICATION
FULL DUPLEX
LOW LATENCY

3. FOR
SOCIAL FEEDS
CHAT
COMMON EDITING
MONITORING

4. COMPARING TECHNIQUES
BROWSER SERVER

5. POLLING
BROWSER SERVER
EVENT
EVENT

6. POLLING
SIMPLE ALWAYS WORKS
HIGH TRAFFIC
HIGH LATENCY

7. LONG POLLING
BROWSER SERVER
EVENT

8. LONG POLLING
NEAR-REALTIME
VERY LONG REQUESTS
WILL BLOCK THREADS
NEEDS STICKY LOADBALANCING

9. STREAMING
BROWSER SERVER
EVENT
EVENT
RESPONSE PART
RESPONSE PART

10. STREAMING
NEAR REALTIME
BUFFERING PROXY WILL RUIN

11. WEBSOCKETS
BROWSER SERVER
EVENT
EVENT
UPGRADE

12. WEBSOCKETS
REALTIME
DUPLEX
SUPPORTED BY LATEST BROWSERS
MAY BE BROKEN BY SOME PROXIES

13. CAN I USE?
http://caniuse.com/#feat=websockets

14. WEBSOCKETS API

15. var socket = new WebSocket('ws://game.example.com:12010/updates');
socket.onopen = function () {
setInterval(function() {
if (socket.bufferedAmount == 0)
socket.send(getUpdateData());
}, 50);
};

16. EMITTING MESSAGES
SEND TEXT OR BINARY FRAME
LOW OVERHEAD: 2 BYTES PER FRAME

17. TEXT FRAME
0x81 0x05 0x48 0x65 0x6c 0x6c 0x6f
H e l l o

19. JAVASCRIPT WEBSOCKETS
FRAMEWORK
CLIENT WITH FALLBACKS
NODE.JS SERVER

20. CODE
var app = require('express')();
var server = require('http').Server(app);
var io = require('socket.io')(server);
server.listen(80);
app.get('/', function (req, res) {
res.sendfile(__dirname + '/index.html');
});
io.on('connection', function (socket) {
socket.emit('news', { hello: 'world' });
socket.on('my other event', function (data) {
console.log(data);
});
});
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect('http://localhost');
socket.on('news', function (data) {
console.log(data);
socket.emit('my other event', { my: 'data' });
});
</script>
CLIENTSERVER

21. CHALLENGES
STATEFULNESS
SCALABILITY
BROADCASTING

22. BROADCASTING
io.on('connection', function(socket){
socket.join('some room');
});
io.to('some room').emit('some event'):
io.on('connection', function(socket){
socket.on('say to someone', function(id, msg){
socket.broadcast.to(id).emit('my message', msg);
});
});

23. MULTIPLE NODES
Node A
CLIENT 1
CLIENT 2
Node B
CLIENT 3
CLIENT 4
?

24. SCALING
https://github.com/socketio/socket.io-redis

25. RESOURCES
http://socket.io
Socket.IO Swift client
https://github.com/socketio/socket.io-client-swift
Benefits of Web Sockets
https://www.websocket.org/quantum.html
Web Sockets API
http://dev.w3.org/html5/websockets/
Web Sockets RFC
https://tools.ietf.org/html/rfc6455
Difference between polling, long polling and web sockets explained:
http://stackoverflow.com/questions/10028770/html5-websocket-vs-long-polling-vs-ajax-
vs-webrtc-vs-server-sent-events
http://stackoverflow.com/questions/11077857/what-are-long-polling-websockets-server-
sent-events-sse-and-comet

26. THANK YOU
That’s all

27. BONUS CONTENT

28. TRACKING USERS IN REDS
SADD mob:online:7501234 55e83ebae4b00f589364debd
SISMEMBER mob:online:7501234 55e83ebae4b00f589364debd
SMEMBERS mob:online:7501234