First pass at connecting to console and rendering the output from the server.

Author: DaneEveritt

resources/scripts/components/server/Console.tsx

@@ -4,6 +4,7 @@ import * as TerminalFit from 'xterm/lib/addons/fit/fit';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import { State, useStoreState } from 'easy-peasy';
 import { ApplicationState } from '@/state/types';
+import { connect } from 'formik';
 
 const theme = {
     background: 'transparent',
@@ -27,7 +28,7 @@ const theme = {
 };
 
 export default () => {
-    const connected = useStoreState((state: State<ApplicationState>) => state.server.socket.connected);
+    const { instance, connected } = useStoreState((state: State<ApplicationState>) => state.server.socket);
 
     const ref = createRef<HTMLDivElement>();
     const terminal = useRef(new Terminal({
@@ -40,17 +41,34 @@ export default () => {
         theme: theme,
     }));
 
+    const handleServerLog = (lines: string[]) => lines.forEach(data => {
+        return data.split(/\n/g).forEach(line => terminal.current.writeln(line + '\u001b[0m'));
+    });
+
+    const handleConsoleOutput = (line: string) => terminal.current.writeln(line.replace(/(?:\r\n|\r|\n)$/im, '') + '\u001b[0m');
+
     useEffect(() => {
         ref.current && terminal.current.open(ref.current);
 
         // @see https://github.com/xtermjs/xterm.js/issues/2265
         // @see https://github.com/xtermjs/xterm.js/issues/2230
         TerminalFit.fit(terminal.current);
-
-        terminal.current.writeln('Testing console data');
-        terminal.current.writeln('Testing other data');
     }, []);
 
+    useEffect(() => {
+        if (connected && instance) {
+            instance.addListener('server log', handleServerLog);
+            instance.addListener('console output', handleConsoleOutput);
+        }
+    }, [connected]);
+
+    useEffect(() => () => {
+        if (instance) {
+            instance.removeListener('server log', handleServerLog);
+            instance.removeListener('console output', handleConsoleOutput);
+        }
+    });
+
     return (
         <div className={'text-xs font-mono relative'}>
             <SpinnerOverlay visible={!connected} large={true}/>

resources/scripts/plugins/Websocket.ts

@@ -39,15 +39,13 @@ export class Websocket extends EventEmitter {
         this.socket.open();
     }
 
-    json (data: any) {
-        this.socket.json(data);
-    }
-
     reconnect () {
         this.socket.reconnect();
     }
 
-    send (data: any) {
-        this.socket.send(data);
+    send (event: string, payload?: string | string[]) {
+        this.socket.send(JSON.stringify({
+            event, args: Array.isArray(payload) ? payload : [ payload ],
+        }));
     }
 }

resources/scripts/state/models/server.ts

@@ -2,7 +2,7 @@ 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 type ServerStatus = 'offline' | 'starting' | 'stopping' | 'running';
 
 export interface ServerState {
     data?: Server;