Add underlying code to handle authenticating websocket credentials

resources/scripts/api/server/getWebsocketToken.ts

@@ -0,0 +1,9 @@
+import http from '@/api/http';
+
+export default (server: string): Promise<string> => {
+    return new Promise((resolve, reject) => {
+        http.get(`/api/client/servers/${server}/websocket`)
+            .then(response => resolve(response.data.data.socket))
+            .catch(reject);
+    });
+};

resources/scripts/components/server/Console.tsx

@@ -59,7 +59,7 @@ export default () => {
             terminal.clear();
 
             instance
-                .addListener('stats', data => console.log(JSON.parse(data)))
+                // .addListener('stats', data => console.log(JSON.parse(data)))
                 .addListener('console output', handleConsoleOutput);
 
             instance.send('send logs');
@@ -67,7 +67,7 @@ export default () => {
 
         return () => {
             instance && instance
-                .removeListener('console output', handleConsoleOutput)
+                .removeAllListeners('console output')
                 .removeAllListeners('stats');
         };
     }, [ connected, instance ]);

resources/scripts/components/server/WebsocketHandler.tsx

@@ -15,19 +15,21 @@ export default () => {
             return;
         }
 
-        console.log('Connecting!');
-
-        const socket = new Websocket(
-            `wss://wings.pterodactyl.test:8080/api/servers/${server.uuid}/ws`,
-            'CC8kHCuMkXPosgzGO6d37wvhNcksWxG6kTrA',
-        );
+        const socket = new Websocket(server.uuid);
 
         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);
+        socket.connect()
+            .then(() => setInstance(socket))
+            .catch(error => console.error(error));
+
+        return () => {
+            socket && socket.close();
+            instance && instance!.removeAllListeners();
+        };
     }, [ server ]);
 
     return null;

resources/scripts/plugins/Websocket.ts

@@ -1,4 +1,5 @@
 import Sockette from 'sockette';
+import getWebsocketToken from '@/api/server/getWebsocketToken';
 import { EventEmitter } from 'events';
 
 export const SOCKET_EVENTS = [
@@ -9,42 +10,53 @@ export const SOCKET_EVENTS = [
 ];
 
 export class Websocket extends EventEmitter {
-    socket: Sockette;
+    private socket: Sockette | null;
+    private readonly uuid: string;
 
-    constructor (url: string, protocol: string) {
+    constructor (uuid: 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'),
-        });
+        this.socket = null;
+        this.uuid = uuid;
+    }
+
+    async connect (): Promise<void> {
+        getWebsocketToken(this.uuid)
+            .then(url => {
+                this.socket = new Sockette(url, {
+                    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'),
+                });
+
+                return Promise.resolve();
+            })
+            .catch(error => Promise.reject(error));
     }
 
     close (code?: number, reason?: string) {
-        this.socket.close(code, reason);
+        this.socket && this.socket.close(code, reason);
     }
 
     open () {
-        this.socket.open();
+        this.socket && this.socket.open();
     }
 
     reconnect () {
-        this.socket.reconnect();
+        this.socket && this.socket.reconnect();
     }
 
     send (event: string, payload?: string | string[]) {
-        this.socket.send(JSON.stringify({
+        this.socket && this.socket.send(JSON.stringify({
             event, args: Array.isArray(payload) ? payload : [ payload ],
         }));
     }

resources/scripts/routers/ServerRouter.tsx

@@ -39,6 +39,7 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
                 </div>
             </CSSTransition>
             <Provider store={ServerContext.useStore()}>
+                <WebsocketHandler/>
                 <TransitionRouter>
                     <div className={'w-full mx-auto'} style={{ maxWidth: '1200px' }}>
                         {!server ?
@@ -47,7 +48,6 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
                             </div>
                             :
                             <React.Fragment>
-                                <WebsocketHandler/>
                                 <Switch location={location}>
                                     <Route path={`${match.path}`} component={ServerConsole} exact/>
                                     <Route path={`${match.path}/files`} component={FileManagerContainer} exact/>