Close websocket connection after being hidden for 5 minutes (#6149)

Co-authored-by: Paulus Schoutsen <balloob@gmail.com>

package.json

@@ -87,7 +87,7 @@
     "fuse.js": "^6.0.0",
     "google-timezones-json": "^1.0.2",
     "hls.js": "^0.12.4",
-    "home-assistant-js-websocket": "^5.2.1",
+    "home-assistant-js-websocket": "^5.3.0",
     "idb-keyval": "^3.2.0",
     "intl-messageformat": "^8.3.9",
     "js-yaml": "^3.13.1",

src/state/hass-element.ts

@@ -12,6 +12,7 @@ import SidebarMixin from "./sidebar-mixin";
 import ThemesMixin from "./themes-mixin";
 import TranslationsMixin from "./translations-mixin";
 import { urlSyncMixin } from "./url-sync-mixin";
+import { suspendMixin } from "./suspend-mixin";
 
 const ext = <T extends Constructor>(baseClass: T, mixins): T =>
   mixins.reduceRight((base, mixin) => mixin(base), baseClass);
@@ -24,6 +25,7 @@ export class HassElement extends ext(HassBaseEl, [
   SidebarMixin,
   DisconnectToastMixin,
   connectionMixin,
+  suspendMixin,
   NotificationMixin,
   dialogManagerMixin,
   urlSyncMixin,

src/state/suspend-mixin.ts

@@ -0,0 +1,48 @@
+import { Constructor } from "../types";
+import { HassBaseEl } from "./hass-base-mixin";
+
+export const suspendMixin = <T extends Constructor<HassBaseEl>>(
+  superClass: T
+) =>
+  class extends superClass {
+    private __hiddenTimeout?: number;
+
+    private __visiblePromiseResolve?: () => void;
+
+    protected hassConnected() {
+      super.hassConnected();
+
+      document.addEventListener(
+        "visibilitychange",
+        () => this.__handleVisibilityChange(),
+        false
+      );
+    }
+
+    private __handleVisibilityChange() {
+      if (document.hidden) {
+        // If the document is hidden, we will prevent reconnects until we are visible again
+        this.hass!.connection.suspendReconnectUntil(
+          new Promise((resolve) => {
+            this.__visiblePromiseResolve = resolve;
+          })
+        );
+        // We close the connection to Home Assistant after being hidden for 5 minutes
+        this.__hiddenTimeout = window.setTimeout(() => {
+          this.__hiddenTimeout = undefined;
+          this.hass!.connection.suspend();
+        }, 300000);
+      } else {
+        // Clear timer to close the connection
+        if (this.__hiddenTimeout) {
+          clearTimeout(this.__hiddenTimeout);
+          this.__hiddenTimeout = undefined;
+        }
+        // Unsuspend the reconnect
+        if (this.__visiblePromiseResolve) {
+          this.__visiblePromiseResolve();
+          this.__visiblePromiseResolve = undefined;
+        }
+      }
+    }
+  };

yarn.lock

@@ -6613,10 +6613,10 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-home-assistant-js-websocket@^5.2.1:
+home-assistant-js-websocket@^5.3.0:
-  version "5.2.1"
+  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/home-assistant-js-websocket/-/home-assistant-js-websocket-5.2.1.tgz#88c06738416e041dfd805f2543722458d9c3a391"
+  resolved "https://registry.yarnpkg.com/home-assistant-js-websocket/-/home-assistant-js-websocket-5.3.0.tgz#261d371c72746ec8b0eb8768b286d4f865e408b7"
-  integrity sha512-azPiR+KABxaow1sMS70+Jk12KOaKSJY9KSKSGljkAArJmbWum3PEMNXXaG+XJnYmNuDnyzLAwi3/e1cwvVqocA==
+  integrity sha512-treEjeKpHB7JNrLddOf4FJudcm7hf9y23bNv/9GKiOvmmWIbblKt7UN+2V0WjPmBkSRvLmGprA/xxh5cgS8S1g==
 
 homedir-polyfill@^1.0.1:
   version "1.0.3"