feat: begin setting up global websocket instance

- setup websocket instance in store
-setup connection, error, and close logic
- used for connecting to python backend

Author: ZanzyTHEbar

GUI/ETVR/src/components/WebSocket/index.tsx

@@ -1,51 +1,10 @@
 import { onMount } from 'solid-js'
-import { sendToRTCServer } from '@utils/hooks/websocket'
-
-const PORT = 7856
-
-interface IWebSocket {
-    ws: WebSocket
-    pc: RTCPeerConnection
-    dc: RTCDataChannel
-    camStream: any
-}
+import { initWebSocket } from '@utils/hooks/websocket'
 
 const webSocketHandler = () => {
     onMount(async () => {
-        initwebSocket()
+        initWebSocket()
     })
 }
 
-/********************************* connect *************************************/
-
-/**
- * @description initialize connection to the server
- * we use websocket heartbeat to the server
- * every 10 seconds
- */
-const initwebSocket = () => {
-    const socket: IWebSocket['ws'] = new WebSocket(`ws://127.0.0.1:${PORT}/camera/`)
-
-    socket.onopen = () => {
-        setInterval(() => {
-            sendToRTCServer(
-                {
-                    msg: {
-                        msg_type: 'heartbeat',
-                        receiver: '',
-                        sender: '',
-                        msg: '',
-                    },
-                },
-                socket,
-            )
-        }, 1000 * 10)
-    }
-
-    //* TODO: Add notification to the user
-    socket.onerror = (error) => {
-        console.log('WebSocket error: ' + error)
-    }
-}
-
 export default webSocketHandler

GUI/ETVR/src/store/api/selectors.ts

@@ -1,7 +1,43 @@
 import { createMemo } from 'solid-js'
 import { restState, endpointsMap } from './restAPI'
+import { rtcState } from './websocket'
 
 export const restStatus = createMemo(() => restState().status)
 export const restDevice = createMemo(() => restState().device)
 export const restResponse = createMemo(() => restState().response)
 export const endpoints = createMemo(() => endpointsMap)
+
+/**
+ * @description
+ * @returns {RTCState}
+ * @example
+ * const status = rtcStatus()
+ * if (status === RTCState.CONNECTED) {
+ *    // do something
+ * }
+ */
+export const rtcStatus = createMemo(() => rtcState().status)
+
+export const rtcMessageType = createMemo(() => rtcState().messageType)
+
+/**
+ * @description get the current websocket instance
+ * @returns {WebSocket} the current websocket instance
+ * @example
+ * const ws = rtcWebSocket()
+ * ws.send(JSON.stringify({ msg: 'hello' }))
+ *
+ * Note: must use a try catch block to catch any errors that may occur do to possible null values
+ * 
+ * try {
+ *   const ws = rtcWebSocket()
+ *   ws.send(JSON.stringify({ msg: 'hello' }))
+ * } catch (e) {
+ *   console.error(e)
+ * }
+ */
+export const rtcWebSocket = createMemo(() => rtcState().ws)
+
+export const rtcConnectedPeers = createMemo(() => rtcState().connectedPeers)
+export const rtcConnectInterval = createMemo(() => rtcState().connectInterval)
+export const rtcTimeout = createMemo(() => rtcState().timeout)

GUI/ETVR/src/store/api/websocket.ts

