stop websockets on idle

Author: rhamlett

src/main/resources/static/js/dashboard.js

@@ -9,6 +9,7 @@
  * Starts CPU stress simulation
  */
 async function startCpuStress() {
+    SocketClient.ensureWebSocket();
     const durationSeconds = parseInt(document.getElementById('cpuDuration').value) || 30;
     const intensity = document.getElementById('cpuIntensity').value || 'HIGH';
 
@@ -64,6 +65,7 @@ async function stopThreadStarvation() {
 let isAllocating = false;
 
 async function allocateMemory() {
+    SocketClient.ensureWebSocket();
     // Prevent double-submission
     if (isAllocating) {
         console.log('[Dashboard] Allocation already in progress, ignoring');
@@ -114,6 +116,7 @@ async function releaseAllMemory() {
  * Server spawns N internal requests to block Tomcat servlet threads.
  */
 async function startThreadStarvation() {
+    SocketClient.ensureWebSocket();
     const threadCount = parseInt(document.getElementById('starvationCount').value) || 50;
     const durationSeconds = parseInt(document.getElementById('starvationDuration').value) || 30;
 
@@ -136,6 +139,7 @@ async function startThreadStarvation() {
  * Starts connection pool exhaustion simulation
  */
 async function triggerConnectionPool() {
+    SocketClient.ensureWebSocket();
     const poolSize = parseInt(document.getElementById('poolSize').value) || 10;
     const queryDurationSeconds = parseInt(document.getElementById('queryDuration').value) || 30;
     const concurrentQueries = parseInt(document.getElementById('concurrentQueries').value) || 20;
@@ -179,6 +183,7 @@ async function stopConnectionPool() {
  * Starts failed requests simulation (generates HTTP 5xx errors)
  */
 async function triggerFailedRequests() {
+    SocketClient.ensureWebSocket();
     const numberOfRequests = parseInt(document.getElementById('numberOfFailedRequests').value) || 10;
 
     try {
@@ -199,6 +204,7 @@ async function triggerFailedRequests() {
  * Triggers a crash simulation
  */
 async function triggerCrash() {
+    SocketClient.ensureWebSocket();
     const type = document.getElementById('crashType').value || 'EXCEPTION';
 
     if (!confirm(`⚠️ Are you sure you want to trigger a ${type} crash? This may terminate the application.`)) {
@@ -411,20 +417,18 @@ const Dashboard = (function() {
 
         // Update connection status based on idle state changes
         if (event.event === 'GOING_IDLE') {
-            // Lock the status indicator before updating it, so that any
-            // WebSocket reconnect/disconnect events that fire while the server
-            // is idle cannot overwrite the Idle indicator.
-            SocketClient.setServerIdle(true);
             const statusEl = document.getElementById('connection-status');
             if (statusEl) {
                 statusEl.classList.remove('status-connected', 'status-disconnected', 'status-reconnecting', 'status-idle');
                 statusEl.classList.add('status-idle');
                 statusEl.textContent = 'Idle';
             }
+            // Intentionally close WebSocket to prevent reconnect-induced status flicker
+            SocketClient.closeForIdle();
         } else if (event.event === 'WAKING_UP') {
-            // Unlock the status indicator before updating it, restoring normal
-            // WebSocket status reporting now that the server is active again.
-            SocketClient.setServerIdle(false);
+            // WebSocket will have already reconnected (via ensureWebSocket on button click)
+            // and onConnect will have set the status to Connected. This is a belt-and-
+            // suspenders update for any edge cases where the event arrives first.
             const statusEl = document.getElementById('connection-status');
             if (statusEl) {
                 statusEl.classList.remove('status-connected', 'status-disconnected', 'status-reconnecting', 'status-idle');
@@ -928,6 +932,13 @@ const Dashboard = (function() {
 })();
 
 // Initialize dashboard when DOM is ready
-document.addEventListener('DOMContentLoaded', function() {
+// recordActivity fires an HTTP request first so the server wakes before the
+// WebSocket connects — ensuring the first broadcast arrives with is_idle: false.
+document.addEventListener('DOMContentLoaded', async function() {
+    try {
+        await SocketClient.recordActivity();
+    } catch (e) {
+        // Non-blocking — WS will retry on its own
+    }
     Dashboard.init();
 });

src/main/resources/static/js/socket-client.js

@@ -18,9 +18,9 @@ const SocketClient = (function() {
     let disconnectTimer = null;
     let disconnectTime = null;
 
-    // Idle state tracking
-    let activityRecorded = false;
-    let serverIsIdle = false;
+    // When true, the WebSocket was closed intentionally (idle transition).
+    // Suppresses disconnect status updates and prevents auto-reconnect.
+    let intentionalDisconnect = false;
 
     // Callbacks
     const callbacks = {
@@ -58,11 +58,8 @@ const SocketClient = (function() {
 
     /**
      * Updates the connection status UI.
-     * While the server is idle, all status transitions are suppressed — only
-     * dashboard.js (via setServerIdle) may change the indicator in that state.
      */
     function updateConnectionStatus(status) {
-        if (serverIsIdle) return;
         const statusEl = document.getElementById('connection-status');
         if (statusEl) {
             // Remove all status classes
@@ -94,12 +91,6 @@ const SocketClient = (function() {
      */
     function connect() {
         updateConnectionStatus('connecting');
-        
-        // Record activity only on initial page load, not on reconnections
-        // Reconnections should NOT reset the idle timeout - only explicit user activity should
-        if (firstConnection) {
-            recordActivity();
-        }
 
         // Create SockJS connection
         const socket = new SockJS('/ws');
@@ -121,6 +112,7 @@ const SocketClient = (function() {
             console.log('[SocketClient] Connected to WebSocket server');
             connected = true;
             reconnectAttempts = 0;
+            intentionalDisconnect = false;
             updateConnectionStatus('connected');
 
             // Clear any pending disconnect timer
@@ -160,6 +152,13 @@ const SocketClient = (function() {
         stompClient.onWebSocketClose = function(event) {
             console.log('[SocketClient] WebSocket closed');
             connected = false;
+
+            // Intentional close (idle transition) — do not update the status
+            // indicator or schedule a reconnect. Just let the connection sit closed.
+            if (intentionalDisconnect) {
+                return;
+            }
+
             updateConnectionStatus('disconnected');
             trigger('onDisconnect', event);
 
@@ -270,18 +269,37 @@ const SocketClient = (function() {
         return connected;
     }
 
+    /**
+     * Intentionally closes the WebSocket during idle transition.
+     * Sets intentionalDisconnect so the onclose handler does not update the
+     * status indicator or schedule a reconnect.
+     */
+    function closeForIdle() {
+        intentionalDisconnect = true;
+        if (stompClient && stompClient.active) {
+            stompClient.deactivate();
+            connected = false;
+        }
+    }
+
+    /**
+     * Ensures the WebSocket is connected. If the STOMP client is not active
+     * (e.g., after an intentional idle disconnect), reconnects immediately.
+     * Called at the top of every simulation trigger so clicking a button while
+     * idle automatically re-establishes the connection before the API call.
+     */
+    function ensureWebSocket() {
+        if (!stompClient || !stompClient.active) {
+            connect();
+        }
+    }
+
     /**
      * Records activity with the server to prevent idle timeout.
-     * Should only be called on:
-     *   - Initial page load (not reconnections)
-     *   - Explicit user activity events
-     * Wakes the app from idle state if necessary.
+     * Called once on page load (before WS init) to wake the server so the
+     * first WebSocket broadcast arrives with is_idle: false.
      */
     async function recordActivity() {
-        if (activityRecorded) {
-            return; // Only record once per page load to avoid spam
-        }
-        
         try {
             const response = await fetch('/api/health/activity', {
                 method: 'POST',
@@ -290,7 +308,6 @@ const SocketClient = (function() {
 
             if (response.ok) {
                 const result = await response.json();
-                activityRecorded = true;
 
                 if (result.wokeFromIdle) {
                     console.log('[SocketClient] App woken from idle state');
@@ -307,15 +324,6 @@ const SocketClient = (function() {
         }
     }
 
-    /**
-     * Marks the server as idle or active, controlling whether WebSocket
-     * reconnect/disconnect events may update the status indicator.
-     * Call with true on GOING_IDLE, false on WAKING_UP.
-     */
-    function setServerIdle(idle) {
-        serverIsIdle = idle;
-    }
-
     // Public API
     return {
         connect,
@@ -324,6 +332,7 @@ const SocketClient = (function() {
         on,
         isConnected,
         recordActivity,
-        setServerIdle
+        closeForIdle,
+        ensureWebSocket
     };
 })();