From df45541ae80a5c139013d50efe0f8267d7fb1691 Mon Sep 17 00:00:00 2001
From: Thomas Basler <thomas@familie-basler.net>
Date: Sat, 18 Jun 2022 01:37:47 +0200
Subject: [PATCH] webapp: Optimized websocket handling

* auto reconnect
* Url generation
* Disconnect on component change
---
 webapp/src/components/HomeView.vue | 65 ++++++++++++++++++++++--------
 1 file changed, 48 insertions(+), 17 deletions(-)

diff --git a/webapp/src/components/HomeView.vue b/webapp/src/components/HomeView.vue
index 65cbf4f8..30dd1c3d 100644
--- a/webapp/src/components/HomeView.vue
+++ b/webapp/src/components/HomeView.vue
@@ -78,32 +78,63 @@ export default {
   },
   data() {
     return {
-      connection: null,
+      socket: null,
+      heartInterval: null,
       waitForData: true,
       inverterData: [],
     };
   },
   created() {
-    console.log("Starting connection to WebSocket Server");
+    this.initSocket();
+  },
+  unmounted() {
+    this.closeSocket();
+  },
+  methods: {
+    initSocket() {
+      console.log("Starting connection to WebSocket Server");
 
-    const socketProtocol =
-      window.location.protocol === "https:" ? "wss:" : "ws:";
-    const port = window.location.port;
-    const host = window.location.hostname;
-    const webSocketUrl = socketProtocol + "//" + host + ":" + port + "/livedata";
+      const { protocol, host } = location;
+      const webSocketUrl = `${
+        protocol === "https" ? "wss" : "ws"
+      }://${host}/livedata`;
 
-    this.connection = new WebSocket(webSocketUrl);
+      this.socket = new WebSocket(webSocketUrl);
 
-    this.connection.onmessage = function (event) {
-      console.log(event);
-      this.inverterData = JSON.parse(event.data);
-      this.waitForData = false;
-    }.bind(this);
+      this.socket.onmessage = function (event) {
+        console.log(event);
+        this.inverterData = JSON.parse(event.data);
+        this.waitForData = false;
+        this.heartCheck(); // Reset heartbeat detection
+      }.bind(this);
 
-    this.connection.onopen = function (event) {
-      console.log(event);
-      console.log("Successfully connected to the echo websocket server...");
-    };
+      this.socket.onopen = function (event) {
+        console.log(event);
+        console.log("Successfully connected to the echo websocket server...");
+      };
+
+      // Listen to window events , When the window closes , Take the initiative to disconnect websocket Connect
+      window.onbeforeunload = () => {
+        this.closeSocket();
+      };
+    },
+    // Send heartbeat packets regularly * 59s Send a heartbeat
+    heartCheck() {
+      this.heartInterval && clearTimeout(this.heartInterval);
+      this.heartInterval = setInterval(() => {
+        if (this.socket.readyState === 1) {
+          // Connection status
+          this.socket.send("ping");
+        } else {
+            this.initSocket(); // Breakpoint reconnection 5 Time
+        }
+      }, 59 * 1000);
+    },
+    /** To break off websocket Connect */
+    closeSocket() {
+      this.socket.close();
+      this.heartInterval && clearTimeout(this.heartInterval);
+    },
   },
 };
 </script>
\ No newline at end of file