Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Socket.IO

560 views

Published on

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

Published in: Technology
  • Be the first to comment

Socket.IO

  1. 1. Socket.IO @ Speck&Tech - 25.05.2016
  2. 2. Who am I? Davide Pedranz Student in Computer Science @ UniTN Software Developer @ FBK @davidepedranz
  3. 3. Specker Game http://tinyurl.com/speckers-game
  4. 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. 5. Adapted from: http://chimera.labs.oreilly.com/books/1230000000545/ch17.html Polling vs WebSockets Important event on the server side polling delay
  6. 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. 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. 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. 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. 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. 11. Demo The Specker Game

×