Master Real-Time Frontend: Long Polling vs Server-Sent Events Explained

In front‑end development, real‑time data exchange often requires techniques beyond simple polling. This article explains the principles, benefits, and drawbacks of long polling and Server‑Sent Events (SSE), and provides practical JavaScript examples.

Long Polling

Long polling (also known as Comet) keeps a client request open until the server has data to return, then closes the connection and the client immediately issues a new request. This enables real‑time bidirectional communication without periodic polling.

Advantages: true real‑time interaction, reduced unnecessary requests, lower data transfer overhead, and persistent connections suitable for chat, notifications, etc.

Disadvantages: each open connection consumes server resources, potentially increasing load; failures can leave connections hanging, causing “long tail” resource usage.

Example implementation:

function longPolling() {
    // initiate request
    fetch('/api/data')
        .then(function(response) {
            // handle data
            console.log(response.data);
            // re‑initiate request
            longPolling();
        })
        .catch(function(error) {
            // handle error
            console.log(error);
            // retry after delay
            setTimeout(longPolling, 5000);
        });
}
longPolling();

In the code, then processes the response when data is available, while catch handles errors and retries after a delay.

Server‑Sent Events (SSE)

SSE establishes a one‑way connection where the server can push events to the client, which simply listens for incoming messages. It is more lightweight than long polling because the connection remains open without repeated requests.

Advantages: lower server resource consumption, built‑in reconnection, support for custom event types and data.

Disadvantages: relies on the browser’s EventSource API, requiring polyfills for older browsers.

Example implementation:

var source = new EventSource('/api/data');
source.addEventListener('message', function(event) {
    // handle data
    console.log(event.data);
});
source.addEventListener('error', function(event) {
    // handle error
    console.log(event.target.readyState);
});

The code creates an EventSource object, listens for message events to process incoming data, and handles error events when the connection fails.

Summary

Both long polling and SSE provide real‑time data interaction, each with its own strengths and trade‑offs. Choose the technique that best fits your application’s requirements, and consider optimizing connections and data transfer to minimize resource usage.