Socket.io integration with Express

Introduction

Socket.io lets your web app talk in real-time with users. Integrating it with Express helps you add live features like chat or notifications easily.

You want to build a chat app where messages appear instantly.

You need live updates on a dashboard without refreshing the page.

You want to notify users immediately when something changes.

You want multiplayer game interactions in real-time.

You want to track user activity live on your website.

Syntax

Express

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

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

io.on('connection', (socket) => {
  // handle socket events here
});

httpServer.listen(3000);

Use createServer from Node's http to combine Express and Socket.io.

Listen for connection events to handle new users joining.

Examples

This example logs when a user connects and listens for messages from that user.

Express

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

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

io.on('connection', (socket) => {
  console.log('User connected');
  socket.on('message', (msg) => {
    console.log('Message:', msg);
  });
});

httpServer.listen(3000);

Sends a welcome message to each user when they connect.

Express

io.on('connection', (socket) => {
  socket.emit('welcome', 'Hello from server!');
});

Broadcasts a chat message from one user to all connected users.

Express

io.on('connection', (socket) => {
  socket.on('chat message', (msg) => {
    io.emit('chat message', msg);
  });
});

Sample Program

This program sets up an Express server combined with Socket.io. It sends a welcome message to each user when they connect. It listens for chat messages and broadcasts them to all users. It also logs connections and disconnections.

Express

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

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

app.get('/', (req, res) => {
  res.send('<h1>Socket.io with Express</h1>');
});

io.on('connection', (socket) => {
  console.log('A user connected');
  socket.emit('welcome', 'Welcome to the server!');

  socket.on('chat message', (msg) => {
    console.log('Received message:', msg);
    io.emit('chat message', msg);
  });

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

httpServer.listen(3000, () => {
  console.log('Server listening on http://localhost:3000');
});

Important Notes

Always use the HTTP server created with createServer to attach Socket.io.

Socket.io uses events like connection, disconnect, and custom events you define.

Test your real-time features using multiple browser tabs or devices.

Summary

Socket.io adds real-time communication to your Express app.

Use Node's HTTP server to combine Express and Socket.io.

Listen and emit events to send and receive live data.