Getting started with socket.io

Download socket.io eBook

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

VersionRelease Date
1.4.82016-06-23
1.4.72016-06-23
1.4.62016-05-02
1.4.52016-01-26
1.4.42016-01-10
1.4.32016-01-08
1.4.22016-01-07
1.4.12016-01-07
1.4.02015-11-28
1.3.72015-09-21
1.3.62015-07-14
1.3.52015-03-03
1.3.42015-02-14
1.3.32015-02-03
1.3.22015-01-19
1.3.12015-01-19
1.3.02015-01-19
1.2.12014-11-21
1.2.02014-10-27
1.1.02014-09-04
1.0.62014-06-19
1.0.52014-06-16
1.0.42014-06-02
1.0.32014-05-31
1.0.22014-05-28
1.0.12014-05-28
1.0.02014-05-28

"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("http://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.

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.

Stats

302 Contributors: 7
Monday, September 12, 2016
Licensed under: CC-BY-SA

Not affiliated with Stack Overflow
Rip Tutorial: info@zzzprojects.com

Download eBook