@tthr/vue 0.0.27 → 0.0.28

package/nuxt/runtime/composables.ts

@@ -198,10 +198,12 @@ export function useTetherSubscription(
     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 = 30000; // 30 seconds
-    const HEARTBEAT_TIMEOUT = 10000; // 10 seconds to receive pong
+    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)}`;
@@ -214,7 +216,7 @@ export function useTetherSubscription(
           ws.send(JSON.stringify({ type: 'ping' }));
 
           heartbeatTimeout = setTimeout(() => {
-            if (awaitingPong) {
+            if (awaitingPong && isMounted) {
               console.warn('[Tether] Heartbeat timeout - forcing reconnect');
               ws?.close();
             }
@@ -236,6 +238,13 @@ export function useTetherSubscription(
     };
 
     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) {
@@ -243,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
       };
 
@@ -282,21 +293,26 @@ export function useTetherSubscription(
 
       ws.onclose = () => {
         isConnected.value = false;
+        isConnecting = false;
         stopHeartbeat();
-        // Reconnect after 3 seconds
-        reconnectTimeout = setTimeout(connect, 3000);
+        // 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.OPEN) {
+        if (!ws || ws.readyState === WebSocket.CLOSED) {
           // Clear any pending reconnect and connect immediately
           if (reconnectTimeout) {
             clearTimeout(reconnectTimeout);
@@ -308,18 +324,22 @@ export function useTetherSubscription(
     };
 
     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.27",
+  "version": "0.0.28",
   "description": "Tether Vue/Nuxt SDK",
   "type": "module",
   "main": "./dist/index.js",