How to create chat app with express

ExpressHow-ToBeginner · 4 min read

How to Create a Chat App with Express: Simple Guide

To create a chat app with Express, set up an Express server and use Socket.IO for real-time communication between clients. This allows users to send and receive messages instantly through web sockets.

📐

Syntax

Here is the basic syntax to create an Express server with Socket.IO for a chat app:

express(): Creates the Express app.
http.createServer(): Creates an HTTP server to use with Socket.IO.
new Server(): Initializes Socket.IO on the HTTP server.
io.on('connection'): Listens for new client connections.
socket.on('chat message'): Listens for chat messages from clients.
io.emit(): Sends messages to all connected clients.

javascript

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) => {
  socket.on('chat message', (msg) => {
    io.emit('chat message', msg);
  });
});

httpServer.listen(3000);

💻

Example

This example shows a complete chat app using Express and Socket.IO. It serves a simple HTML page where users can send messages that appear to all connected users in real time.

javascript

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

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

app.get('/', (req, res) => {
  res.sendFile(path.join(process.cwd(), 'index.html'));
});

io.on('connection', (socket) => {
  console.log('User connected');
  socket.on('chat 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');
});

// index.html content:
// <!DOCTYPE html>
// <html lang="en">
// <head>
//   <meta charset="UTF-8" />
//   <meta name="viewport" content="width=device-width, initial-scale=1" />
//   <title>Chat App</title>
//   <style>
//     body { font-family: Arial, sans-serif; margin: 20px; }
//     #messages { list-style: none; padding: 0; max-height: 300px; overflow-y: auto; border: 1px solid #ccc; margin-bottom: 10px; }
//     #messages li { padding: 5px 10px; border-bottom: 1px solid #eee; }
//     form { display: flex; }
//     input { flex: 1; padding: 10px; font-size: 1rem; }
//     button { padding: 10px; font-size: 1rem; }
//   </style>
// </head>
// <body>
//   <ul id="messages"></ul>
//   <form id="form">
//     <input id="input" autocomplete="off" placeholder="Type a message..." />
//     <button>Send</button>
//   </form>
//   <script src="/socket.io/socket.io.js"></script>
//   <script>
//     const socket = io();
//     const form = document.getElementById('form');
//     const input = document.getElementById('input');
//     const messages = document.getElementById('messages');
//
//     form.addEventListener('submit', (e) => {
//       e.preventDefault();
//       if (input.value) {
//         socket.emit('chat message', input.value);
//         input.value = '';
//       }
//     });
//
//     socket.on('chat message', (msg) => {
//       const item = document.createElement('li');
//       item.textContent = msg;
//       messages.appendChild(item);
//       messages.scrollTop = messages.scrollHeight;
//     });
//   </script>
// </body>
// </html>

Output

Server listening on http://localhost:3000 User connected User disconnected

⚠️

Common Pitfalls

Common mistakes when creating a chat app with Express and Socket.IO include:

Not creating the HTTP server separately and passing it to Socket.IO, which causes Socket.IO not to work.
Forgetting to serve the socket.io.js client script, so the client cannot connect.
Not handling client disconnects, which can cause stale connections.
Emitting messages only to the sender instead of all clients.

javascript

/* Wrong: Using app.listen() directly with Socket.IO */
import express from 'express';
import { Server } from 'socket.io';

const app = express();
const io = new Server(app.listen(3000)); // This works but is less flexible

io.on('connection', (socket) => {
  socket.on('chat message', (msg) => {
    socket.emit('chat message', msg); // Sends only to sender
  });
});

/* Right: Create HTTP server and pass to Socket.IO */
import { createServer } from 'http';

const httpServer = createServer(app);
const ioCorrect = new Server(httpServer);

ioCorrect.on('connection', (socket) => {
  socket.on('chat message', (msg) => {
    ioCorrect.emit('chat message', msg); // Sends to all clients
  });
});

httpServer.listen(3000);

📊

Quick Reference

Tips for building chat apps with Express and Socket.IO:

Always create an HTTP server with createServer() and pass it to Socket.IO.
Use io.emit() to broadcast messages to all connected clients.
Serve the client HTML and include /socket.io/socket.io.js script for client connection.
Handle client disconnect events to manage user sessions.
Keep UI simple and update messages dynamically for better user experience.

✅

Key Takeaways

Use Express with an HTTP server and Socket.IO for real-time chat functionality.

Broadcast messages to all clients using io.emit() inside the connection handler.

Serve a simple HTML page with the Socket.IO client script to enable chat UI.

Handle client connections and disconnections to maintain chat state.

Avoid common mistakes like not creating a separate HTTP server or emitting messages only to the sender.