Use web sockets

The dashboard needs live updates for order status before the stakeholder demo on Friday. Implement a WebSocket connection that subscribes to order updates for the current user, update the UI when messages arrive without reloading the page, and reconnect automatically with exponential backoff if the socket drops. Log connection state transitions to the console for debugging.

Before I hand the real-time code to the frontend lead, make it easy to evaluate: place the subscription code near the component lifecycle methods, surface the last message timestamp and connection state in a small status badge, document the message schema up top, and flag any cases where UI updates could cause duplicate list items or stale focus.

Users reported that after network blips the order list shows older statuses and sometimes duplicates. I implemented automatic reconnect with backoff, but I’m not sure whether the server resends missed events or whether my client replays cached messages. I can’t inspect the raw socket stream in production. What should I check first to diagnose whether duplicates come from server replay or client-side re-apply, and what’s the fastest safe mitigation to prevent duplicate UI entries?

Over several sprints we keep patching WebSocket reconnection bugs: duplicates after reconnect, lost subscriptions when tabs sleep, and memory leaks from forgotten listeners. We waste time debugging similar reconnection edge cases. What two patterns or small abstractions should we adopt so future real-time features are reliable and easier to reason about?