@tthr/vue 0.0.26 → 0.0.28

package/nuxt/runtime/composables.ts

@@ -6,7 +6,7 @@
  * WebSocket subscriptions run client-side for realtime updates.
  */
 
-import { ref, onMounted, onUnmounted, watch, type Ref } from 'vue';
+import { ref, onMounted, onUnmounted, type Ref } from 'vue';
 
 /**
  * Query state returned by useQuery
@@ -195,10 +195,56 @@ export function useTetherSubscription(
   if (import.meta.client) {
     let ws: WebSocket | null = null;
     let reconnectTimeout: ReturnType<typeof setTimeout> | null = null;
+    let heartbeatInterval: ReturnType<typeof setInterval> | null = null;
+    let heartbeatTimeout: ReturnType<typeof setTimeout> | null = null;
+    let awaitingPong = false;
+    let isConnecting = false;
+    let isMounted = false;
+
+    // Heartbeat configuration
+    const HEARTBEAT_INTERVAL = 25000; // 25 seconds (well under server's 90s timeout)
+    const HEARTBEAT_TIMEOUT = 15000; // 15 seconds to receive pong (generous for slow networks)
+
     // Generate a unique subscription ID
     const subscriptionId = `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
 
+    const startHeartbeat = () => {
+      stopHeartbeat();
+      heartbeatInterval = setInterval(() => {
+        if (ws?.readyState === WebSocket.OPEN) {
+          awaitingPong = true;
+          ws.send(JSON.stringify({ type: 'ping' }));
+
+          heartbeatTimeout = setTimeout(() => {
+            if (awaitingPong && isMounted) {
+              console.warn('[Tether] Heartbeat timeout - forcing reconnect');
+              ws?.close();
+            }
+          }, HEARTBEAT_TIMEOUT);
+        }
+      }, HEARTBEAT_INTERVAL);
+    };
+
+    const stopHeartbeat = () => {
+      if (heartbeatInterval) {
+        clearInterval(heartbeatInterval);
+        heartbeatInterval = null;
+      }
+      if (heartbeatTimeout) {
+        clearTimeout(heartbeatTimeout);
+        heartbeatTimeout = null;
+      }
+      awaitingPong = false;
+    };
+
     const connect = () => {
+      // Don't connect if unmounted or already connecting/connected
+      if (!isMounted) return;
+      if (isConnecting) return;
+      if (ws && (ws.readyState === WebSocket.OPEN || ws.readyState === WebSocket.CONNECTING)) {
+        return;
+      }
+
       // Get config from window (set by plugin)
       const config = (window as any).__TETHER_CONFIG__;
       if (!config?.wsUrl || !config?.projectId) {
@@ -206,10 +252,12 @@ export function useTetherSubscription(
         return;
       }
 
+      isConnecting = true;
       const wsUrl = `${config.wsUrl}/ws/${config.projectId}`;
       ws = new WebSocket(wsUrl);
 
       ws.onopen = () => {
+        isConnecting = false;
         // Wait for connected message before subscribing
       };
 
@@ -219,6 +267,7 @@ export function useTetherSubscription(
 
           if (message.type === 'connected') {
             isConnected.value = true;
+            startHeartbeat();
             // Subscribe to the query with our ID
             ws?.send(JSON.stringify({
               type: 'subscribe',
@@ -229,6 +278,13 @@ export function useTetherSubscription(
           } else if (message.type === 'data' && message.id === subscriptionId) {
             // Call onUpdate with the fresh data
             onUpdate(message.data);
+          } else if (message.type === 'pong') {
+            // Heartbeat acknowledged
+            awaitingPong = false;
+            if (heartbeatTimeout) {
+              clearTimeout(heartbeatTimeout);
+              heartbeatTimeout = null;
+            }
           }
         } catch {
           // Ignore parse errors
@@ -237,25 +293,53 @@ export function useTetherSubscription(
 
       ws.onclose = () => {
         isConnected.value = false;
-        // Reconnect after 3 seconds
-        reconnectTimeout = setTimeout(connect, 3000);
+        isConnecting = false;
+        stopHeartbeat();
+        // Only reconnect if still mounted
+        if (isMounted) {
+          reconnectTimeout = setTimeout(connect, 3000);
+        }
       };
 
       ws.onerror = () => {
+        isConnecting = false;
         ws?.close();
       };
     };
 
+    // Handle page visibility changes - reconnect when tab becomes visible
+    const handleVisibilityChange = () => {
+      if (!isMounted) return;
+      if (document.visibilityState === 'visible') {
+        // Tab became visible - check connection health
+        if (!ws || ws.readyState === WebSocket.CLOSED) {
+          // Clear any pending reconnect and connect immediately
+          if (reconnectTimeout) {
+            clearTimeout(reconnectTimeout);
+            reconnectTimeout = null;
+          }
+          connect();
+        }
+      }
+    };
+
     onMounted(() => {
+      isMounted = true;
       connect();
+      document.addEventListener('visibilitychange', handleVisibilityChange);
     });
 
     onUnmounted(() => {
+      isMounted = false;
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+      stopHeartbeat();
       if (reconnectTimeout) {
         clearTimeout(reconnectTimeout);
+        reconnectTimeout = null;
       }
       if (ws) {
         ws.close();
+        ws = null;
       }
     });
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tthr/vue",
-  "version": "0.0.26",
+  "version": "0.0.28",
   "description": "Tether Vue/Nuxt SDK",
   "type": "module",
   "main": "./dist/index.js",