Project: live review board with ordered status

Last updated: 5 Oct 20268 min read

project

Build a review board that renders its current state in initial HTML and then receives status changes. Choose a one-way event stream if the browser only reads updates; use a two-way channel only if active collaboration needs it. Every event carries a case ID and a server-owned version. A gap after reconnect triggers a snapshot read before the board claims to be current.

Build contract

Render an authorized case snapshot through an ordinary route, with status text available before live code starts.
Validate the case ID and version on every event, discard stale events, and recover from gaps using a current snapshot.
Close unused streams, bound the number of active connections, and show a stale status when the feed disconnects.

Implementation checkpoint

let visibleVersion = 12;
function receiveStatus(event) {
  if (event.caseId !== 47 || event.version <= visibleVersion) return 'ignore';
  if (event.version !== visibleVersion + 1) return 'load snapshot';
  visibleVersion = event.version;
  return 'apply';
}
console.log(receiveStatus({ caseId: 47, version: 14 }));

Cost and boundaries

Each event comparison is O(1), but fan-out to C readers can require O(C) delivery work and C open connections. A snapshot fetch on gaps adds network cost but prevents a convincing display of incomplete state. Measure connection count and queue delay under load.

Acceptance checks

Deliver versions 14, 13, then 15 from a starting version of 12 and inspect the resulting state.
Disconnect through a missed update and require a snapshot or replay before clearing the stale label.
Open and close many board tabs and confirm server connection counts return to baseline.

Common Mistakes

A delayed old event rolls the visible status backward.
A reconnection skips an event yet the UI still says current.
An event for another case updates the active case panel.

web-tech

web-development