From e13f90a6cc1e8bda7455d3b80ac12554a8a04bb7 Mon Sep 17 00:00:00 2001 From: riqo Date: Wed, 23 Jun 2021 08:48:58 -0500 Subject: [PATCH 1/2] add connectionStatus state and component --- src/main.ts | 2 ++ src/render/components/connectionStatus.vue | 26 ++++++++++++++++++++++ src/render/components/header.vue | 4 ++++ src/render/listeners.ts | 3 ++- src/render/shared/connectionStatus.ts | 2 ++ src/session.ts | 6 ++--- 6 files changed, 39 insertions(+), 4 deletions(-) create mode 100644 src/render/components/connectionStatus.vue diff --git a/src/main.ts b/src/main.ts index a360835..efa8f14 100644 --- a/src/main.ts +++ b/src/main.ts @@ -24,6 +24,8 @@ 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 new file mode 100644 index 0000000..7dccf1a --- /dev/null +++ b/src/render/components/connectionStatus.vue @@ -0,0 +1,26 @@ + + + + + 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..7fb15eb 100644 --- a/src/render/shared/connectionStatus.ts +++ b/src/render/shared/connectionStatus.ts @@ -2,9 +2,11 @@ import { ref } from "vue"; export const isAlive = ref(false); + export const loading = ref(true); export const setConnectionStatus: IpcListenerCallback = (payload) => { + console.log('received payload', payload) if (payload) { isAlive.value = payload; } else { diff --git a/src/session.ts b/src/session.ts index 01a105c..912aa68 100644 --- a/src/session.ts +++ b/src/session.ts @@ -60,9 +60,9 @@ const onMessageCallback = (payload: string) => { } -const onConnectionStatusCallback = (alive: boolean) => { - console.log('[Session]: Connection Alive: ', alive); - // ipcEmit('connection-state', alive); +const onConnectionStatusCallback = (isAlive: boolean | Error) => { + console.log('[Session]: Connection Alive: ', isAlive); + ipcEmit('set-connection-status', isAlive); } const { connect, send, close } = useWebsockets( From 4afa716251ad0fe8f59198b34d08f359c7d727fe Mon Sep 17 00:00:00 2001 From: riqo Date: Thu, 24 Jun 2021 07:50:58 -0500 Subject: [PATCH 2/2] 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; 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 @@ + + 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 = (payload) => { - console.log('received payload', 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 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 */