Getting started with socket.io

Remarks#

Socket.IO is a javascript library for realtime web applications. It enables realtime, bi-directional communication between web clients and servers. It has two parts: a client-side library that runs in the browser, and a server-side library for node.js. Both components have a nearly identical API. Like node.js, it is event-driven.

Socket.IO primarily uses the websocket protocol with polling as a fallback option,while providing the same interface. Although it can be used as simply a wrapper for webSocket, it provides many more features, including broadcasting to multiple sockets, storing data associated with each client, and asynchronous I/O.

Versions#

Version	Release Date
1.4.8	2016-06-23
1.4.7	2016-06-23
1.4.6	2016-05-02
1.4.5	2016-01-26
1.4.4	2016-01-10
1.4.3	2016-01-08
1.4.2	2016-01-07
1.4.1	2016-01-07
1.4.0	2015-11-28
1.3.7	2015-09-21
1.3.6	2015-07-14
1.3.5	2015-03-03
1.3.4	2015-02-14
1.3.3	2015-02-03
1.3.2	2015-01-19
1.3.1	2015-01-19
1.3.0	2015-01-19
1.2.1	2014-11-21
1.2.0	2014-10-27
1.1.0	2014-09-04
1.0.6	2014-06-19
1.0.5	2014-06-16
1.0.4	2014-06-02
1.0.3	2014-05-31
1.0.2	2014-05-28
1.0.1	2014-05-28
1.0.0	2014-05-28

Installation or Setup

First, install socket.io module in node.js application.

npm install socket.io --save

Basic HTTP Setup

The following example attaches socket.io to a plain node.js HTTP server listening on port 3000.

var server = require('http').createServer();

var io = require('socket.io')(server);

io.on('connection', function(socket){

  console.log('user connected with socketId '+socket.id);

  socket.on('event', function(data){
      console.log('event fired');
  });

  socket.on('disconnect', function(){
      console.log('user disconnected');
  });

});

server.listen(3000);

Setup with Express

Express app can be passed to http server which will be attached to socket.io.

var app = require('express')();                   //express app
var server = require('http').createServer(app);   //passed to http server
var io = require('socket.io')(server);            //http server passed to socket.io

io.on('connection', function(){

  console.log('user connected with socketId '+socket.id);

  socket.on('event', function(data){
      console.log('event fired');
  });

  socket.on('disconnect', function(){
      console.log('user disconnected');
  });

});

server.listen(3000);

Client Side Setup

Check the Hello World example above for the client side implementation.

“Hello world!” with socket messages.

Install node modules

npm install express
npm install socket.io

Node.js server

const express = require('express'); 
const app = express();
const server = app.listen(3000,console.log("Socket.io Hello Wolrd server started!"));
const io = require('socket.io')(server);

io.on('connection', (socket) => {
    //console.log("Client connected!");
    socket.on('message-from-client-to-server', (msg) => {
        console.log(msg);
    })
    socket.emit('message-from-server-to-client', 'Hello World!');
});

Browser client

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Hello World with Socket.io</title>
  </head>
  <body>
    <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
    <script>
      var socket = io("https://localhost:3000");
      socket.on("message-from-server-to-client", function(msg) {
          document.getElementById('message').innerHTML = msg;
      });
      socket.emit('message-from-client-to-server', 'Hello World!');
    </script>
    <p>Socker.io Hello World client started!</p>
    <p id="message"></p>
  </body>
</html>

In the above example, the path to the socket.io library is defined as /socket.io/socket.io.js.

Even though we didn’t write any code to serve the socket.io library, Socket.io automatically does that.