Update static/index.html

static/index.html

@@ -14,6 +14,8 @@
         
         let socket;
         let isConnected = false;
+        let reconnectAttempts = 0;
+        const MAX_RECONNECT_DELAY = 30000; // Maximum delay between reconnection attempts (30 seconds)
 
         function connect() {
             socket = new WebSocket(`wss://${window.location.host}/ws`);
@@ -21,24 +23,26 @@
             socket.onopen = function(event) {
                 console.log("WebSocket connection established");
                 isConnected = true;
+                reconnectAttempts = 0;
+                startHeartbeat();
             };
 
             socket.onclose = function(event) {
                 console.log("WebSocket connection closed. Attempting to reconnect...");
                 isConnected = false;
-                setTimeout(connect, 3000); // Attempt to reconnect after 3 seconds
+                clearInterval(heartbeatInterval);
+                scheduleReconnection();
             };
 
             socket.onerror = function(error) {
                 console.error("WebSocket error:", error);
             };
 
-            // Receive predicted frames and render them on the canvas
             socket.onmessage = function (event) {
-                // Parse the received JSON data
                 const data = JSON.parse(event.data);
-                if (data.image) {
-                    // Create an image object from the base64 encoded string
+                if (data.type === "heartbeat_response") {
+                    console.log("Heartbeat response received");
+                } else if (data.image) {
                     const img = new Image();
                     img.onload = function() {
                         ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
@@ -48,6 +52,22 @@
             };
         }
 
+        function scheduleReconnection() {
+            const delay = Math.min(1000 * Math.pow(2, reconnectAttempts), MAX_RECONNECT_DELAY);
+            console.log(`Scheduling reconnection in ${delay}ms`);
+            setTimeout(connect, delay);
+            reconnectAttempts++;
+        }
+
+        let heartbeatInterval;
+        function startHeartbeat() {
+            heartbeatInterval = setInterval(() => {
+                if (isConnected) {
+                    socket.send(JSON.stringify({ type: "heartbeat" }));
+                }
+            }, 15000); // Send heartbeat every 15 seconds
+        }
+
         // Initial connection
         connect();
 
@@ -57,7 +77,7 @@
 
         function sendMousePosition(x, y, forceUpdate = false) {
             const currentTime = Date.now();
-            if (forceUpdate || !lastSentPosition || currentTime - lastSentTime >= SEND_INTERVAL) {
+            if (isConnected && (forceUpdate || !lastSentPosition || currentTime - lastSentTime >= SEND_INTERVAL)) {
                 socket.send(JSON.stringify({
                     "action_type": "move",
                     "mouse_position": [x, y]
@@ -96,6 +116,14 @@
                 "mouse_position": [x, y]
             }));
         });
+
+        // Graceful disconnection
+        window.addEventListener('beforeunload', function (e) {
+            if (isConnected) {
+                socket.send(JSON.stringify({ type: "disconnect" }));
+                socket.close();
+            }
+        });
     </script>
 </body>
 </html>