@tthr/vue 0.0.26 → 0.0.27

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,9 +195,46 @@ 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;
+
+    // Heartbeat configuration
+    const HEARTBEAT_INTERVAL = 30000; // 30 seconds
+    const HEARTBEAT_TIMEOUT = 10000; // 10 seconds to receive pong
+
     // 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) {
+              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 = () => {
       // Get config from window (set by plugin)
       const config = (window as any).__TETHER_CONFIG__;
@@ -219,6 +256,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 +267,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,6 +282,7 @@ export function useTetherSubscription(
 
       ws.onclose = () => {
         isConnected.value = false;
+        stopHeartbeat();
         // Reconnect after 3 seconds
         reconnectTimeout = setTimeout(connect, 3000);
       };
@@ -246,11 +292,29 @@ export function useTetherSubscription(
       };
     };
 
+    // Handle page visibility changes - reconnect when tab becomes visible
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === 'visible') {
+        // Tab became visible - check connection health
+        if (!ws || ws.readyState !== WebSocket.OPEN) {
+          // Clear any pending reconnect and connect immediately
+          if (reconnectTimeout) {
+            clearTimeout(reconnectTimeout);
+            reconnectTimeout = null;
+          }
+          connect();
+        }
+      }
+    };
+
     onMounted(() => {
       connect();
+      document.addEventListener('visibilitychange', handleVisibilityChange);
     });
 
     onUnmounted(() => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+      stopHeartbeat();
       if (reconnectTimeout) {
         clearTimeout(reconnectTimeout);
       }

package/package.json

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