Node.js Backend Development Bootcamp · Lesson

Implementing Socket.IO in Node.js

Integrate Socket.IO into your Express application to enable bi-directional, event-based communication.

Implementing Socket.IO in Node.js is a free Node.js Backend Development Bootcamp lesson on CoddyKit — lesson 3 of 6. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Node.js Backend Development Bootcamp learning path, one of 6 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Meet Socket.IO

In the previous lesson, we learned about WebSockets for real-time communication. While powerful, raw WebSockets can be complex to manage, especially with connection stability and fallback options.

This is where Socket.IO comes in! It's a library that enables real-time, bi-directional, and event-based communication between web clients and servers. It works on every platform, browser, and device, ensuring reliable connections.

Abstraction: Simplifies WebSocket API.
Reliability: Handles disconnections and re-connections.
Fallback: Uses HTTP long-polling if WebSockets aren't available.
Broadcasting: Easily send messages to multiple clients.

Project Setup

First, let's prepare our project. We'll need Node.js and npm installed. Open your terminal and create a new project folder.

Inside your new folder, initialize a Node.js project and then install the necessary packages: express for our web server and socket.io for real-time communication.

npm init -y
npm install express socket.io

Our Base: Express Server

Before integrating Socket.IO, let's set up a basic Express server. This server will handle our HTTP requests and also serve as the foundation for our real-time communication.

Create a file named server.js and add the following code. This sets up an Express app that listens on port 3000.

const express = require('express');
const http = require('http'); // Needed for Socket.IO

const app = express();
const server = http.createServer(app); // Create HTTP server
const PORT = 3000;

app.get('/', (req, res) => {
  res.send('<h1>Hello from Express!</h1>');
});

server.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Attach Socket.IO

Now, let's attach Socket.IO to our existing Express HTTP server. This allows Socket.IO to listen for WebSocket connections on the same port as our web server.

We import the socket.io library and pass our http server instance to it. This creates a Socket.IO server instance, conventionally named io.

const express = require('express');
const http = require('http');
const { Server } = require('socket.io'); // Import Server class

const app = express();
const server = http.createServer(app);
const io = new Server(server); // Attach Socket.IO to HTTP server

const PORT = 3000;

app.get('/', (req, res) => {
  res.send('<h1>Hello from Express!</h1>');
});

server.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Client Connection Events

The most fundamental event in Socket.IO is 'connection'. This event fires every time a new client successfully connects to the Socket.IO server.

Inside this event listener, you get a socket object, which represents the individual client. You can then listen for specific events from that client or send messages directly to it.

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = new Server(server);

const PORT = 3000;

// Listen for incoming connections
io.on('connection', (socket) => {
  console.log('A user connected:', socket.id);

  // Listen for disconnection
  socket.on('disconnect', () => {
    console.log('User disconnected:', socket.id);
  });
});

app.get('/', (req, res) => {
  res.send('<h1>Hello from Express!</h1>');
});

server.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Server Emits Events

The server can send (or 'emit') custom events to clients. To send a message to a specific client who just connected, we use socket.emit().

This method takes an event name (e.g., 'welcome') and any data you want to send along with it. The client will then listen for this specific event.

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = new Server(server);

const PORT = 3000;

io.on('connection', (socket) => {
  console.log('A user connected:', socket.id);
  
  // Send a 'welcome' event to the newly connected client
  socket.emit('welcome', `Welcome, your ID is ${socket.id}!`);

  socket.on('disconnect', () => {
    console.log('User disconnected:', socket.id);
  });
});

app.get('/', (req, res) => {
  res.send('<h1>Hello from Express!</h1>');
});

server.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Server Receives Events

Just as the server can emit events, it can also listen for events sent from clients. We use socket.on() for this, similar to how we listened for 'connection'.

When a client sends an event with a specific name, the corresponding server-side listener will execute, receiving any data the client sent.

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = new Server(server);

const PORT = 3000;

io.on('connection', (socket) => {
  console.log('A user connected:', socket.id);
  socket.emit('welcome', `Welcome, your ID is ${socket.id}!`);

  // Listen for a 'clientMessage' event from this specific client
  socket.on('clientMessage', (message) => {
    console.log(`Message from ${socket.id}: ${message}`);
  });

  socket.on('disconnect', () => {
    console.log('User disconnected:', socket.id);
  });
});

