backend-basic-concepts

Websocket: Real-Time Communication for the Web

5 min read
#backend-basic-concepts

In this blog, we explore WebSockets, it allows two-way communication over the web. It improves on HTTP’s request-response model by enabling real-time updates, making it ideal for modern apps like chats and live feeds.

What Are WebSockets?

WebSockets enable full-duplex communication channels over a single TCP connection. Unlike traditional HTTP, which requires opening and closing connections for every request, WebSockets maintain a persistent connection, allowing both the server and client to send data anytime.

Why Not Use TCP Directly?

While TCP itself is bidirectional, exposing it directly to the web poses significant risks. Browsers and web platforms rely on HTTP as a protective layer. WebSockets, built on top of HTTP, leverage a special handshake mechanism to upgrade an HTTP connection to a WebSocket connection, ensuring security and compatibility.

The WebSocket Handshake

The WebSocket handshake is a process where an HTTP connection is upgraded to a WebSocket connection. This is achieved using a special HTTP GET request with additional headers.

How the Handshake Works

websocket-example

  1. Client Initiates the Request: The client sends an HTTP GET request to the server with headers like Upgrade: websocket and Connection: Upgrade to signal the intention to switch to a WebSocket protocol.

Client request example:

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Version: 13
  1. Server Validates the Request: The server checks the Sec-WebSocket-Key header, a random string sent by the client, and combines it with a predefined GUID. This combined string is hashed using SHA-1 and encoded in Base64. The resulting string is sent back in the Sec-WebSocket-Accept header to confirm the upgrade.

Server response example:

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
  1. Protocol Upgrade: If the server accepts the upgrade, it responds with a 101 Switching Protocols status code and completes the transition from HTTP to WebSocket.

The handshake ensures that both the client and server agree to establish a WebSocket connection, securing the communication channel.

Simple WebSocket Application

Here’s a basic example of a chat server using Node.js and the WebSocket library:

Server code

const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });

const connections = [];

server.on('connection', (ws) => {
    connections.push(ws);
    
    ws.on('message', (message) => {
        connections.forEach(conn => {
            if (conn !== ws && conn.readyState === WebSocket.OPEN) {
                conn.send(message);
            }
        });
    });

    ws.on('close', () => {
        const index = connections.indexOf(ws);
        if (index > -1) connections.splice(index, 1);
    });
});

The server code starts by importing the WebSocket library and initializing a server to listen on port 8080. To manage connections, an array named connections is used to store all active WebSocket connections. When a new client connects, the connection object (ws) is added to this array, ensuring the server can communicate with all connected clients.

When the server receives a message from one client, it iterates through the connections array and broadcasts the message to all other clients. This ensures that the sender does not receive their own message, while all other clients are updated. The server also listens for disconnections; when a client disconnects, their connection is removed from the connections array, preventing attempts to send messages to a closed connection.

Client code:

const ws = new WebSocket('ws://localhost:8080');

ws.onmessage = (event) => {
    console.log('Message received:', event.data);
};

ws.onopen = () => {
    ws.send('Hello, server!');
};

The client code begins by creating a WebSocket connection to the server using the URL ws://localhost:8080. This establishes a communication channel between the client and the WebSocket server. Once the connection is open, the onopen event is triggered, and the client sends an initial message, Hello, server!, to the server.

The client also listens for messages from the server using the onmessage event. Whenever the server sends a message, the client logs it to the browser console with the event data. This simple implementation allows the client to send messages to the server and receive updates from it in real time, showcasing the bidirectional communication capabilities of WebSockets.

Use Cases of WebSockets

  1. Chat Applications: Platforms like WhatsApp and Discord rely on WebSockets for real-time messaging.
  2. Live Feeds: Services like Twitch utilize WebSockets for instant updates.
  3. Multiplayer Gaming: Real-time interaction is key in gaming environments.
  4. Push Notifications: WebSockets enable instant updates without polling.

Challenges in implementing websocket

  1. Stateful Connections: Maintaining the state of connections is crucial in WebSockets. Both the server and client need to track the active connection to send and receive messages effectively. This adds complexity compared to stateless HTTP connections.

  2. Proxies: Handling WebSocket connections through layer 7 (application layer) proxies can be challenging because proxies may not fully support or understand WebSocket protocols. This can result in issues like connection drops or misrouting of WebSocket traffic.

  3. Connection Longevity: Routers or proxies may terminate WebSocket connections if they remain idle for too long. To prevent this, WebSockets use periodic “ping-pong” messages. These are lightweight packets exchanged between the client and server to keep the connection alive and avoid being prematurely closed by network intermediaries.

Conclusion

In conclusion, WebSockets provide a powerful solution for real-time, bidirectional communication between clients and servers. They offer lower latency and persistent connections, making them ideal for applications like live chats, real-time updates, and interactive features. As demand for real-time web experiences grows, WebSockets will continue to play a key role in modern web development.