@@ -0,0 +1,72 @@
+import { createMemo } from 'solid-js'
+import { createStore, produce } from 'solid-js/store'
+import { RTCMessageType, RTCState } from '@utils/enums'
+import { sendToRTCServer } from '@utils/hooks/websocket'
+
+const PORT = 7856
+
+export interface IWebSocket {
+    ws: WebSocket
+    pc?: RTCPeerConnection
+    dc?: RTCDataChannel
+    status: RTCState
+    messageType: RTCMessageType
+    camStream?: any
+    connectedPeers?: string[]
+    connectInterval?: NodeJS.Timeout
+    timeout?: number
+}
+
+export const defaultState: IWebSocket = {
+    ws: new WebSocket(`ws://127.0.0.1:${PORT}/camera/`),
+    status: RTCState.DISCONNECTED,
+    messageType: RTCMessageType.VIDEO_OFFER,
+    camStream: null,
+    connectedPeers: [],
+    connectInterval: undefined,
+    timeout: 250,
+}
+
+const [state, setState] = createStore<IWebSocket>(defaultState)
+
+export const setRTCStatus = (status: RTCState) => {
+    setState(
+        produce((s) => {
+            s.status = status
+        }),
+    )
+}
+
+export const setRTCMessageType = (messageType: RTCMessageType) => {
+    setState(
+        produce((s) => {
+            s.messageType = messageType
+        }),
+    )
+}
+
+export const setRTCWebSocket = (ws: WebSocket) => {
+    setState(
+        produce((s) => {
+            s.ws = ws
+        }),
+    )
+}
+
+export const setConnectInterval = (interval: NodeJS.Timeout) => {
+    setState(
+        produce((s) => {
+            s.connectInterval = interval
+        }),
+    )
+}
+
+export const setRTCTimeout = (time: number) => {
+    setState(
+        produce((s) => {
+            s.timeout = time
+        }),
+    )
+}
+
+export const rtcState = createMemo(() => state)

GUI/ETVR/src/styles/index.css

@@ -72,6 +72,7 @@
     transition: background-image 300ms ease;
 }
 
+/* This style is REQUIRED due to how kobalte handles focus-visible state */
 * {
     @apply outline-none [&[data-focus-visible]]:outline-white;
 }

GUI/ETVR/src/utils/enums.ts

