show connection status poc

diff --git a/src/composables/useWebsockets.ts b/src/composables/useWebsockets.ts
index d1cfc02b2ebd03135eb73ce339b937862a358912..aed517c3128428d887243fddeea281273f6930a2 100644 (file)
--- a/src/composables/useWebsockets.ts
+++ b/src/composables/useWebsockets.ts
@@ -11,7 +11,13 @@ let _connectionCheckInterval: ReturnType<typeof setTimeout>;
 
 export default function useWebSockets(
     messageCallback: (message: string) => void,
-    connectionStatusCallback: (alive: boolean) => void,
+    connectionStatusCallback: (status: string) => void,
+    statusOptions?: {
+       openMessage: string,
+       pongMessage: string,
+       closeMessage: string,
+       pingErrorMessage: string,
+    },
 ) {
 
     let socket: WebSocket;
@@ -41,13 +47,15 @@ export default function useWebSockets(
 
             socket.send(JSON.stringify({key: secret}));
 
+            connectionStatusCallback(statusOptions ? statusOptions.openMessage : "Connection Opened");
+
             // ping server
             _connectionCheckInterval = setInterval(() => {
 
                 socket.ping(null, true, (e: Error) => {
                     if (e) {
                         socket.close();
-                        connectionStatusCallback(false);
+                        connectionStatusCallback(statusOptions ? statusOptions.pingErrorMessage : "Connection Lost");
                         setTimeout(() => connect(socketUrl, secret), _reconnectTimeout);
                     }
                 });
@@ -62,15 +70,20 @@ export default function useWebSockets(
         });
 
         socket.on("close", (event: WebSocket.CloseEvent) => {
-            connectionStatusCallback(false);
+            connectionStatusCallback(statusOptions ? statusOptions.closeMessage : "Connection Closed");
             clearInterval(_connectionCheckInterval);
             if (!event.wasClean) {
-                setTimeout(() => connect(socketUrl, secret), _reconnectTimeout);
+                setTimeout(() => {
+                    connect(socketUrl, secret), _reconnectTimeout
+                });
+
             }
 
         });
 
-        socket.on("pong", () => connectionStatusCallback(true));
+        socket.on("pong", () => connectionStatusCallback(statusOptions ? statusOptions.pongMessage : "Pong"));
+
+        socket.on('error', () => {});
 
     }
 
@@ -78,7 +91,7 @@ export default function useWebSockets(
         if (socket) {
             socket.close();
         }
-    }
+    };
 
     return {
         connect,

diff --git a/src/main.ts b/src/main.ts
index efa8f14657e8a4ba575d0277caa89f259a8f6aa8..a360835a692426a0352df7ac43114372b958858c 100644 (file)
--- a/src/main.ts
+++ b/src/main.ts
@@ -24,8 +24,6 @@ export default async function main() {
     /* launch browser window */
     await createWindow();
 
-    console.log('[Session]: Connection Alive: ', "loading");
-
     try {
         authState = await accountAuth() as AuthState;
     } catch(e) {

diff --git a/src/render/components/connectionStatus.vue b/src/render/components/connectionStatus.vue
index 7dccf1ac94f860ba33354e3d6359f5caa30c7fd0..c02b43a69c81e8a4d2fb75b184922a5287a78fc8 100644 (file)
--- a/src/render/components/connectionStatus.vue
+++ b/src/render/components/connectionStatus.vue
@@ -1,26 +1,37 @@
 <template>
-    <div>
-        <div v-if="isAlive">Nominal</div>
-        <div v-else>Connecting</div>
+    <div class="statusContainer">
+        <div>{{status}}</div>
     </div>
+
 </template>
 
 
 <script lang="ts">
 
 import { defineComponent } from 'vue'
-import { isAlive } from "@/render/shared/connectionStatus";
+import { status } from "@/render/shared/connectionStatus";
 
 export default defineComponent({
     name: "ConnectionStatus",
 
     setup() {
         return {
-            isAlive
+            status
         }
     }
 
-})
+});
 
 </script>
 
+
+<style lang="scss">
+.statusContainer {
+    width: 100vw;
+    display: flex;
+    justify-content: center;
+    :first-child {
+        margin-right: 2px;
+    }
+}
+</style>

diff --git a/src/render/shared/connectionStatus.ts b/src/render/shared/connectionStatus.ts
index 7fb15eb870c35510da5b80587852828661e774ae..742a6be5c69eaa0f53ae83e566a0dc9fd75b66ff 100644 (file)
--- a/src/render/shared/connectionStatus.ts
+++ b/src/render/shared/connectionStatus.ts
@@ -1,20 +1,12 @@
 // shared
 import { ref } from "vue";
 
-export const isAlive = ref(false);
-
-export const loading = ref(true);
-
-export const setConnectionStatus: IpcListenerCallback<boolean | null> = (payload) => {
-    console.log('received payload', payload)
-    if (payload) {
-        isAlive.value = payload;
-    } else {
-        loading.value = true;
-    }
+export const status = ref("");
 
+export const setConnectionStatus: IpcListenerCallback<string> = (payload) => {
+    status.value = payload;
 };
 
 export default {
-    isAlive
+    status
 };

diff --git a/src/session.ts b/src/session.ts
index 912aa685db4d08e2bbcc14ef177301dc31b44cf5..701cb8a67a2e67625dcf9ff4a6a98a6d9081156b 100644 (file)
--- a/src/session.ts
+++ b/src/session.ts
@@ -60,14 +60,21 @@ const onMessageCallback = (payload: string) => {
 
 }
 
-const onConnectionStatusCallback = (isAlive: boolean | Error) => {
-    console.log('[Session]: Connection Alive: ', isAlive);
-    ipcEmit('set-connection-status', isAlive);
+const connectionStatusCallback = (status: string) => {
+    ipcEmit('set-connection-status', status);
+}
+
+const statusOptions = {
+   openMessage: "Connected",
+   pongMessage: "Nominal",
+   closeMessage: "Reconnecting",
+   pingErrorMessage: "Connection Lost",
 }
 
 const { connect, send, close } = useWebsockets(
     onMessageCallback,
-    onConnectionStatusCallback
+    connectionStatusCallback,
+    statusOptions
 );
 
 /* send a message to the platform */