Try to reconnect to websocket once every second if the connection was…

… closed

tests/index.html

@@ -26,11 +26,15 @@ <h1>Conducted tests</h1>
 
     <script>
         let ignoreKeyEvents = false; // Flag to ignore key events
+        let ws; // WebSocket instance
+        let messageQueue = []; // Queue to store pending messages
+        let reconnectInterval = 1000; // Initial reconnect interval (1 second)
 
         // Focus on the textarea when the page loads
         window.onload = () => {
             const textArea = document.getElementById('text');
             textArea.focus();
+            initializeWebSocket(); // Initialize WebSocket when the page loads
         };
 
         // Prevent other elements from gaining focus
@@ -42,19 +46,90 @@ <h1>Conducted tests</h1>
             }
         });
 
-        const ws = new WebSocket('ws://localhost:26541');
+        // Initialize or reconnect WebSocket
+        function initializeWebSocket() {
+            console.log('Attempting to connect WebSocket...');
+            ws = new WebSocket('ws://localhost:26541');
+
+            // Handle WebSocket open
+            ws.addEventListener('open', () => {
+                console.log('WebSocket connected');
+                flushMessageQueue(); // Send all pending messages
+            });
+
+            // Handle WebSocket close and attempt reconnection
+            ws.addEventListener('close', () => {
+                console.warn('WebSocket disconnected. Retrying...');
+                scheduleReconnect();
+            });
+
+            // Handle WebSocket errors
+            ws.addEventListener('error', (error) => {
+                console.error('WebSocket error:', error);
+                scheduleReconnect();
+            });
+
+            // Handle incoming WebSocket messages
+            ws.addEventListener('message', (event) => {
+                console.log('Received message:', event.data);
+
+                // Server asks to clear the text and focus on it
+                if (event.data === 'ClearText') {
+                    document.getElementById('text').value = '';
+                    document.getElementById('text').focus();
+                    // Set flag to ignore key events
+                    ignoreKeyEvents = true;
+                    sendMessage(`ReadyForText`);
+                }
+
+                // Server asks for the form's content
+                if (event.data === 'GetText') {
+                    const text = document.getElementById('text').value;
+
+                    // Send the form's content via WebSocket
+                    sendMessage(`Text(\"${text}\")`);
+
+                    // Reset flag after sending text, allowing key events again
+                    ignoreKeyEvents = false;
+                }
+            });
+        }
+
+        // Schedule a reconnect every second
+        function scheduleReconnect() {
+            setTimeout(() => {
+                initializeWebSocket(); // Attempt to reconnect
+            }, 1000); // Retry every 1000 milliseconds (1 second)
+        }
+
+        // Queue a message or send it directly if WebSocket is connected
+        function sendMessage(message) {
+            if (ws.readyState === WebSocket.OPEN) {
+                ws.send(message);
+            } else {
+                messageQueue.push(message); // Store message in the queue
+            }
+        }
+
+        // Flush the message queue
+        function flushMessageQueue() {
+            while (messageQueue.length > 0) {
+                const message = messageQueue.shift();
+                ws.send(message);
+            }
+        }
 
         // Helper function to handle events
         const handleEvent = (eventType, data = '') => {
             const message = `${eventType}${data}`;
             console.log(message);
             document.getElementById(eventType).checked = true;
-            ws.send(message);
+            sendMessage(message);
         };
 
-        document.addEventListener('open', (event) => handleEvent('Open', event));
-        document.addEventListener('close', (event) => handleEvent('Close', event));
-        
+        // document.addEventListener('open', (event) => handleEvent('Open', event));
+        // document.addEventListener('close', (event) => handleEvent('Close', event));
+
         // Handle keydown events but ignore if flag is set
         document.addEventListener('keydown', (event) => {
             if (!ignoreKeyEvents) {
@@ -73,33 +148,7 @@ <h1>Conducted tests</h1>
         document.addEventListener('mouseup', (event) => handleEvent('MouseUp', `(${event.button})`));
         document.addEventListener('mousemove', (event) => handleEvent('MouseMove', `((${event.movementX},${event.movementY}),(${event.screenX},${event.screenY}))`));
         document.addEventListener('wheel', (event) => handleEvent('MouseScroll', `(${event.deltaX},${event.deltaY})`));
-
-        // Handle incoming WebSocket messages
-        ws.addEventListener('message', (event) => {
-            console.log('Received message:', event.data);
-
-            // Server asks to clear the text and focus on it
-            if (event.data === 'ClearText') {
-                document.getElementById('text').value = '';
-                document.getElementById('text').focus();
-                // Set flag to ignore key events
-                ignoreKeyEvents = true;
-                // Send the input text via WebSocket
-                ws.send(`ReadyForText`);
-            }
-
-            // Server asks for the form's content
-            if (event.data === 'GetText') {
-                const text = document.getElementById('text').value;
-
-                // Send the form's content via WebSocket
-                ws.send(`Text(\"${text}\")`);
-
-                // Reset flag after sending text, allowing key events again
-                ignoreKeyEvents = false;
-            }
-        });
     </script>
 </body>
 
-</html>
+</html>