@@ -26,16 +26,26 @@ export enum loaderType {
 
 /**
  * @description Enum for the different types of notifications
+ * @enum {string}
+ * @property {string} ERROR - An Error notification
+ * @property {string} SUCCESS - A Success notification
+ * @property {string} INFO - An Info notification
+ * @property {string} WARNING - A Warning notification
+ * @property {string} DEFAULT - A Default notification
  */
 export enum ENotificationType {
     ERROR = 'ERROR',
     SUCCESS = 'SUCCESS',
     INFO = 'INFO',
     WARNING = 'WARNING',
+    DEFAULT = 'DEFAULT',
 }
 
 /**
  * @description Enum for the different types of notifications actions
+ * @enum {string}
+ * @property {string} OS - The notification will be handled by the OS
+ * @property {string} APP - The notification will be handled by the APP
  */
 export enum ENotificationAction {
     OS = 'OS',
@@ -44,11 +54,38 @@ export enum ENotificationAction {
 
 /**
  * @description Enum for the different types of RTC message types
+ * @enum {string}
+ * @property {string} VIDEO_OFFER - The connection is not yet open.
+ * @property {string} VIDEO_ANSWER - The connection is open and ready to communicate.
+ * @property {string} NEW_ICE_CANDIDATE - A new camera is wanting to connect.
+ * @property {string} CAMERA_ERROR - The connection is closed or couldn't be opened.
+ * @property {string} CLOSE_CAMERA_STREAM - The connection is requesting to close.
  */
 export enum RTCMessageType {
-    VIDEO_OFFER = 'video-offer',
-    VIDEO_ANSWER = 'video-answer',
-    NEW_ICE_CANDIDATE = 'new-ice-candidate',
-    REMOTE_DESKTOP = 'remote-desktop',
-    CLOSE_REMOTE_DESKTOP = 'close-remote-desktop',
+    VIDEO_OFFER = 'VIDEO_OFFER',
+    VIDEO_ANSWER = 'VIDEO_ANSWER',
+    NEW_ICE_CANDIDATE = 'NEW_ICE_CANDIDATE',
+    CAMERA_ERROR = 'CAMERA_ERROR',
+    CLOSE_CAMERA_STREAM = 'CLOSE_CAMERA_STREAM',
+}
+
+/**
+ * @description Enum for the different States of the RTC connection
+ * @enum {string}
+ * @property {string} CONNECTING - The connection is not yet open.
+ * @property {string} OPEN - The connection is open and ready to communicate.
+ * @property {string} CLOSING - The connection is in the process of closing.
+ * @property {string} CLOSED - The connection is closed or couldn't be opened.
+ * @property {string} ERROR - The connection is in an error state.
+ * @property {string} DISCONNECTED - The connection is disconnected.
+ * @property {string} CONNECTED - The connection is connected.
+ */
+export enum RTCState {
+    CONNECTING = 'CONNECTING',
+    OPEN = 'OPEN',
+    CLOSING = 'CLOSING',
+    CLOSED = 'CLOSED',
+    ERROR = 'ERROR',
+    DISCONNECTED = 'DISCONNECTED',
+    CONNECTED = 'CONNECTED',
 }

GUI/ETVR/src/utils/hooks/websocket/index.ts

@@ -1,13 +1,69 @@
+import { rtcWebSocket, rtcTimeout } from '@store/api/selectors'
+import { setRTCStatus, setConnectInterval, setRTCTimeout } from '@store/api/websocket'
+import { RTCState } from '@utils/enums'
+
 interface IWebRTCMessage {
     msg: string | object | null | undefined
 }
 
-const sendToRTCServer = (msg: IWebRTCMessage, ws: WebSocket) => {
+const sendToRTCServer = (msg: IWebRTCMessage) => {
     if (!msg) {
         console.error('[sendToRTCServer]: Message is null or undefined')
         return
     }
-    ws.send(JSON.stringify(msg))
+    rtcWebSocket().send(JSON.stringify(msg))
+}
+
+export const check = () => {
+    const ws = rtcWebSocket()
+    if (!ws || ws.readyState == WebSocket.CLOSED) {
+        //check if websocket instance is closed, if so call `init` function.
+        setRTCStatus(RTCState.DISCONNECTED)
+        initWebSocket()
+    }
+}
+
+/********************************* connect *************************************/
+/**
+ * @description initialize connection to the server
+ * we use websocket heartbeat to the server
+ * every 10 seconds
+ */
+const initWebSocket = () => {
+    setRTCStatus(RTCState.CONNECTING)
+    rtcWebSocket().onopen = () => {
+        setRTCStatus(RTCState.CONNECTED)
+        setInterval(() => {
+            sendToRTCServer({
+                msg: {
+                    msg_type: 'heartbeat',
+                    receiver: '',
+                    sender: '',
+                    msg: '',
+                },
+            })
+        }, 1000 * 10)
+    }
+    //* TODO: Add notification to the user
+    rtcWebSocket().onerror = (e) => {
+        setRTCStatus(RTCState.ERROR)
+        console.error('Socket encountered error: ', e, 'Closing socket')
+        rtcWebSocket().close()
+    }
+    //* TODO: Add notification to the user
+    rtcWebSocket().onclose = (e) => {
+        //increment retry interval
+        setRTCTimeout((rtcTimeout() as number) + (rtcTimeout() as number))
+        //call check function after timeout
+        setConnectInterval(setTimeout(check, Math.min(10000, rtcTimeout() as number)))
+        console.log(
+            `Socket is closed. Reconnect will be attempted in ${Math.min(
+                10000 / 1000,
+                ((rtcTimeout() as number) + (rtcTimeout() as number)) / 1000,
+            )} second.`,
+            e.reason,
+        )
+    }
 }
 
-export { sendToRTCServer }
+export { sendToRTCServer, initWebSocket }

GUI/ETVR/tsconfig.json

@@ -29,6 +29,7 @@
             "@src/*": ["src/*"],
             "@assets/*": ["./assets/*"],
             "@hooks/*": ["src/utils/hooks/*"],
+            "@store/*": ["src/store/*"],
             "@static/*": ["src/static/*"],
             "@utils/*": ["src/utils/*"]
         }

GUI/ETVR/vite.config.ts

@@ -16,6 +16,7 @@ export default defineConfig({
             '@src': path.resolve(__dirname, './src'),
             '@assets': path.resolve(__dirname, './assets'),
             '@hooks': path.resolve(__dirname, './src/utils/hooks'),
+            '@store': path.resolve(__dirname, './src/store'),
             '@static': path.resolve(__dirname, './src/static'),
             '@utils': path.resolve(__dirname, './src/utils'),
         },
@@ -33,5 +34,5 @@ export default defineConfig({
         minify: !process.env.TAURI_DEBUG ? 'esbuild' : false,
         // produce sourcemaps for debug builds
         sourcemap: !!process.env.TAURI_DEBUG,
-    }
+    },
 })