Polling, SSE, WebSockets, push and webhooks: choosing a channel

HOW IT FITS TOGETHER

KEY TERMS

Direction and who initiates

Browsers can only open connections, never accept them. Anything server-initiated either rides a connection the client opened (SSE, WebSockets, WebTransport) or goes through an intermediary that already holds one (the browser's push service, APNs, FCM). Servers receiving events from other servers use webhooks because both sides can accept requests.

Connections are state

Each held connection costs memory, a file descriptor and often a goroutine, fiber or buffer on every proxy in the path. Deploys must drain them, load balancers must route reconnects anywhere, and fan-out across nodes needs a pub/sub backbone. Polling keeps servers stateless at the cost of requests per second.

Proxies and HTTP versions

SSE is plain HTTP, so it passes through CDNs and proxies once response buffering is off. Over HTTP/1.1 browsers allow about six connections per origin, shared across tabs, which SSE can exhaust; HTTP/2 multiplexes streams and removes that limit. WebSockets need Upgrade forwarding; WebTransport needs HTTP/3 and UDP end to end.

Resume, not just reconnect

Reconnecting restores the pipe; resuming restores the data. SSE carries the last id automatically in Last-Event-ID. Everything else needs an explicit cursor or sequence number, a bounded server backlog, and a reset signal that tells the client to refetch a snapshot when its cursor is too old.

Battery and background

Mobile OSes suspend background apps and their sockets. A held WebSocket on a phone is a foreground-only feature; delivery while backgrounded goes through APNs or FCM, which batch and throttle (FCM downgrades high-priority messages that do not produce visible notifications).

Web Push

The page subscribes through PushManager with your VAPID public key and gets an endpoint on the browser vendor's push service. Your server POSTs encrypted payloads there; the browser wakes your service worker, which must show a notification. On iOS and iPadOS 16.4+ this works only for web apps added to the Home Screen, and permission must come from a user gesture.

Webhooks

Server-to-server callbacks with at-least-once delivery, retries and no ordering guarantee. Verify a signature over the raw body, reject stale timestamps, dedupe by event id, acknowledge fast and process asynchronously.

IN YOUR STACK

const MIN = 5_000, MAX = 60_000;
let delay = MIN;
let etag = null;

async function poll() {
  try {
    const res = await fetch("/api/jobs/42", { headers: etag ? { "If-None-Match": etag } : {} });
    if (res.status === 304) {
      delay = Math.min(delay * 1.5, MAX); // unchanged: slow down
    } else if (res.ok) {
      etag = res.headers.get("ETag");
      render(await res.json());
      delay = MIN; // changed: speed back up
    } else {
      const retryAfter = Number(res.headers.get("Retry-After")) * 1000 || 0;
      delay = Math.max(Math.min(delay * 2, MAX), retryAfter); // 429/5xx: back off
    }
  } catch {
    delay = Math.min(delay * 2, MAX); // offline or network error
  }
  const jittered = delay * (0.8 + Math.random() * 0.4); // desynchronize clients
  setTimeout(poll, document.hidden ? MAX : jittered);
}
function render(job) { document.querySelector("#job-state").textContent = job.state; }
poll();

import express from "express";
import { EventEmitter } from "node:events";
const app = express(), bus = new EventEmitter().setMaxListeners(0);
const log = []; // { seq, data }; use a shared log (Redis stream, table) across instances

app.get("/poll", (req, res) => {
  const after = Number(req.query.after ?? 0);
  const pending = () => log.filter((e) => e.seq > after);
  if (pending().length) return res.json(pending()); // catch up immediately
  const onEvent = () => { cleanup(); res.json(pending()); };
  const timer = setTimeout(() => { cleanup(); res.status(204).end(); }, 25_000); // < proxy idle timeout
  const cleanup = () => { clearTimeout(timer); bus.off("event", onEvent); };
  bus.on("event", onEvent);
  res.on("close", cleanup); // client went away
});
export function publish(data) { log.push({ seq: (log.at(-1)?.seq ?? 0) + 1, data }); bus.emit("event"); }
app.listen(3000);
// client
let after = 0;
for (;;) {
  try {
    const res = await fetch(`/poll?after=${after}`);
    if (res.status === 200) for (const e of await res.json()) { after = e.seq; console.log(e.data); }
  } catch { await new Promise((r) => setTimeout(r, 1000 + Math.random() * 4000)); }
}

import { createServer } from "node:http";
const history = [], clients = new Set(); // history: bounded { id, data } window; a durable log in production
const send = (res, e) => res.write(`id: ${e.id}\nevent: order\ndata: ${JSON.stringify(e.data)}\n\n`);

createServer((req, res) => {
  if (req.url !== "/events") return res.writeHead(404).end();
  res.writeHead(200, { "Content-Type": "text/event-stream", "Cache-Control": "no-cache", "X-Accel-Buffering": "no" });
  res.write("retry: 5000\n\n"); // reconnect delay hint for EventSource
  const lastId = Number(req.headers["last-event-id"] ?? 0);
  if (lastId && history.length && lastId < history[0].id - 1) res.write("event: reset\ndata: {}\n\n");
  for (const e of history) if (e.id > lastId) send(res, e); // replay the gap
  clients.add(res);
  const ping = setInterval(() => res.write(": ping\n\n"), 15_000);
  res.on("close", () => { clearInterval(ping); clients.delete(res); });
}).listen(3000);
export function publish(data) {
  const e = { id: (history.at(-1)?.id ?? 0) + 1, data };
  history.push(e); if (history.length > 1000) history.shift();
  for (const res of clients) send(res, e);
}

// browser: reconnects on its own and sends Last-Event-ID
const source = new EventSource("/events");
source.addEventListener("order", (e) => console.log(e.lastEventId, JSON.parse(e.data)));
source.addEventListener("reset", () => location.reload()); // too far behind: refetch a snapshot

// page: subscribe from a user gesture (required on Safari/iOS)
const VAPID_PUBLIC_KEY = "BExamplePublicKeyBase64Url"; // from webpush.generateVAPIDKeys()
document.querySelector("#enable-alerts").addEventListener("click", async () => {
  const reg = await navigator.serviceWorker.register("/sw.js");
  const sub = await reg.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: VAPID_PUBLIC_KEY });
  await fetch("/push/subscriptions", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(sub) });
});

