What Is a WebSocket and How Does It Differ from HTTP?

The HTTP Request-Response Model

HTTP; the protocol that powers the web follows a simple pattern. A client sends a request. The server sends a response. The connection closes. Every interaction starts fresh. The server has no way to reach out to the client unless the client asks first.

This works perfectly for most of what the web does: loading a page, submitting a form, fetching data from an API, uploading a file. The client is always the initiator, the server always responds, and neither side needs to stay connected in between.

But some applications need something fundamentally different. A chat message does not wait for you to refresh the page. A stock price update does not need you to ask for it. A collaborative document edit from a remote user should appear on your screen immediately. In all of these cases, the server needs to push data to the client without waiting for a request. HTTP alone cannot do this cleanly.

What Is WebSocket?

WebSocket is a communication protocol that provides a persistent, full-duplex channel between a client and a server over a single TCP connection. Once the connection is established, both sides can send messages to each other at any time without either side having to wait for the other.

It is standardised in RFC 6455 and supported natively in every modern browser via the WebSocket JavaScript API, as well as in server-side environments through libraries in every major language; Node.js, Python, Go, Java, and others.

How a WebSocket Connection Works

A WebSocket connection starts as a regular HTTP request. The client sends a special HTTP upgrade request to the server asking to switch protocols. If the server supports WebSocket, it agrees and the connection is upgraded. From that point on, the TCP connection stays open and both sides communicate using the WebSocket protocol instead of HTTP.

Because the connection starts as HTTP, WebSocket works through standard firewalls, proxies, and load balancers that allow HTTP traffic. It uses the same port 80 (or 443 for secure connections). The URL scheme uses ws:// for unencrypted and wss:// for encrypted connections, analogous to http:// and https://.

HTTP vs WebSocket: A Direct Comparison

When to Use HTTP and When to Use WebSocket

The two protocols are not competitors. They solve different problems and most applications use both. HTTP handles the bulk of the work. WebSocket handles the parts that need to be live.

WebSocket in Code

The browser's native WebSocket API is straightforward. Here is a minimal example of a client connecting to a WebSocket server and exchanging messages.

Browser client (JavaScript)

// Connect to a WebSocket server
const socket = new WebSocket('wss://example.localto.net');

// Connection opened
socket.addEventListener('open', () => {
    console.log('Connected');
    socket.send(JSON.stringify({ type: 'hello', message: 'Hi from the browser' }));
});

// Receive messages from the server
socket.addEventListener('message', (event) => {
    const data = JSON.parse(event.data);
    console.log('Message from server:', data);
});

// Handle disconnection
socket.addEventListener('close', () => {
    console.log('Connection closed');
});

// Send a message at any time
function sendMessage(text) {
    if (socket.readyState === WebSocket.OPEN) {
        socket.send(JSON.stringify({ type: 'message', text }));
    }
}

Server (Node.js with the ws library)

npm install ws

// server.js
const { WebSocketServer } = require('ws');

const wss = new WebSocketServer({ port: 8080 });

wss.on('connection', (socket) => {
    console.log('Client connected');

    socket.on('message', (data) => {
        const message = JSON.parse(data);
        console.log('Received:', message);

        // Broadcast to all connected clients
        wss.clients.forEach((client) => {
            if (client.readyState === 1) { // WebSocket.OPEN
                client.send(JSON.stringify({
                    type: 'broadcast',
                    text: message.text,
                    timestamp: Date.now()
                }));
            }
        });
    });

    socket.on('close', () => {
        console.log('Client disconnected');
    });
});

console.log('WebSocket server running on ws://localhost:8080');

node server.js

Exposing a Local WebSocket Server with Localtonet

WebSocket connections start as HTTP and upgrade to the WebSocket protocol on the same connection. Localtonet's HTTP tunnel handles this upgrade transparently it forwards the Upgrade header and keeps the connection persistent, so wss:// connections to your tunnel URL reach your local WebSocket server without any special configuration.

// Replace ws://localhost:8080 with your tunnel URL using wss://
const socket = new WebSocket('wss://abc123.localto.net');

Remote clients, other browsers, mobile apps, or external services can now connect to your local WebSocket server from anywhere in the world. The connection is encrypted end-to-end using the tunnel's TLS certificate.

Frequently Asked Questions