app.get('/', (req, res) => {
  res.send('<h1>Hello from Express!</h1>');
});

server.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Client-Side Interaction

To connect to our Socket.IO server, the client needs the Socket.IO client library. You can include it via a CDN or npm.

This HTML snippet shows a basic client that connects, listens for the 'welcome' event, and sends a 'clientMessage' event to the server. Save this as index.html.

<!DOCTYPE html>
<html>
<head>
  <title>Socket.IO Client</title>
  <script src="/socket.io/socket.io.js"></script>
</head>
<body>
  <h1>Socket.IO Client</h1>
  <p id="status">Connecting...</p>
  <button onclick="sendMessage()">Send Hello</button>
  <ul id="messages"></ul>

  <script>
    const socket = io('http://localhost:3000'); // Connect to your server

    socket.on('connect', () => {
      document.getElementById('status').innerText = 'Connected to server!';
      console.log('Connected to server!');
    });

    socket.on('welcome', (msg) => {
      const item = document.createElement('li');
      item.innerText = `Server: ${msg}`;
      document.getElementById('messages').appendChild(item);
      console.log('Received from server:', msg);
    });

    socket.on('disconnect', () => {
      document.getElementById('status').innerText = 'Disconnected.';
      console.log('Disconnected from server.');
    });

    function sendMessage() {
      const msg = 'Hello from client!';
      socket.emit('clientMessage', msg);
      const item = document.createElement('li');
      item.innerText = `Client: ${msg}`;
      document.getElementById('messages').appendChild(item);
    }
  </script>
</body>
</html>

Broadcasting Messages

Often, you need to send a message to *all* connected clients, not just the one that triggered an event. This is called broadcasting.

Instead of socket.emit(), which sends to a specific socket, we use io.emit() to send to everyone connected to the Socket.IO server.

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = new Server(server);

const PORT = 3000;

io.on('connection', (socket) => {
  console.log('A user connected:', socket.id);
  socket.emit('welcome', `Welcome, your ID is ${socket.id}!`);
  
  // Broadcast to all clients (except the sender) when a new user connects
  socket.broadcast.emit('user joined', `User ${socket.id} joined.`);

  socket.on('clientMessage', (message) => {
    console.log(`Message from ${socket.id}: ${message}`);
    // Broadcast the message to ALL connected clients
    io.emit('serverMessage', `[${socket.id}] ${message}`); 
  });

  socket.on('disconnect', () => {
    console.log('User disconnected:', socket.id);
    // Broadcast to all clients when a user disconnects
    io.emit('user left', `User ${socket.id} left.`);
  });
});

app.get('/', (req, res) => {
  res.send('<h1>Hello from Express!</h1>');
});

server.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Quick Check: Event Scope

You've seen how to send messages using both socket.emit() and io.emit(). Which method would you use to send a message to *all* connected clients?

Recap: Socket.IO Integration

Excellent work! In this lesson, you've learned to integrate Socket.IO into your Node.js Express application, enabling powerful real-time features.

Setup: Installed express and socket.io.
Server: Attached Socket.IO to an existing HTTP server.
Connections: Handled client 'connection' and 'disconnect' events.
Communication: Used socket.emit() to send to specific clients and io.emit() for broadcasting to all clients.
Listeners: Set up socket.on() to receive custom events from clients.

You now have the foundation to build interactive, real-time applications!

Frequently asked questions

Is the “Implementing Socket.IO in Node.js” lesson free?

Yes — the full text of “Implementing Socket.IO in Node.js” is free to read here on the web, and the Node.js Backend Development Bootcamp course includes 6 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Node.js Backend Development Bootcamp course, upgrade to CoddyKit PRO.

What will I learn in “Implementing Socket.IO in Node.js”?

Integrate Socket.IO into your Express application to enable bi-directional, event-based communication. You practise Node.js Backend Development Bootcamp with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Node.js Backend Development Bootcamp?

No prior experience is required. Node.js Backend Development Bootcamp on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 6, so you can start here or from the beginning and move at your own pace.

How long does the “Implementing Socket.IO in Node.js” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Node.js Backend Development Bootcamp lesson?

Yes. Every Node.js Backend Development Bootcamp lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Node.js Backend Development Bootcamp