// sw.js: must show a notification for every push
self.addEventListener("push", (event) => {
  const { title, body } = event.data.json();
  event.waitUntil(self.registration.showNotification(title, { body }));
});
// server
import webpush from "web-push";
webpush.setVapidDetails("mailto:ops@example.com", process.env.VAPID_PUBLIC_KEY, process.env.VAPID_PRIVATE_KEY);
const subscriptions = new Map(); // endpoint -> subscription; persist per user
export async function notify(sub, payload) {
  try {
    await webpush.sendNotification(sub, JSON.stringify(payload), { TTL: 3600, urgency: "high", topic: "order-status" });
  } catch (err) {
    if (err.statusCode === 404 || err.statusCode === 410) subscriptions.delete(sub.endpoint); // gone
    else throw err;
  }
}

import express from "express";
import { createHmac, timingSafeEqual } from "node:crypto";

const secret = Buffer.from(process.env.WEBHOOK_SECRET.replace(/^whsec_/, ""), "base64");
const seen = new Set(); // use a unique constraint on event id in production
const queue = []; // hand off to a real queue

const app = express();
app.post("/webhooks/billing", express.raw({ type: "application/json" }), (req, res) => {
  const id = req.get("webhook-id"), ts = req.get("webhook-timestamp");
  if (!id || Math.abs(Date.now() / 1000 - Number(ts)) > 300) return res.sendStatus(400); // replay window
  const expected = createHmac("sha256", secret).update(`${id}.${ts}.${req.body}`).digest();
  const valid = (req.get("webhook-signature") ?? "").split(" ").some((entry) => {
    const sig = Buffer.from(entry.split(",")[1] ?? "", "base64");
    return sig.length === expected.length && timingSafeEqual(sig, expected);
  });
  if (!valid) return res.sendStatus(401);
  if (!seen.has(id)) { seen.add(id); queue.push(JSON.parse(req.body)); } // dedupe retries
  res.sendStatus(200); // ack fast; slow handlers trigger sender timeouts and retries
});
app.listen(3000);

// Baseline 2026 (Safari 26.4 shipped it last). Still feature-detect and keep a WebSocket fallback.
export async function connect(url, onUpdate) {
  if (!("WebTransport" in globalThis)) throw new Error("no WebTransport: use WebSocket fallback");
  const wt = new WebTransport(url); // https:// URL of an HTTP/3 endpoint
  await wt.ready;
  wt.closed.catch((err) => console.warn("transport closed", err)); // reconnect + resync here

  // Datagrams: unreliable, unordered, latest-wins (cursor positions, game input)
  const datagrams = typeof wt.datagrams.createWritable === "function" ? wt.datagrams.createWritable() : wt.datagrams.writable;
  const dgWriter = datagrams.getWriter();
  const sendPosition = (x, y) => dgWriter.write(new Float32Array([x, y]));

  // Bidirectional stream: reliable and ordered, independent of other streams
  const stream = await wt.createBidirectionalStream();
  const writer = stream.writable.getWriter();
  await writer.write(new TextEncoder().encode(JSON.stringify({ type: "subscribe", room: "lobby" })));
  const reader = stream.readable.pipeThrough(new TextDecoderStream()).getReader();
  (async () => {
    for (let r = await reader.read(); !r.done; r = await reader.read()) onUpdate(r.value);
  })();
  return { sendPosition, close: () => wt.close({ closeCode: 0, reason: "bye" }) };
}

WHEN TO REACH FOR WHAT

WHERE IT BITES

• Reconnecting without resuming: the stream comes back but every event during the gap is lost. Give events durable ids or sequence numbers and refetch a snapshot when the backlog no longer covers the client's cursor.
• Buffering in the path: compression middleware, nginx proxy_buffering or a CDN that waits for a complete response turns SSE and long polling into one late burst.
• Idle timeouts shorter than your quiet periods (load balancers often default to around 60 seconds). Send heartbeats or comments, and set long-poll hold times below the shortest timeout.
• Reconnect storms after a deploy or outage: every client retries at once. Use exponential backoff with jitter on the client and drain connections gradually on the server.
• Using push notifications as a data channel. APNs, FCM and Web Push collapse, delay and drop messages, and FCM deprioritizes high-priority messages that do not show a notification.
• Holding one connection per tab per feature. Multiplex topics over one stream, share it across tabs (SharedWorker or BroadcastChannel), and close it when the page is hidden for long.

WHEN IT BREAKS IN PRODUCTION

• WebSockets disconnect, duplicate, or lose events
• Webhooks arrive twice, late, or out of order
• A brief blip turns into a long outage
• The UI shows old data after a save

SOURCES

• MDN: Using server-sent events (opens in new tab)Checked 2026-10-11
• MDN: WebTransport (opens in new tab)Checked 2026-10-11
• WebKit: Features in Safari 26.4 (opens in new tab)Checked 2026-10-11
• WebKit: Web Push for Web Apps on iOS and iPadOS (opens in new tab)Checked 2026-10-11
• Firebase: Android message priority (opens in new tab)Checked 2026-10-11
• gRPC-Web (opens in new tab)Checked 2026-10-11