Open src/server.js and create the initial Express application.

Express will handle regular HTTP requests, such as loading the chat page and checking application health.

We will create an Express application and serve static frontend files from the public directory.

import 'dotenv/config';
import express from 'express';
import { createServer } from 'node:http';

const app = express();

app.use(express.json());
app.use(express.static('public'));

app.get('/health', (req, res) => {
  res.status(200).json({
    status: 'ok',
    message: 'Chat server is running'
  });
});

const httpServer = createServer(app);

const PORT = process.env.PORT || 3000;

httpServer.listen(PORT, () => {
  console.log(`Server running at http://localhost:${PORT}`);
});

One important detail is that Socket.IO must be attached to the HTTP server that handles your Express application.

A common beginner mistake is using app.listen() and then attempting to attach Socket.IO to another HTTP server.

Consider this incorrect implementation:

const app = express();
const io = new Server(createServer(app));

app.listen(3000);

This creates two separate HTTP servers:

1. The server created by createServer(app) is attached to Socket.IO.
2. The server created internally by app.listen() handles Express requests.

The Socket.IO server and the Express server are therefore not using the same HTTP server.

Instead, explicitly create one HTTP server and use it for both Express and Socket.IO.

import express from 'express';
import { createServer } from 'node:http';
import { Server } from 'socket.io';

const app = express();

const httpServer = createServer(app);

const io = new Server(httpServer);

httpServer.listen(3000);

Now integrate Socket.IO into the Express application.

Create src/config/socket.js.

The Socket.IO Server class accepts the Node.js HTTP server as its first argument.

It also accepts configuration options, such as allowed origins, transport settings, and connection timeouts.

For our initial same-origin application, we do not need to enable additional cross-origin access.

import { Server } from 'socket.io';

export function initializeSocket(httpServer) {
  const io = new Server(httpServer, {
    cors: {
      origin: false
    }
  });

  return io;
}

Import the Socket.IO initialization function into src/server.js.

Initialize Socket.IO using the HTTP server before starting the application.

The io instance will be used throughout the backend to emit events, manage rooms, and communicate with connected clients.

import 'dotenv/config';
import express from 'express';
import { createServer } from 'node:http';
import { initializeSocket } from './config/socket.js';

const app = express();

app.use(express.json());
app.use(express.static('public'));

app.get('/health', (req, res) => {
  res.json({ status: 'ok' });
});

const httpServer = createServer(app);

const io = initializeSocket(httpServer);

httpServer.listen(process.env.PORT || 3000, () => {
  console.log('HTTP and Socket.IO server started');
});

Socket.IO provides a connection event that fires whenever a client successfully establishes a connection.

The callback receives a socket object representing that particular client connection.

The socket object provides methods and properties for:

• Receiving events.
• Sending events.
• Joining rooms.
• Leaving rooms.
• Disconnecting clients.
• Accessing connection information.

Add a connection listener to the Socket.IO server.

io.on('connection', (socket) => {
  console.log('New client connected:', socket.id);

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

Start the application using the development script.

Run the following command from the project root:

npm run dev

You should see a message similar to:

HTTP and Socket.IO server started

Open the health endpoint in your browser:

http://localhost:3000/health

Expected response:

{
  "status": "ok"
}

At this point, the HTTP server and Socket.IO server are initialized. No browser client has connected yet, so the Socket.IO connection callback will not execute until we implement the frontend.

npm run dev