Very rough go at connecting to socket and rendering console data for server

resources/assets/scripts/components/server/Server.vue

@@ -69,6 +69,8 @@
     import {mapState} from 'vuex';
     import { ConsolePage } from './subpages/ConsolePage';
 
+    import io from 'socket.io-client';
+
     export default {
         components: {
             ProgressBar, Navigation, ConsolePage, TerminalIcon, FolderIcon, UsersIcon,
@@ -76,7 +78,7 @@
         },
 
         computed: {
-            ...mapState('server', ['server']),
+            ...mapState('server', ['server', 'credentials']),
         },
 
         mounted: function () {
@@ -85,20 +87,70 @@
 
         data: function () {
             return {
+                socket: null,
                 loadingServerData: true,
             };
         },
 
         methods: {
+            /**
+             * Load the core server information needed for these pages to be functional.
+             */
             loadServer: function () {
-                this.$store.dispatch('server/getServer', {server: this.$route.params.id})
+                Promise.all([
+                    this.$store.dispatch('server/getServer', {server: this.$route.params.id}),
+                    this.$store.dispatch('server/getCredentials', {server: this.$route.params.id})
+                ])
                     .then(() => {
                         this.loadingServerData = false;
+                        this.initalizeWebsocket();
                     })
-                    .catch(err => {
-                        console.error(err);
-                    });
+                    .catch(console.error);
             },
-        }
+
+            initalizeWebsocket: function () {
+                this.$store.commit('server/CONSOLE_DATA', 'Connecting to ' + this.credentials.node + '...');
+                this.socket = io(this.credentials.node + '/v1/ws/' + this.server.uuid, {
+                    query: 'token=' + this.credentials.key,
+                });
+
+                this.socket.on('error', this._socket_error);
+                this.socket.on('connect', this._socket_connect);
+                this.socket.on('status', this._socket_status);
+                this.socket.on('initial status', this._socket_status);
+                this.socket.on('server log', this._socket_serverLog);
+                this.socket.on('console', this._socket_consoleLine);
+            },
+
+            _socket_error: function (err) {
+                this.$store.commit('server/CONSOLE_DATA', 'There was a socket error: ' + err);
+                console.error('there was a socket error:', err);
+            },
+
+            _socket_connect: function () {
+                this.$store.commit('server/CONSOLE_DATA', 'Connected to socket.');
+                this.socket.emit('send server log');
+                console.log('connected');
+            },
+
+            _socket_status: function (data) {
+                this.$store.commit('server/CONSOLE_DATA', 'Server state has changed.');
+                console.warn(data);
+            },
+
+            _socket_serverLog: function (data) {
+                data.split(/\n/g).forEach(item => {
+                    this.$store.commit('server/CONSOLE_DATA', item);
+                });
+            },
+
+            _socket_consoleLine: function (data) {
+                if(data.line) {
+                    data.line.split(/\n/g).forEach((item) => {
+                        this.$store.commit('server/CONSOLE_DATA', item);
+                    });
+                }
+            }
+        },
     }
 </script>

resources/assets/scripts/components/server/subpages/ConsolePage.vue

@@ -1,8 +1,8 @@
 <template>
     <div>
         <div class="text-xs font-mono">
-            <div class="rounded-t p-2 bg-black text-grey-lightest h-48">
-
+            <div class="rounded-t p-2 bg-black text-grey-lightest overflow-scroll" style="min-height: 16rem;max-height:32rem;">
+                <span class="block" v-for="line in console">{{line}}</span>
             </div>
             <div class="rounded-b p-2 bg-grey-darkest text-white">$</div>
         </div>
@@ -10,9 +10,15 @@
 </template>
 
 <script>
+    import {mapState} from 'vuex';
+
     export default {
         name: 'console-page',
 
+        computed: {
+            ...mapState('server', ['console']),
+        },
+
         data: function () {
             return {
                 lines: [],

resources/assets/scripts/store/modules/server.js

@@ -1,10 +1,11 @@
 import route from '../../../../../vendor/tightenco/ziggy/src/js/route';
-import Server from '../../models/server';
 
 export default {
     namespaced: true,
     state: {
         server: {},
+        credentials: {node: '', key: ''},
+        console: [],
     },
     getters: {
     },
@@ -34,10 +35,44 @@ export default {
                     .catch(reject);
             });
         },
+
+        /**
+         * Get authentication credentials that the client should use when connecting to the daemon to
+         * retrieve server information.
+         *
+         * @param commit
+         * @param {String} server
+         * @returns {Promise<any>}
+         */
+        getCredentials: ({commit}, {server}) => {
+            return new Promise((resolve, reject) => {
+                window.axios.get(route('server.credentials', {server}))
+                    .then(response => {
+                        // If there is a 302 redirect or some other odd behavior (basically, response that isnt
+                        // in JSON format) throw an error and don't try to continue with the login.
+                        if (!(response.data instanceof Object)) {
+                            return reject(new Error('An error was encountered while processing this request.'));
+                        }
+
+                        if (response.data.key) {
+                            commit('SERVER_CREDENTIALS', response.data)
+                        }
+
+                        return resolve();
+                    })
+                    .catch(reject);
+            });
+        },
     },
     mutations: {
         SERVER_DATA: function (state, data) {
             state.server = data;
-        }
+        },
+        SERVER_CREDENTIALS: function (state, credentials) {
+            state.credentials = credentials;
+        },
+        CONSOLE_DATA: function (state, data) {
+            state.console.push(data);
+        },
     },
 }