@knocklabs/client 0.21.0 → 0.21.2

package/src/knock.ts

@@ -26,6 +26,7 @@ class Knock {
   public userToken?: string;
   public logLevel?: LogLevel;
   public readonly branch?: string;
+  private readonly disconnectOnPageHidden?: boolean;
   private tokenExpirationTimer: ReturnType<typeof setTimeout> | null = null;
   readonly feeds = new FeedClient(this);
   readonly objects = new ObjectClient(this);
@@ -42,6 +43,7 @@ class Knock {
     this.host = options.host || DEFAULT_HOST;
     this.logLevel = options.logLevel;
     this.branch = options.branch || undefined;
+    this.disconnectOnPageHidden = options.disconnectOnPageHidden;
 
     this.log("Initialized Knock instance");
 
@@ -170,9 +172,7 @@ class Knock {
     if (this.tokenExpirationTimer) {
       clearTimeout(this.tokenExpirationTimer);
     }
-    if (this.apiClient?.socket && this.apiClient.socket.isConnected()) {
-      this.apiClient.socket.disconnect();
-    }
+    this.apiClient?.teardown();
   }
 
   log(message: string, force = false) {
@@ -190,6 +190,7 @@ class Knock {
       host: this.host,
       userToken: this.userToken,
       branch: this.branch,
+      disconnectOnPageHidden: this.disconnectOnPageHidden,
     });
   }
 

package/src/pageVisibility.ts

@@ -0,0 +1,70 @@
+import type { Socket } from "phoenix";
+
+const DEFAULT_DISCONNECT_DELAY_MS = 30_000;
+
+/**
+ * Disconnects the socket after a delay when the page becomes hidden,
+ * and reconnects when it becomes visible again. This avoids holding
+ * open connections for background tabs that aren't being viewed.
+ *
+ * The delay prevents unnecessary disconnects during brief tab switches.
+ * Phoenix channels automatically rejoin after reconnecting.
+ */
+export class PageVisibilityManager {
+  private disconnectTimer: ReturnType<typeof setTimeout> | null = null;
+  private wasConnected = false;
+
+  constructor(
+    private socket: Socket,
+    private disconnectDelayMs: number = DEFAULT_DISCONNECT_DELAY_MS,
+  ) {
+    if (typeof document !== "undefined") {
+      document.addEventListener("visibilitychange", this.onVisibilityChange);
+    }
+  }
+
+  private onVisibilityChange = () => {
+    if (document.hidden) {
+      this.scheduleDisconnect();
+    } else {
+      this.reconnect();
+    }
+  };
+
+  private scheduleDisconnect() {
+    this.clearTimer();
+
+    this.disconnectTimer = setTimeout(() => {
+      this.disconnectTimer = null;
+
+      if (this.socket.isConnected()) {
+        this.wasConnected = true;
+        this.socket.disconnect();
+      }
+    }, this.disconnectDelayMs);
+  }
+
+  private reconnect() {
+    this.clearTimer();
+
+    if (this.wasConnected) {
+      this.wasConnected = false;
+      this.socket.connect();
+    }
+  }
+
+  private clearTimer() {
+    if (this.disconnectTimer) {
+      clearTimeout(this.disconnectTimer);
+      this.disconnectTimer = null;
+    }
+  }
+
+  teardown() {
+    this.clearTimer();
+
+    if (typeof document !== "undefined") {
+      document.removeEventListener("visibilitychange", this.onVisibilityChange);
+    }
+  }
+}