@tthr/vue 0.0.27 → 0.0.29

package/nuxt/module.ts

@@ -43,12 +43,20 @@ export default defineNuxtModule<TetherModuleOptions>({
   setup(options, nuxt) {
     const resolver = createResolver(import.meta.url);
 
-    // Read env vars at build time
+    // Get values from options or env vars (build-time defaults)
+    // These can be overridden at runtime via NUXT_TETHER_* and NUXT_PUBLIC_TETHER_* env vars
     const apiKey = process.env.TETHER_API_KEY || '';
     const url = options.url || process.env.TETHER_URL || 'https://tether-api.strands.gg';
     const projectId = options.projectId || process.env.TETHER_PROJECT_ID || '';
 
+    // Calculate WebSocket URL from HTTP URL
+    const wsUrl = url.replace(/^https:/, 'wss:').replace(/^http:/, 'ws:');
+
     // Server-side config (includes API key - never exposed to client)
+    // Can be overridden at runtime via:
+    // - NUXT_TETHER_API_KEY
+    // - NUXT_TETHER_URL
+    // - NUXT_TETHER_PROJECT_ID
     nuxt.options.runtimeConfig.tether = {
       apiKey,
       url,
@@ -56,9 +64,12 @@ export default defineNuxtModule<TetherModuleOptions>({
     };
 
     // Public config (safe for client - no secrets)
+    // Can be overridden at runtime via:
+    // - NUXT_PUBLIC_TETHER_PROJECT_ID
+    // - NUXT_PUBLIC_TETHER_WS_URL
     nuxt.options.runtimeConfig.public.tether = {
       projectId,
-      wsUrl: url.replace('http', 'ws'),
+      wsUrl,
     };
 
     // Add server API routes for proxying Tether requests

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/nuxt/runtime/plugin.client.ts

@@ -21,8 +21,20 @@ export default defineNuxtPlugin(() => {
 
   // Make config available for WebSocket connections
   // This is safe - no secrets are exposed
-  window.__TETHER_CONFIG__ = {
-    projectId: config.public.tether.projectId,
-    wsUrl: config.public.tether.wsUrl,
+  const tetherConfig = {
+    projectId: config.public.tether?.projectId || '',
+    wsUrl: config.public.tether?.wsUrl || '',
   };
+
+  window.__TETHER_CONFIG__ = tetherConfig;
+
+  // Debug logging
+  console.log('[Tether] Client plugin loaded with config:', {
+    projectId: tetherConfig.projectId ? `${tetherConfig.projectId.slice(0, 8)}...` : '(empty)',
+    wsUrl: tetherConfig.wsUrl || '(empty)',
+  });
+
+  if (!tetherConfig.wsUrl || !tetherConfig.projectId) {
+    console.warn('[Tether] Config incomplete - WebSocket subscriptions will not work');
+  }
 });

package/package.json

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