Socket.IO presentation @ Speck&Tech - 25.05.2016 http://speckand.tech/

1. Socket.IO
@ Speck&Tech - 25.05.2016

2. Who am I?
Davide Pedranz
Student in Computer Science @ UniTN
Software Developer @ FBK
@davidepedranz

3. Specker
Game
http://tinyurl.com/speckers-game

4. WebSockets
What?
● A persistent connection between the client and the server
● Both parties can start sending data at any time
Why?
● Low-latency communication
● Bi-directional communication
● Performances

5. Adapted from: http://chimera.labs.oreilly.com/books/1230000000545/ch17.html
Polling vs WebSockets
Important event on
the server side
polling
delay

6. Polling vs WebSockets
Polling WebSockets
Connections multiple single
Communication client-to-server bi-directional
Latency high low
Cost high, both for server and client low

7. Socket.IO
What?
● Realtime application framework
● Wrapper around Websockets (browser + Node.js)
● Send events between the client and the server
Why?
● Fallback for old browsers (IE8+)
● JavaScript, Android, iOS clients
● Trivial APIs

8. Setup
Server side: Client side:
user ~ $ npm install --save socket.io
// import socket.io
const socket = require('socket.io');
// attach socket.io an http server
var io = socket().listen(httpServer);
// listen for connections
io.on('connect', function (socket) {
// listen for events
socket.on(‘event’, function (data) {
// reply to events
io.emit(‘other-event’, data);
});
};
<!-- include socket.io -->
<script src="/socket.io/socket.io.js"></script>
// create socket.io instance
var socket = io();
// connected to the server
socket.on('event', function (msg) {
console.log(msg);
});

9. Server API
Server:
● io.on(‘connection’, callback(socket)) - new connected client
Socket:
● socket.on(event, callback(data)) - attach a new listener for the given event
● socket.emit(event, data) - send the event to this client
● socket.broadcast.emit(event, data) - send the event to all clients

10. Client API
Socket
● socket.on(event, callback(data)) - attach a new listener for the given event
● socket.emit(event, data) - send the event to the server
… yes, that’s it!

11. Demo
The Specker Game