websocket: add notifications and reconnect on error

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")
 				}

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
         })

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"
         })
     }

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
+}

app/frontend/src/store.js

@@ -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
-}