From 4afa716251ad0fe8f59198b34d08f359c7d727fe Mon Sep 17 00:00:00 2001
From: riqo <hernandeze2@xavier.edu>
Date: Thu, 24 Jun 2021 07:50:58 -0500
Subject: [PATCH] show connection status poc

---
 src/composables/useWebsockets.ts           | 25 ++++++++++++++++------
 src/main.ts                                |  2 --
 src/render/components/connectionStatus.vue | 23 ++++++++++++++------
 src/render/shared/connectionStatus.ts      | 16 ++++----------
 src/session.ts                             | 15 +++++++++----
 5 files changed, 51 insertions(+), 30 deletions(-)

diff --git a/src/composables/useWebsockets.ts b/src/composables/useWebsockets.ts
index d1cfc02..aed517c 100644
--- 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 efa8f14..a360835 100644
--- 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 7dccf1a..c02b43a 100644
--- 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 7fb15eb..742a6be 100644
--- 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 912aa68..701cb8a 100644
--- 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 */
-- 
2.43.0