What This Post Covers
A short retrospective of the day I experimented with a WebSocket connection to show agent responses in real time. It bundles the protocol, reconnection, and observation methods into one piece of work. (The next day it continues into UI and performance in WebSocket Streaming and LCP Improvement.)
1. WebSocket Connection, Reconnection, Observation
Background (concepts)
- WebSocket handshake: the process of starting over HTTP and Upgrade-ing the protocol.
- Heartbeat: ping/pong or similar messages that periodically check whether the connection is alive. Avoids proxy/load-balancer timeouts.
What the situation was
A single HTTP request/response makes it hard to naturally show long-running agent output. I looked into a scheme where the server sends multiple messages while keeping the connection alive with WebSocket.
Early on, operational issues like message loss/duplication on reconnect and idle connection drops were expected. With the network tab alone, it was hard to tell when messages arrived.
There were three goals — tidy up the handshake and reconnection logic (connection), design a heartbeat to guard against idle timeouts (stability), and find a way to debug streaming timing (observation).
Key work
- Protocol: tidied up the WebSocket handshake and reconnection logic.
- heartbeat: confirmed the need to design it with the cost of keeping the connection alive and timeouts in mind. Because an intermediate proxy may drop it first.
- Observation: with the network tab alone it was hard to grasp streaming timing — the conclusion being that you must combine app logs and frame-level tools.
Takeaways
- Design the heartbeat with the cost of keeping the connection alive in mind — an intermediate proxy may drop it first.
- The network tab alone makes it hard to grasp streaming timing — message boundaries and the moment of UI reflection are better measured separately.
- Reconnection is not just "reattaching" but a state synchronization problem — this carries into the next day's UI placeholder and LCP work.
→ Largest Contentful Paint — connects to the next day's landing-page performance work
Derived Knowledge
- Largest Contentful Paint — connects to the next day's landing-page performance work
Related TIL
- WebSocket Streaming and LCP Improvement — streaming UI, placeholder, LCP