From fdb19e5cfb8b10672dc5e5de5cabb444ae7ae99f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maxi=20Quo=C3=9F?= <maxi@quoss.org>
Date: Tue, 31 May 2022 21:31:56 +0200
Subject: [PATCH] websocket: add notifications and reconnect on error

---
 app/frontend/src/App.svelte                   | 16 +++++--
 app/frontend/src/components/DeviceCard.svelte | 12 ++---
 app/frontend/src/components/Navbar.svelte     | 10 ++--
 app/frontend/src/socketStore.js               | 48 +++++++++++++++++++
 app/frontend/src/store.js                     | 27 -----------
 5 files changed, 72 insertions(+), 41 deletions(-)
 create mode 100644 app/frontend/src/socketStore.js
 delete mode 100644 app/frontend/src/store.js

diff --git a/app/frontend/src/App.svelte b/app/frontend/src/App.svelte
index 7123d8d7..cb5f2c48 100644
--- a/app/frontend/src/App.svelte
+++ b/app/frontend/src/App.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { onMount } from 'svelte';
-	import store from './store.js';
+	import socketStore from './socketStore.js';
 	import Navbar from "./components/Navbar.svelte";
 	import DeviceCard from "./components/DeviceCard.svelte";
 	import Toast from "./components/Toast.svelte";
@@ -16,7 +16,17 @@
 	}
 
 	onMount(() => {
-		store.subscribe(currentMessage => {
+		socketStore.subscribeStatus(status => {
+			if (status == "open") {
+				showToast("Websocket", "Connected", "success")
+			} else if (status == "close") {
+				showToast("Websocket", "Connection closed. Trying to reconnect ...", "danger")
+			} else if (status == "error") {
+				showToast("Websocket", "Error when connecting to websocket", "danger")
+			}
+		})
+
+		socketStore.subscribeMsg(currentMessage => {
 			if (currentMessage.type == "init") {
 				// create devices
 				devices = [...currentMessage.message.devices]
@@ -72,7 +82,7 @@
 				a.click();
 			} else if (currentMessage.type == "operationStatus") {
 				if (currentMessage.message == "Success") {
-					showToast(currentMessage.message, "Device was saved and will be visible on next ping", "success")
+					showToast(currentMessage.message, "Changes were saved", "success")
 				} else if (currentMessage.message == "Error") {
 					showToast(currentMessage.message, "Error while saving the device. Please check the logs.", "danger")
 				}
diff --git a/app/frontend/src/components/DeviceCard.svelte b/app/frontend/src/components/DeviceCard.svelte
index 026ee1d1..a859f920 100644
--- a/app/frontend/src/components/DeviceCard.svelte
+++ b/app/frontend/src/components/DeviceCard.svelte
@@ -1,26 +1,26 @@
 <script>
-    import store from '../store.js';
+    import socketStore from '../socketStore.js';
     export let device;
 
     let modalDevice = JSON.parse(JSON.stringify(device));
     let customPort = {}
 
 	function wake(id) {
-        store.sendMessage({
+        socketStore.sendMessage({
             type: "wake",
             id: id
         })
 	}
 
     function shutdown(id) {
-        store.sendMessage({
+        socketStore.sendMessage({
             type: "shutdown",
             id: id
         })
 	}
 
 	function deleteDevice() {
-        store.sendMessage({
+        socketStore.sendMessage({
             type: "delete_device",
             id: modalDevice.id
         })
@@ -28,7 +28,7 @@
 
     function updateDevice() {
         device = modalDevice;
-        store.sendMessage({
+        socketStore.sendMessage({
             type: "update_device",
             data: modalDevice
         })
@@ -56,7 +56,7 @@
         }
         modalDevice = modalDevice;
         // send to backend
-        store.sendMessage({
+        socketStore.sendMessage({
             type: "update_port",
             data: customPort
         })
diff --git a/app/frontend/src/components/Navbar.svelte b/app/frontend/src/components/Navbar.svelte
index 2eb32e36..665c2167 100644
--- a/app/frontend/src/components/Navbar.svelte
+++ b/app/frontend/src/components/Navbar.svelte
@@ -1,5 +1,5 @@
 <script>
-    import store from '../store.js';
+    import socketStore from '../socketStore.js';
     import DarkToggle from "./DarkToggle.svelte";
     export let visitors;
     export let settings;
@@ -20,14 +20,14 @@
         if (Object.keys(data).length < 4) {
             return
         }
-        store.sendMessage({
+        socketStore.sendMessage({
             type: "update_device",
             data: data
         })
     }
 
     function updateSettings() {
-        store.sendMessage({
+        socketStore.sendMessage({
             type: "update_settings",
             data: settings
         })
@@ -35,7 +35,7 @@
     }
 
     function scanNetwork() {
-        store.sendMessage({
+        socketStore.sendMessage({
             type: "scan_network"
         })
         const btnScan = document.querySelector("#btnScan");
@@ -76,7 +76,7 @@
     }
 
     function backupToFile() {
-        store.sendMessage({
+        socketStore.sendMessage({
             type: "backup"
         })
     }
diff --git a/app/frontend/src/socketStore.js b/app/frontend/src/socketStore.js
new file mode 100644
index 00000000..c1309d22
--- /dev/null
+++ b/app/frontend/src/socketStore.js
@@ -0,0 +1,48 @@
+import {
+    writable
+} from 'svelte/store';
+
+const status = writable('');
+const message = writable('');
+
+function initSocket() {
+    const socket = new WebSocket(`ws://${location.hostname}:${BACKEND_PORT}/wol/`);
+
+    // Connection opened
+    socket.addEventListener('open', function () {
+        status.set("open");
+    });
+
+    // Connection closed
+    socket.addEventListener('close', function () {
+        status.set("close");
+        setTimeout(function () {
+            initSocket();
+        }, 3000);
+    });
+
+    // Connection error
+    socket.addEventListener('error', function () {
+        status.set("error");
+        socket.close()
+    });
+
+    // Listen for messages
+    socket.addEventListener('message', function (event) {
+        message.set(JSON.parse(event.data));
+    });
+}
+
+initSocket()
+
+const sendMessage = (message) => {
+    if (socket.readyState <= 1) {
+        socket.send(JSON.stringify(message));
+    }
+}
+
+export default {
+    subscribeMsg: message.subscribe,
+    subscribeStatus: status.subscribe,
+    sendMessage
+}
diff --git a/app/frontend/src/store.js b/app/frontend/src/store.js
deleted file mode 100644
index 7d06a42d..00000000
--- a/app/frontend/src/store.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import {
-    writable
-} from 'svelte/store';
-
-const messageStore = writable('');
-const socket = new WebSocket(`ws://${location.hostname}:${BACKEND_PORT}/wol/`);
-
-// Connection opened
-socket.addEventListener('open', function (event) {
-    return
-});
-
-// Listen for messages
-socket.addEventListener('message', function (event) {
-    messageStore.set(JSON.parse(event.data));
-});
-
-const sendMessage = (message) => {
-    if (socket.readyState <= 1) {
-        socket.send(JSON.stringify(message));
-    }
-}
-
-export default {
-    subscribe: messageStore.subscribe,
-    sendMessage
-}