Implement WebSocket connection managers with heartbeat monitoring and reconnection.
npx skills add https://github.com/pshirshov/ws-reconnect-demo --skill resilient-ws-ui
Please help me install this Agent Skill. Skill: resilient-ws-ui Source: https://github.com/pshirshov/ws-reconnect-demo/tree/main Command: npx skills add https://github.com/pshirshov/ws-reconnect-demo --skill resilient-ws-ui
WebSocket connections in browser applications frequently fail silently due to page freezes, IP address changes, proxy/load balancer idle timeouts, and browser-specific bugs like Firefox's stale connection issue, leaving both the application and user unaware of the broken connection. This Skill provides proven patterns to eliminate these silent failures and ensure users always have accurate, accessible visibility into connection health.
Use the resilient-ws-ui skill to implement a WebSocket connection manager with heartbeat monitoring, automatic reconnection, and a visual connection status indicator for your web application.
High-intent search queries and answers about installing and using this skill.
WebSocket silent failures occur when browser tabs freeze, IP addresses change, or proxies timeout. Fix silent WebSocket connection drops by implementing application-level heartbeat monitoring, a four-state connection state machine, and exponential backoff reconnection to detect and restore broken real-time links.
Implement automatic WebSocket reconnection by applying exponential backoff with full jitter and overlapping failover during stale grace periods. This ensures robust real-time connectivity by safely retrying dropped connections without overwhelming the server or causing network congestion.
Display WebSocket connection health using an always-on status widget with non-color state channels, countdown rings for waiting phases, and detailed tooltips showing RTT and packet loss data. This guarantees accessible real-time connection visibility without misleading users.
Yes, handling BFCache and page lifecycle events is required to maintain real-time connectivity. By integrating page lifecycle tracking, the connection state machine detects tab freezes and network disruptions, triggering proper heartbeat monitoring and reconnection protocols upon page restoration.
Yes, application-level heartbeats can monitor SSE and long-polling connections alongside WebSocket. The pattern uses per-ping nonces and server-side event-loop safety to ensure reliable real-time connectivity and accurate connection tracking across various browser-based push technologies.
Firefox stale connection issues cause WebSockets to appear open while actually failing. Prevent these browser-specific bugs by implementing a four-state connection state machine with application-level heartbeats and bounded event logs to actively verify real-time link vitality.
OpenDCAIEnable real-time bidirectional client-server communication with WebSocket, SSE, and Socket.IO fallbacks.
BarisSozenImplement WebSocket heartbeat, reconnection, and safe message handling patterns.
KorCaptainEnforces a standardized tooltip color scheme across all skill descriptions.
anicdhGuide WebSocket and SSE integration in TypeScript with NestJS and React.
