import { useEffect, useRef } from "react"; import { useQueryClient } from "@tanstack/react-query"; import type { DeviceStatus, LedgerEvent, Occupancy } from "../api.js"; import { qk } from "./query.js"; import { useLiveStore } from "./live-store.js"; // Booth WebSocket client. Opens ONE socket to /api/ws and turns server pushes into // (a) live-store updates for the ticker/occupancy and (b) Query cache invalidations // so TanStack Query remains the source of truth for durable server data. The browser // attaches the auth cookie automatically; the backend gates by cookie + Origin // (see routes/ws.ts). Auto-reconnects with capped backoff so a booth left running // recovers from a server restart without a manual refresh. /** Server → client message shapes (mirror routes/ws.ts OutMsg). */ type WsMessage = | { kind: "hello"; occupancy: Occupancy; devices: DeviceStatus[] } | { kind: "ledger"; event: LedgerEvent; occupancy: Occupancy } | { kind: "printer-status"; event: unknown } | { kind: "device-status"; event: DeviceStatus }; /** Build the ws:// or wss:// URL for the same origin the SPA is served from. */ function wsUrl(): string { const proto = window.location.protocol === "https:" ? "wss:" : "ws:"; return `${proto}//${window.location.host}/api/ws`; } export function useLiveFeed(): void { const qc = useQueryClient(); const { setStatus, setOccupancy, pushEvent, setDevices, upsertDevice } = useLiveStore(); // Hold the socket + reconnect timer across renders; guard against StrictMode // double-invoke and unmount. const sockRef = useRef(null); const retryRef = useRef(0); const closedRef = useRef(false); useEffect(() => { closedRef.current = false; const connect = () => { if (closedRef.current) return; setStatus(retryRef.current === 0 ? "connecting" : "connecting"); const sock = new WebSocket(wsUrl()); sockRef.current = sock; sock.onopen = () => { retryRef.current = 0; setStatus("open"); }; sock.onmessage = (ev) => { let msg: WsMessage; try { msg = JSON.parse(ev.data as string) as WsMessage; } catch { return; // ignore malformed frames } if (msg.kind === "hello") { setOccupancy(msg.occupancy); // Initial device-status snapshot for the footer. if (Array.isArray(msg.devices)) setDevices(msg.devices); } else if (msg.kind === "device-status") { upsertDevice(msg.event); } else if (msg.kind === "ledger") { setOccupancy(msg.occupancy); pushEvent(msg.event); // Keep Query authoritative: the durable event list, occupancy totals, // and active-sessions list refetch on the next read instead of trusting // the pushed copy alone. void qc.invalidateQueries({ queryKey: qk.events }); void qc.invalidateQueries({ queryKey: qk.occupancy }); void qc.invalidateQueries({ queryKey: qk.activeSessions }); // A shift open/close (or a drawer movement) changes the header control // state and the per-shift log window — refresh the shift status too. if ( msg.event.type === "shift_open" || msg.event.type === "shift_z_report" || msg.event.type === "cash_movement" || msg.event.type === "cash_in" || msg.event.type === "cash_out" ) { void qc.invalidateQueries({ queryKey: qk.shift }); } } else if (msg.kind === "printer-status") { void qc.invalidateQueries({ queryKey: ["printers"] }); } }; const scheduleReconnect = () => { if (closedRef.current) return; setStatus("closed"); // Capped exponential backoff: 0.5s, 1s, 2s, … up to 10s. const delay = Math.min(500 * 2 ** retryRef.current, 10_000); retryRef.current += 1; window.setTimeout(connect, delay); }; sock.onclose = scheduleReconnect; // onerror fires before onclose; let onclose own the reconnect to avoid double. sock.onerror = () => sock.close(); }; connect(); return () => { closedRef.current = true; sockRef.current?.close(); sockRef.current = null; }; // qc / store setters are stable; run once on mount. // eslint-disable-next-line react-hooks/exhaustive-deps }, []); }