Merge branch 'connection_status' into 'dev'

Connection status

See merge request crimata/electron-app!5

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,

src/render/components/connectionStatus.vue

@@ -0,0 +1,37 @@
+<template>
+    <div class="statusContainer">
+        <div>{{status}}</div>
+    </div>
+
+</template>
+
+
+<script lang="ts">
+
+import { defineComponent } from 'vue'
+import { status } from "@/render/shared/connectionStatus";
+
+export default defineComponent({
+    name: "ConnectionStatus",
+
+    setup() {
+        return {
+            status
+        }
+    }
+
+});
+
+</script>
+
+
+<style lang="scss">
+.statusContainer {
+    width: 100vw;
+    display: flex;
+    justify-content: center;
+    :first-child {
+        margin-right: 2px;
+    }
+}
+</style>

src/render/components/header.vue

@@ -9,6 +9,7 @@
         class="menuButton minimizeButton"
         @click.prevent="postNavBarMin"
       />
+      <connection-status />
     </span>
 </template>
 
@@ -18,8 +19,11 @@
     import { defineComponent } from "vue";
     import { postNavBar } from "@/render/ipc";
 
+    import ConnectionStatus from "./connectionStatus.vue";
+
     export default defineComponent({
         name: "Header",
+        components: { ConnectionStatus },
         setup() {
             const postNavBarExit = () => postNavBar('close');
             const postNavBarMin = () => postNavBar('min');

src/render/listeners.ts

@@ -12,6 +12,7 @@ const SET_PROFILE_CHANNEL = "set-profile";
 const INIT_MESSAGES_CHANNEL = "init-messages";
 const ADD_MESSAGE_CHANNEL = "add-message";
 const UPDATE_MESSAGE_CHANNEL = "update-message";
+const CONNECTION_STATUS_CHANNEL = "set-connection-status";
 
 export const setProfileListener = new IpcRendererListener({
     channel: SET_PROFILE_CHANNEL,
@@ -35,7 +36,7 @@ export const updateMessagesListener = new IpcRendererListener({
 });
 
 export const connectionStatusListener = new IpcRendererListener({
-    channel: UPDATE_MESSAGE_CHANNEL,
+    channel: CONNECTION_STATUS_CHANNEL,
     listenerCallback: setConnectionStatus
 });
 

src/render/shared/connectionStatus.ts

@@ -1,18 +1,12 @@
 // shared
 import { ref } from "vue";
 
-export const isAlive = ref(false);
-export const loading = ref(true);
-
-export const setConnectionStatus: IpcListenerCallback<boolean | null> = (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
 };

src/session.ts

@@ -60,14 +60,21 @@ const onMessageCallback = (payload: string) => {
 
 }
 
-const onConnectionStatusCallback = (alive: boolean) => {
-    console.log('[Session]: Connection Alive: ', alive);
-    // ipcEmit('connection-state', alive);
+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 */