063 Socket IO

14 Dec 2014

Socket IO is a framework based on Web Sockets that enables real-time communication with duplex connection over TCP. In this episode, we will play with the technology Web Socket and learn how to emit and receive events from a server or client. Finally, we will explore Socket IO as a framework to detect emit, send, disconnect and broadcast events to multiple clients and server.

Download video: mp4

Sample code: Github

Version: 1.2.1

##Background on Web Sockets

  1. Wikipedia

##1. create a simple ping pong

  1. open up the browser console and type WebSocket

    ```

     socket.onopen = function (event) {
       window.setInterval(function() {
         socket.send('ping from client: ' + new Date());
       }, 2000);
    
       socket.onmessage = function (event) {
         console.log(event.data);
       }
    
     };  </script>  ``` - create a file `server.js` with the following contents:
    

    ``` var WebSocketServer = require(‘ws’).Server var http = require(‘http’) var port = process.env.PORT || 5000

    var server = http.createServer() server.listen(port)

    console.log(‘http server listening on %d’, port)

    var wss = new WebSocketServer({server: server}) console.log(‘websocket server created’)

    wss.on(‘connection’, function(ws) { var id = setInterval(function() { var message = ‘ping from server: ‘ + new Date() ws.send(message, function() { }) }, 1000)

    console.log(‘websocket connection open’)

    ws.on(‘message’, function incoming(message) { console.log(message); });

    ws.on(‘close’, function() { console.log(‘websocket connection close’) clearInterval(id) }) }) ``` - start the node server with node server.js - open client.html in browser - watch the node and browser console ping pong with dates every 2 seconds

##2. A simple client-server with socket.io

  1. npm init to create package.json
    • npm install socket.io --save to install socket.io

###simple emit from server

  1. create file server.js to emit from server

    ``` var app = require(‘http’).createServer() var io = require(‘socket.io’)(app);

    app.listen(8000);

    io.on(‘connection’, function (socket) { socket.emit(‘alert’, ‘hello from the server :)’); }); ``` - create file client.html to catch event from server

    <script src="node_modules/socket.io/node_modules/socket.io-client/socket.io.js"></script> <script> var socket = io('http://localhost:8000'); socket.on('alert', function (data) { console.log(data); }); </script> - start the server with node server.js - open client.html in browser

###simple emit from server with random value

  1. edit file server.js to emit from server with random number

    ... io.on('connection', function (socket) { var alert = 'hello from the server :) ' + Math.random(); socket.emit('alert', alert); }); open client.html in 2 or 3 browser tabs

###simple emit from client

  1. edit file client.html

    ... socket.emit('click', 'ping from client \\o/'); ... - edit file server.js

    ... io.on('connection', function (socket) { ... socket.on('click', function (data) { console.log(data); }); }); - restart server with node server.js - open client.html in browser

###simple emit from client with random value

  1. edit file client.html

    ... var click = 'ping from client \\o/ ' + Math.random(); socket.emit('click', click); ... - restart server with node server.js - open client.html a few times

###register disconnect event

  1. edit file server.js

    ``` … io.on(‘connection’, function (socket) { …

    socket.on(‘disconnect’, function () { console.log(‘1 client disconnected’); }); }); ``` - restart server with node server.js - open client.html a few times and close them one by one - watch the server console

##3. broadcast

  1. npm init to create package.json
    • npm install socket.io --save to install socket.io
    • create a file client.html

    ```

    ``` - create a file server.js

    ``` var app = require(‘http’).createServer() var io = require(‘socket.io’)(app);

    app.listen(8000);

    io.on(‘connection’, function (socket) { var alert = ‘hello from the server :) ‘ + Math.random();

    socket.on(‘disconnect’, function () { console.log(‘1 client disconnected’); }); }); ``` - start server with node server.js - open the file client.html 4 times in the browser and click the button in ONE of them - edit file server.js

    ... socket.on('color', function () { socket.broadcast.emit('color', 'orange'); // broadcast to other clients }); ...

##More Resources on Socket IO

  1. more libraries

##Build Link of this episode

Read an RFC from the list:

  1. stackoverflow