Update public/js/ws.js

public/js/ws.js

@@ -50,13 +50,51 @@ function emit(type, data) {
   listeners.get('*')?.forEach(fn => fn({ type, ...data }));
 }
 
-function connect() {
+
+
+function scheduleReconnect() {
+  clearTimeout(reconnectTimer);
+  reconnectTimer = setTimeout(() => {
+    reconnectDelay = Math.min(reconnectDelay * 1.5, MAX_RECONNECT_DELAY);
+    connectWithPing();
+  }, reconnectDelay);
+}
+
+export function getReadyState() {
+  return ws?.readyState ?? WebSocket.CLOSED;
+}
+
+export function isConnected() {
+  return ws?.readyState === WebSocket.OPEN;
+}
+
+// ── Ping keepalive ────────────────────────────────────────────────────────
+// Prevents the WebSocket from being closed by proxies/servers during long
+// operations like image/video generation (which can take 30-60+ seconds).
+let pingInterval = null;
+
+function startPing() {
+  stopPing();
+  pingInterval = setInterval(() => {
+    if (ws?.readyState === WebSocket.OPEN) {
+      try { ws.send(JSON.stringify({ type: 'ping' })); } catch {}
+    }
+  }, 20000); // every 20 seconds
+}
+
+function stopPing() {
+  if (pingInterval) { clearInterval(pingInterval); pingInterval = null; }
+}
+
+// Patch connect to start/stop ping
+function connectWithPing() {
   if (ws && (ws.readyState === WebSocket.CONNECTING || ws.readyState === WebSocket.OPEN)) return;
 
   ws = new WebSocket(WS_URL);
 
   ws.onopen = () => {
     reconnectDelay = RECONNECT_DELAY_MS;
+    startPing();
     emit('ws:connected', {});
   };
 
@@ -64,8 +102,9 @@ function connect() {
     let msg;
     try { msg = JSON.parse(event.data); } catch { return; }
     if (!msg?.type) return;
+    // Silently swallow pong responses
+    if (msg.type === 'pong') return;
 
-    // Resolve pending request callbacks
     if (msg._reqId && pendingCallbacks.has(msg._reqId)) {
       const cb = pendingCallbacks.get(msg._reqId);
       pendingCallbacks.delete(msg._reqId);
@@ -79,6 +118,7 @@ function connect() {
   };
 
   ws.onclose = () => {
+    stopPing();
     emit('ws:disconnected', {});
     scheduleReconnect();
   };
@@ -88,22 +128,6 @@ function connect() {
   };
 }
 
-function scheduleReconnect() {
-  clearTimeout(reconnectTimer);
-  reconnectTimer = setTimeout(() => {
-    reconnectDelay = Math.min(reconnectDelay * 1.5, MAX_RECONNECT_DELAY);
-    connect();
-  }, reconnectDelay);
-}
-
-export function getReadyState() {
-  return ws?.readyState ?? WebSocket.CLOSED;
-}
-
-export function isConnected() {
-  return ws?.readyState === WebSocket.OPEN;
-}
-
 // Boot
-connect();
+connectWithPing();
 window.ws = { send, request, on, off, isConnected, getReadyState };