What is Socket.IO?

Socket.IO is a library that enables real-time, bidirectional and event-based communication between the browser and the server. The bidirectional channel between the Socket.IO server and the Socket.IO client is established with a WebSocket connection whenever possible. The connection will fallback to HTTP long-polling if a WebSocket connection is not established. This library acts as a wrapper around the WebSocket API.

In this article, I will walk you through creating a simple express server that implements the Web Socket transport protocol. I assume you have Node JS and npm installed if not follow the links for the installation guide.

What socket.io really does is create an instant of socket.io server that can connect to socket.io client.

Server side

1. Initiate a Node Project

Create an empty project directory

mkdir server
cd server

Initiate the project with npm

$npm init -y

This creates a package.json file with all the project details in it. The -y flag sets all the properties inside package.json to the default.

2. Install dependencies

npm install express socket.io

Creates a package-lock.json that saves the exact version of your dependency tree.

3. Create a HTTP server

Create a server.js file inside your project directory.

Import express and instantiate an express instance

const app = require("express")();

Instantiate a httpServer with the express instance as a request function handler

const httpServer = require("http").createServer(app);

Respond to requests and listen on localhost:4200

app.get("/", (req, res) => {
  res.sendFile(__dirname + "/public/index.html");
});

httpServer.listen(4200, () => {
  console.log("Listening on http://localhost:4200");
});

server/server.js

const app = require("express")();
const server = require("http").createServer(app);

app.get("/", (req, res) => {
  res.sendFile(__dirname + "/public/index.html");
});

server.listen(4200, () => {
  console.log("Listening on http://localhost:4200");
});

4. Switching to Websockets.

We now

Import socket.io

const { Server } = require("socket.io");

Instantiate socket.io and pass the httpServer instant on to the socket.io instant.

const io = new Server(httpServer)

Establish a connection with socket.io client

io.on("connection", () => {
    console.log("A user has been connected");
});

Client side

5. Establish connection with a socket.io server.

First, we need to respond to the client's request by sending an index.html in the public folder.
Inside the index.html, we can import a socket.io client script and instantiate it. This will open a web socket connection to the server.

<!DOCTYPE html>
<html>
  <head>
    <title>Socket.IO</title>
  </head>
  <body>
    <h1>Socket Connection</h1>
    <script src="/socket.io/socket.io.js"></script>
    <script>
      var socket = io();
    </script>
  </body>
</html>

The server will log out that a user has been connected.

Further more

This is just a basic beginner introduction to socket.io. More in the documentation . I will be diving into events on my next article. Stay tuned. Thanks for taking time to read this. Have a productive day.

Simple Express server using Socket IO

Real-time communication between your browser and the server.