Observer and pub/sub in Node and the frontend

The flood warden keeps a sheet of the neighbours who asked to be rung if the river reaches its warning mark, in the order they signed.

On the street	In code
on a warning she rings each line in turn, one call at a time, and reports back to the coordinator only after the last	emit calls each listener now, in order, then returns (step 2)
a "next warning only" line is crossed out as its number is dialled	once removes, then calls (step 6)
a neighbour comes off by quoting the line number she was given when she signed; a friend's name in the same hand does not count	subscribe returns its own unsubscribe; off needs that exact function (steps 5, 11)
a call that turns into an emergency ends the round and goes straight to the coordinator; the lines below are not rung	a throw ends emit and reaches its caller (step 7)
asked twice to take a neighbour off, a careless warden strikes the bottom line the second time	an unsubscribe that is not safe to call twice (step 12)

In real terms: a subject is an object holding lists of functions; emit is a loop over one list, run inside the call that asked for it.

Breaks down when: a warden facing an emergency can choose to finish the list later; an EventEmitter cannot, and only an EventTarget carries on (step 9). And a phone round takes minutes, while synchronous only means the next line waits for every listener, however quick.

Contrasting case: the county's flood text-alert service. The warden sends it one message and walks away; whoever subscribed there is told on their own phone, and nobody's trouble comes back to her (a broker, steps 13–14).

4.1 ExamHall EXH-2560: two autosaves after the candidate comes back

ExamHall's ConnectionStatus store tells the timer, autosave and banner when the connection changes. Each page visit builds fresh parts and subscribes them:

function createStatus() {
  const listeners = new Set();
  return {
    set(next) { for (const l of [...listeners]) l(next); },
    subscribe(l) { listeners.add(l); return () => listeners.delete(l); },
  };
}
const connection = createStatus();
function mountExamPage() {
  const parts = [makeTimer(), makeAutosave(), makeBanner()];
  const offs = parts.map((part) => connection.subscribe(part));
  return () => offs.forEach((off) => off());   // MR !2860 calls this when the page unmounts
}

4.1 EXH-2560 before MR !2860 (nobody calls the page's unsubscribes): visit, leave, visit again, one 'offline' change -> timer 2 · autosave 2 · banner 2 · drafts saved 2
4.1 MR !2860 (the page's unsubscribes called on leaving): the same steps -> timer 1 · autosave 1 · banner 1 · drafts saved 1 · told in order timer, autosave, banner

Before MR !2860 nobody called the page's unsubscribes, so the first visit's parts still listened after the candidate came back: one status change saved the draft twice. With each subscribe's own unsubscribe called on leaving, one part of each kind remains, notified in the order it subscribed (steps 2 and 11). What the old parts cost in memory is js-memory-leaks-gc's lesson.

4.2 Payments ledger: what one emit call sees

The ledger posts each entry to a statement and a fraud check; the statement's listener switches the fraud check off after it has run once:

const ledger = new EventEmitter();
const fraud = (id) => log(`fraud ${id}`);
const statement = (id) => { log(`statement ${id}`); ledger.off('posted', fraud); };
ledger.on('posted', statement);
ledger.on('posted', fraud);
log(`emit e-1 returned ${ledger.emit('posted', 'e-1')}`);
log(`emit e-2 returned ${ledger.emit('posted', 'e-2')}`);
ledger.off('posted', statement);
log(`emit e-3 returned ${ledger.emit('posted', 'e-3')}`);

4.2 ledger log: statement e-1 · fraud e-1 · emit e-1 returned true · statement e-2 · emit e-2 returned true · emit e-3 returned false

The fraud check, removed during the first emit, still ran for it, because emit had already read its list (step 3); the second posting reached only the statement. Every line a listener logs comes before the returned line of its emit, and false means nobody listened (step 2).