Proper websocket (dis)connect when window is hidden and restored (#4181)

assets/js/app.js

@@ -74,7 +74,9 @@ app.use(VueNumber);
 window.app = app.mount("#app");
 
 window.setInterval(function () {
-  api.get("health").then(window.app.setOnline).catch(window.app.setOffline);
+  if (!document.hidden) {
+    api.get("health").then(window.app.setOnline).catch(window.app.setOffline);
+  }
 }, 5000);
 
 watchThemeChanges();

assets/js/components/Loadpoints.vue

@@ -51,7 +51,9 @@ export default {
 		this.$refs.carousel.addEventListener("scroll", this.handleCarouselScroll, false);
 	},
 	unmounted() {
-		this.$refs.carousel.removeEventListener("scroll", this.handleCarouselScroll);
+		if (this.$refs.carousel) {
+			this.$refs.carousel.removeEventListener("scroll", this.handleCarouselScroll);
+		}
 	},
 	methods: {
 		handleCarouselScroll() {

assets/js/views/App.vue

@@ -17,20 +17,46 @@ export default {
 		offline: Boolean,
 	},
 	data: () => {
-		return { reconnectTimeout: null };
+		return { reconnectTimeout: null, ws: null };
 	},
-	created: function () {
-		const urlParams = new URLSearchParams(window.location.search);
-		this.compact = urlParams.get("compact");
-		setTimeout(this.connect, 0);
+	mounted: function () {
+		this.connect();
+		document.addEventListener("visibilitychange", this.pageVisibilityChanged, false);
+	},
+	unmounted: function () {
+		this.disconnect();
+		window.clearTimeout(this.reconnectTimeout);
+		document.removeEventListener("visibilitychange", this.pageVisibilityChanged, false);
 	},
 	methods: {
+		pageVisibilityChanged: function () {
+			if (document.hidden) {
+				window.clearTimeout(this.reconnectTimeout);
+				this.disconnect();
+			} else {
+				this.connect();
+			}
+		},
 		reconnect: function () {
 			window.clearTimeout(this.reconnectTimeout);
-			this.reconnectTimeout = window.setTimeout(this.connect, 1000);
+			this.reconnectTimeout = window.setTimeout(() => {
+				this.disconnect();
+				this.connect();
+			}, 2500);
+		},
+		disconnect: function () {
+			console.log("websocket disconnecting");
+			if (this.ws) {
+				this.ws.onerror = null;
+				this.ws.onopen = null;
+				this.ws.onclose = null;
+				this.ws.onmessage = null;
+				this.ws.close();
+				this.ws = null;
+			}
 		},
 		connect: function () {
-			console.log("connecting websocket");
+			console.log("websocket connect");
 			const supportsWebSockets = "WebSocket" in window;
 			if (!supportsWebSockets) {
 				window.app.error({
@@ -39,6 +65,11 @@ export default {
 				return;
 			}
 
+			if (this.ws) {
+				console.log("websocket already connected");
+				return;
+			}
+
 			const loc = window.location;
 			const protocol = loc.protocol == "https:" ? "wss:" : "ws:";
 			const uri =
@@ -49,21 +80,21 @@ export default {
 				loc.pathname +
 				"ws";
 
-			const ws = new WebSocket(uri);
-			ws.onerror = () => {
+			this.ws = new WebSocket(uri);
+			this.ws.onerror = () => {
 				console.error({ message: "Websocket error. Trying to reconnect." });
-				ws.close();
+				this.ws.close();
 			};
-			ws.onopen = () => {
+			this.ws.onopen = () => {
 				console.log("websocket connected");
 				window.app.setOnline();
 			};
-			ws.onclose = () => {
+			this.ws.onclose = () => {
 				console.log("websocket disconnected");
 				window.app.setOffline();
 				this.reconnect();
 			};
-			ws.onmessage = (evt) => {
+			this.ws.onmessage = (evt) => {
 				try {
 					var msg = JSON.parse(evt.data);
 					store.update(msg);

dist/index.html

@@ -20,8 +20,8 @@
     <meta name="theme-color" content="#020318" />
 
     <title>evcc</title>
-    <script type="module" crossorigin src="./assets/index.5476d018.js"></script>
-    <link rel="stylesheet" href="./assets/index.4645a392.css">
+    <script type="module" crossorigin src="./assets/index.11bca6dc.js"></script>
+    <link rel="stylesheet" href="./assets/index.d93cad38.css">
   </head>
   <body>
     <script>