Correctly handle socket state in the app and make it possible to listen for events

resources/scripts/components/server/WebsocketHandler.tsx

@@ -1,13 +1,13 @@
 import React, { useEffect } from 'react';
 import { Actions, State, useStoreActions, useStoreState } from 'easy-peasy';
 import { ApplicationState } from '@/state/types';
-import Sockette from 'sockette';
+import { Websocket } from '@/plugins/Websocket';
 
 export default () => {
     const server = useStoreState((state: State<ApplicationState>) => state.server.data);
     const instance = useStoreState((state: State<ApplicationState>) => state.server.socket.instance);
-    const setInstance = useStoreActions((actions: Actions<ApplicationState>) => actions.server.socket.setInstance);
-    const setConnectionState = useStoreActions((actions: Actions<ApplicationState>) => actions.server.socket.setConnectionState);
+    const setServerStatus = useStoreActions((actions: Actions<ApplicationState>) => actions.server.setServerStatus);
+    const { setInstance, setConnectionState } = useStoreActions((actions: Actions<ApplicationState>) => actions.server.socket);
 
     useEffect(() => {
         // If there is already an instance or there is no server, just exit out of this process
@@ -16,19 +16,20 @@ export default () => {
             return;
         }
 
-        console.log('need to connect to instance');
-        const socket = new Sockette(`wss://wings.pterodactyl.test:8080/api/servers/${server.uuid}/ws`, {
-            protocols: 'CC8kHCuMkXPosgzGO6d37wvhNcksWxG6kTrA',
-            // onmessage: (ev) => console.log(ev),
-            onopen: () => setConnectionState(true),
-            onclose: () => setConnectionState(false),
-            onerror: () => setConnectionState(false),
-        });
+        console.log('Connecting!');
 
-        console.log('Setting instance!');
+        const socket = new Websocket(
+            `wss://wings.pterodactyl.test:8080/api/servers/${server.uuid}/ws`,
+            'CC8kHCuMkXPosgzGO6d37wvhNcksWxG6kTrA'
+        );
+
+        socket.on('SOCKET_OPEN', () => setConnectionState(true));
+        socket.on('SOCKET_CLOSE', () => setConnectionState(false));
+        socket.on('SOCKET_ERROR', () => setConnectionState(false));
+        socket.on('status', (status) => setServerStatus(status));
 
         setInstance(socket);
-    }, [server]);
+    }, [ server ]);
 
     return null;
 };

resources/scripts/plugins/Websocket.ts

@@ -0,0 +1,53 @@
+import Sockette from 'sockette';
+import { EventEmitter } from 'events';
+
+export const SOCKET_EVENTS = [
+    'SOCKET_OPEN',
+    'SOCKET_RECONNECT',
+    'SOCKET_CLOSE',
+    'SOCKET_ERROR',
+];
+
+export class Websocket extends EventEmitter {
+    socket: Sockette;
+
+    constructor (url: string, protocol: string) {
+        super();
+
+        this.socket = new Sockette(url, {
+            protocols: protocol,
+            onmessage: e => {
+                try {
+                    let { event, args } = JSON.parse(e.data);
+                    this.emit(event, ...args);
+                } catch (ex) {
+                    console.warn('Failed to parse incoming websocket message.', ex);
+                }
+            },
+            onopen: () => this.emit('SOCKET_OPEN'),
+            onreconnect: () => this.emit('SOCKET_RECONNECT'),
+            onclose: () => this.emit('SOCKET_CLOSE'),
+            onerror: () => this.emit('SOCKET_ERROR'),
+        });
+    }
+
+    close (code?: number, reason?: string) {
+        this.socket.close(code, reason);
+    }
+
+    open () {
+        this.socket.open();
+    }
+
+    json (data: any) {
+        this.socket.json(data);
+    }
+
+    reconnect () {
+        this.socket.reconnect();
+    }
+
+    send (data: any) {
+        this.socket.send(data);
+    }
+}

resources/scripts/state/models/server.ts

@@ -2,16 +2,21 @@ import getServer, { Server } from '@/api/server/getServer';
 import { action, Action, thunk, Thunk } from 'easy-peasy';
 import socket, { SocketState } from './socket';
 
+export type ServerStatus = 'offline' | 'starting' | 'stopping' | 'online';
+
 export interface ServerState {
     data?: Server;
+    status: ServerStatus;
     socket: SocketState;
     getServer: Thunk<ServerState, string, {}, any, Promise<void>>;
     setServer: Action<ServerState, Server>;
+    setServerStatus: Action<ServerState, ServerStatus>;
     clearServerState: Action<ServerState>;
 }
 
 const server: ServerState = {
     socket,
+    status: 'offline',
     getServer: thunk(async (actions, payload) => {
         const server = await getServer(payload);
         actions.setServer(server);
@@ -19,10 +24,14 @@ const server: ServerState = {
     setServer: action((state, payload) => {
         state.data = payload;
     }),
+    setServerStatus: action((state, payload) => {
+        state.status = payload;
+    }),
     clearServerState: action(state => {
         state.data = undefined;
 
         if (state.socket.instance) {
+            state.socket.instance.removeAllListeners();
             state.socket.instance.close();
         }
 

resources/scripts/state/models/socket.ts

@@ -1,10 +1,10 @@
 import { Action, action } from 'easy-peasy';
-import Sockette from 'sockette';
+import { Websocket } from '@/plugins/Websocket';
 
 export interface SocketState {
-    instance: Sockette | null;
+    instance: Websocket | null;
     connected: boolean;
-    setInstance: Action<SocketState, Sockette | null>;
+    setInstance: Action<SocketState, Websocket | null>;
     setConnectionState: Action<SocketState, boolean>;
 }