How to Build a Real-Time Chat Application with NodeJS and WebSockets

Introduction

In today’s digital world, real-time communication has become a key feature in many applications—from social media to customer support. One of the most popular use cases for real-time functionality is chat applications. With Node.js and WebSockets, you can build a real-time chat app that is fast, scalable, and responsive.

This article will guide you step-by-step through the process of building a real-time chat application using Node.js and the Socket.IO library, which simplifies WebSocket implementation.

What Are WebSockets?

WebSockets are a communication protocol that enables full-duplex (two-way) communication between a client and server over a single, long-lived TCP connection. Unlike traditional HTTP requests, WebSockets allow data to flow back and forth in real-time without constantly opening new connections.

Why Use Node.js and Socket.IO?

Node.js handles multiple connections with minimal resource consumption.
Socket.IO abstracts WebSocket connections, provides fallbacks for older browsers, and makes event-based communication easy.

Technologies Used

Node.js – Backend runtime environment
Express.js – Web framework for Node
Socket.IO – Real-time engine built on WebSockets
HTML/CSS/JavaScript – Frontend

Step-by-Step Guide

🛠️ 1. Set Up the Project

mkdir node-chat-app
cd node-chat-app
npm init -y
npm install express socket.io

📁 2. Project Structure

node-chat-app/
├── public/
│   ├── index.html
│   └── script.js
├── server.js

🧠 3. Create the Server (`server.js`)

const express = require('express');
const http = require('http');
const socketIO = require('socket.io');

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

// Serve static files
app.use(express.static('public'));

// Socket.IO connection
io.on('connection', (socket) => {
  console.log('A user connected');

  // Listen for chat messages
  socket.on('chat message', (msg) => {
    io.emit('chat message', msg); // broadcast to all clients
  });

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

// Start the server
server.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

🖥️ 4. Create Frontend (`public/index.html`)

<!DOCTYPE html>
<html>
  <head>
    <title>Chat App</title>
    <style>
      body { font-family: Arial; }
      #messages { list-style: none; padding: 0; }
      #messages li { padding: 5px 10px; }
      #form { display: flex; }
      #input { flex: 1; padding: 10px; }
    </style>
  </head>
  <body>
    <ul id="messages"></ul>
    <form id="form" action="">
      <input id="input" autocomplete="off" placeholder="Type a message..." />
      <button>Send</button>
    </form>

    <script src="/socket.io/socket.io.js"></script>
    <script src="script.js"></script>
  </body>
</html>

✨ 5. Add Frontend Logic (`public/script.js`)

const socket = io();

const form = document.getElementById('form');
const input = document.getElementById('input');
const messages = document.getElementById('messages');

form.addEventListener('submit', function(e) {
  e.preventDefault();
  if (input.value) {
    socket.emit('chat message', input.value);
    input.value = '';
  }
});

socket.on('chat message', function(msg) {
  const item = document.createElement('li');
  item.textContent = msg;
  messages.appendChild(item);
  window.scrollTo(0, document.body.scrollHeight);
});

✅ 6. Run the Application

node server.js

Open http://localhost:3000 in multiple tabs or browsers and start chatting!

Optional: Enhance with Features

Usernames: Let users choose a name before chatting
Rooms: Create multiple chat rooms
Timestamps: Add time to each message
Typing Indicators: Show when someone is typing
Message Persistence: Store chat logs in a database like MongoDB

Conclusion

With just a few lines of code, you can build a fully functional real-time chat app using Node.js and WebSockets via Socket.IO. This powerful stack is widely used in applications like Slack, WhatsApp Web, and online gaming platforms.

Real-time communication is no longer a luxury—it’s an expectation. By mastering WebSockets and Node.js, you can add this powerful functionality to your applications and elevate the user experience.

Happy Coding! 💬⚡

How to Build a Real-Time Chat Application with NodeJS and WebSockets