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; 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/render/components/connectionStatus.vue b/src/render/components/connectionStatus.vue new file mode 100644 index 0000000..c02b43a --- /dev/null +++ b/src/render/components/connectionStatus.vue @@ -0,0 +1,37 @@ + + + + + + + diff --git a/src/render/components/header.vue b/src/render/components/header.vue index ebc47c6..a97f061 100644 --- a/src/render/components/header.vue +++ b/src/render/components/header.vue @@ -9,6 +9,7 @@ class="menuButton minimizeButton" @click.prevent="postNavBarMin" /> + @@ -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'); diff --git a/src/render/listeners.ts b/src/render/listeners.ts index 0a05208..3a7b547 100644 --- a/src/render/listeners.ts +++ b/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 }); diff --git a/src/render/shared/connectionStatus.ts b/src/render/shared/connectionStatus.ts index 8e675dd..742a6be 100644 --- a/src/render/shared/connectionStatus.ts +++ b/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 = (payload) => { - if (payload) { - isAlive.value = payload; - } else { - loading.value = true; - } +export const status = ref(""); +export const setConnectionStatus: IpcListenerCallback = (payload) => { + status.value = payload; }; export default { - isAlive + status }; diff --git a/src/session.ts b/src/session.ts index 01a105c..701cb8a 100644 --- a/src/session.ts +++ b/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 */