How to build a real-time chat app with websocket

build real time chat with websocket
April 11, 2025
6 min read
By Cojocaru David & ChatGPT

Table of Contents

This is a list of all the sections in this post. Click on any of them to jump to that section.

index

Build a Real-Time Chat App with WebSockets: A Step-by-Step Guide

Want to create a dynamic and engaging user experience? Real-time chat is the answer! This guide will walk you through building a real-time chat application with WebSockets, a powerful technology that enables instant communication. Forget constant refreshing – WebSockets provide a persistent, two-way connection, allowing for seamless messaging.

In this tutorial, we’ll cover everything from setting up your development environment to deploying your finished application. Get ready to build a fully functional chat app from scratch!

Why Choose WebSockets for Real-Time Chat?

WebSockets are the preferred choice for real-time applications because they minimize latency and maximize efficiency. Unlike traditional HTTP, which relies on repeated requests (polling), WebSockets establish a continuous connection, facilitating instant data exchange. Here’s why they’re ideal for chat:

  • Unmatched Speed: Messages are delivered virtually instantaneously, providing a truly real-time experience.
  • Optimized Performance: WebSockets reduce unnecessary network overhead by maintaining a single, persistent connection.
  • Bidirectional Communication: Both the server and client can send data at any time, enabling a dynamic and interactive chat environment.
  • Reduced Server Load: Compared to polling, WebSockets significantly reduce the load on your server.

Prerequisites: What You’ll Need

Before we begin, make sure you have the following:

  • Fundamental JavaScript Knowledge: (Including Node.js concepts for the backend)
  • A Code Editor: We recommend Visual Studio Code (VS Code).
  • Node.js and npm (or yarn) Installed: Download the latest version from the official Node.js website.
  • A Modern Web Browser: Chrome, Firefox, or Safari will work perfectly for testing.

Step 1: Setting Up Your WebSocket Server (Backend)

The server is the heart of our chat application. It manages WebSocket connections and broadcasts messages to all connected clients. We’ll use Node.js and the ws library, a popular and lightweight WebSocket implementation.

First, create a new Node.js project and install the ws library:

npm init -y
npm install ws

Next, create a file named server.js and paste the following code:

const WebSocket = require("ws");
 
const wss = new WebSocket.Server({ port: 8080 });
 
wss.on("connection", (ws) => {
  console.log("Client connected");
 
  ws.on("message", (message) => {
    console.log(`Received: ${message}`);
 
    wss.clients.forEach((client) => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
 
  ws.on("close", () => {
    console.log("Client disconnected");
  });
 
  ws.on("error", (error) => {
    console.log(`WebSocket error: ${error}`);
  });
});
 
console.log("WebSocket server started on port 8080");

This code initializes a WebSocket server on port 8080, listens for new connections, and broadcasts received messages to all other connected clients. It also includes basic error handling for robustness. To run the server, use the command node server.js in your terminal.

Step 2: Building the Frontend Chat Interface (Client-Side)

Now, let’s build the user interface that will connect to our WebSocket server. Create an HTML file (e.g., index.html) with the following code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Real-Time Chat App</title>
    <style>
      #messages {
        border: 1px solid #ccc;
        padding: 10px;
        margin-bottom: 10px;
        height: 200px;
        overflow-y: scroll;
      }
    </style>
  </head>
  <body>
    <h1>Real-Time Chat</h1>
    <div id="messages"></div>
    <input type="text" id="messageInput" placeholder="Type a message..." />
    <button onclick="sendMessage()">Send</button>
 
    <script>
      const ws = new WebSocket("ws://localhost:8080");
      const messagesDiv = document.getElementById("messages");
      const messageInput = document.getElementById("messageInput");
 
      ws.onmessage = (event) => {
        const messageElement = document.createElement("div");
        messageElement.textContent = event.data;
        messagesDiv.appendChild(messageElement);
        messagesDiv.scrollTop = messagesDiv.scrollHeight; // Auto-scroll to bottom
      };
 
      ws.onopen = () => {
        console.log("Connected to WebSocket server");
      };
 
      ws.onclose = () => {
        console.log("Disconnected from WebSocket server");
      };
 
      ws.onerror = (error) => {
        console.error("WebSocket error:", error);
      };
 
      function sendMessage() {
        const message = messageInput.value;
        ws.send(message);
        messageInput.value = "";
      }
    </script>
  </body>
</html>

This code creates a simple chat interface with a message display area, an input field, and a send button. The JavaScript code connects to the WebSocket server, listens for incoming messages, and sends messages entered by the user. Basic styling is added to improve readability and a scroll-to-bottom feature ensures the latest messages are always visible. Error handling and connection status messages have also been added.

Open index.html in your browser. You should now be able to send and receive messages in real-time! Open the page in multiple browser windows or tabs to simulate multiple users.

Step 3: Taking Your Chat App to the Next Level

Want to add more features and functionality? Consider these enhancements:

  • User Authentication: Implement a login system to identify users with unique usernames.
  • Message Persistence: Store messages in a database (e.g., MongoDB, PostgreSQL) to maintain chat history.
  • Emoji Support: Integrate an emoji picker to allow users to express themselves visually.
  • Typing Indicators: Display a “user is typing…” message to enhance the real-time feel.
  • Private Messaging: Allow users to send direct messages to each other.
  • Rooms/Channels: Organize conversations into different rooms or channels.

Step 4: Deploying Your Real-Time Chat Application

Ready to share your creation with the world? Deploy your WebSocket server and frontend to a platform that supports WebSockets. Popular options include:

  • Heroku: A platform-as-a-service (PaaS) with excellent WebSocket support.
  • AWS EC2: A virtual server in the cloud that gives you full control over your environment.
  • DigitalOcean Droplets: Another virtual server option that is easy to set up and manage.
  • Render: A unified platform to build and run all your apps and websites with free TLS certificates, global CDN, private networks and auto deploys from Git.

Make sure your chosen hosting provider fully supports persistent WebSocket connections. You may need to configure your server and firewall to allow WebSocket traffic.

Conclusion

Congratulations! You’ve successfully built a real-time chat application using WebSockets. By following this guide, you’ve gained valuable experience with real-time communication technologies and learned how to create engaging user experiences. WebSockets unlock a world of possibilities, and this is just the beginning!

“Real-time communication is no longer a luxury; it’s an expectation. WebSockets empower you to meet that expectation effortlessly.”

Now, experiment, innovate, and build something amazing! What features will you add to your chat app next?