Demystifying WebSockets -- Real-Time Communication

2026-05-14·4 min readbackend

Learn how to build scalable, real-time features using WebSockets and Node.js.

Discover the power of WebSockets for real-time web applications. This guide covers the fundamentals, implementation details, and best practices for building scalable real-time features.

#websockets #nodejs #real-time #javascript #backend

Introduction In the early days of the web, communication was strictly unidirectional. A client would request a page, and the server would respond. If you wanted new data, you had to refresh the page or rely on clunky workarounds like long polling. Today, users expect instant updates, whether they are chatting with friends, watching live sports scores, or collaborating on a document. This is where WebSockets come into play. WebSockets provide a persistent, full-duplex communication channel over a single TCP connection. Unlike HTTP, which is stateless and requires a new connection for every request, WebSockets keep the connection open, allowing data to flow freely in both directions with minimal overhead. How WebSockets Work The WebSocket protocol begins its life as a standard HTTP request. The client sends an HTTP GET request to the server with an "Upgrade" header, signaling its desire to switch protocols. If the server supports WebSockets and agrees to the upgrade, it responds with an HTTP 101 Switching Protocols status code. Once the handshake is complete, the HTTP connection is replaced by the WebSocket connection. From this point forward, both the client and the server can send messages to each other at any time. This drastically reduces latency and bandwidth usage compared to traditional HTTP polling, making it ideal for high-frequency data exchange. Setting Up a WebSocket Server To demonstrate how easy it is to get started, we will build a simple WebSocket server using Node.js and the popular ws library. This server will listen for incoming connections and broadcast any received messages to all connected clients.

npm install ws

// server.js
const WebSocket = require('ws');
 
const wss = new WebSocket.Server({ port: 8080 });
 
wss.on('connection', function connection(ws) {
  console.log('A new client connected!');
 
  ws.on('message', function incoming(message) {
    console.log('received: %s', message);
    
    // Broadcast the message to all clients
    wss.clients.forEach(function each(client) {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message.toString());
      }
    });
  });
 
  ws.send('Welcome to the WebSocket server!');
});
 
console.log('WebSocket server is running on ws://localhost:8080');

In the code above, we initialize a new WebSocket server on port 8080. We listen for the connection event, which fires whenever a new client connects. Inside the connection handler, we set up a listener for incoming messages and broadcast them to all currently connected clients. We also send a welcome message to the newly connected client. Building the Client Connection Now that our server is running, we need a client to connect to it. The WebSocket API is built directly into all modern web browsers, so we do not need any external libraries to establish a connection from the frontend.

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket Client</title>
</head>
<body>
    <h1>WebSocket 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');
 
        ws.onopen = () => {
            console.log('Connected to the server');
        };
 
        ws.onmessage = (event) => {
            const messageElement = document.createElement('p');
            messageElement.textContent = event.data;
            messagesDiv.appendChild(messageElement);
        };
 
        function sendMessage() {
            const input = document.getElementById('messageInput');
            ws.send(input.value);
            input.value = '';
        }
    </script>
</body>
</html>

This simple HTML file creates a WebSocket connection to our local server. We define an onmessage event handler to append incoming messages to the DOM. The sendMessage function grabs the text from the input field and sends it to the server over the open WebSocket connection. Conclusion WebSockets have revolutionized the way we build interactive web applications. By providing a low-latency, bidirectional communication channel, they enable features that were previously impossible or highly inefficient to implement using standard HTTP requests. While WebSockets are incredibly powerful, they are not a silver bullet. For applications that require simple, infrequent updates, Server-Sent Events (SSE) or even traditional polling might still be appropriate. However, when real-time responsiveness is critical, WebSockets are the undisputed champion of the modern web.

Keep building, keep learning, and embrace the real-time web!

Related Blogs