Skip to content

How to build a real-time chat app with websocket

Image of the author

David Cojocaru @cojocaru-david

How to Build a Real-Time Chat App with WebSocket visual cover image

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:

Prerequisites: What You’ll Need

Before we begin, make sure you have the following:

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:

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:

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?