Change socket implementation for servers

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

@@ -70,18 +70,19 @@
     import Navigation from '../core/Navigation';
     import ProgressBar from './components/ProgressBar';
     import { mapState } from 'vuex';
-    import VueSocketio from 'vue-socket.io-extended';
     import io from 'socket.io-client';
-    import Vue from 'vue';
+    import { Socketio } from './../../mixins/socketio';
 
     import PowerButtons from './components/PowerButtons';
     import Flash from '../Flash';
 
     export default {
+        name: 'server',
+        mixins: [Socketio],
         components: {
             Flash,
             PowerButtons, ProgressBar, Navigation,
-            TerminalIcon, FolderIcon, UsersIcon, CalendarIcon, DatabaseIcon, GlobeIcon, SettingsIcon
+            TerminalIcon, FolderIcon, UsersIcon, CalendarIcon, DatabaseIcon, GlobeIcon, SettingsIcon,
         },
 
         computed: {
@@ -95,10 +96,20 @@
             };
         },
 
+        sockets: {
+            'console': function () {
+                console.log('server CONSOLE');
+            },
+        },
+
         mounted: function () {
             this.loadServer();
         },
 
+        beforeDestroy: function () {
+            this.removeSocket();
+        },
+
         methods: {
             /**
              * Load the core server information needed for these pages to be functional.
@@ -115,7 +126,7 @@
                             query: `token=${this.credentials.key}`,
                         });
 
-                        Vue.use(VueSocketio, socket, { store: this.$store });
+                        this.$socket().connect(socket);
                         this.loadingServerData = false;
                     })
                     .catch(console.error);

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

@@ -24,11 +24,12 @@
 
 <script>
     import Status from './../../../helpers/statuses';
+    import { Socketio } from './../../../mixins/socketio';
     import { mapState } from 'vuex';
 
     export default {
         name: 'power-buttons',
-
+        mixins: [Socketio],
         computed: {
             ...mapState('socket', ['connected', 'status']),
         },
@@ -41,7 +42,7 @@
 
         methods: {
             sendPowerAction: function (action) {
-                this.$socket.emit('set status', action)
+                this.$socket().instance().emit('set status', action)
             },
         },
     };

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

@@ -28,10 +28,12 @@
     import { Terminal } from 'xterm';
     import * as TerminalFit from 'xterm/lib/addons/fit/fit';
     import {mapState} from 'vuex';
+    import {Socketio} from './../../../mixins/socketio';
 
     Terminal.applyAddon(TerminalFit);
 
     export default {
+        mixins: [Socketio],
         name: 'console-page',
         computed: {
             ...mapState('socket', ['connected']),
@@ -103,7 +105,7 @@
                 this.terminal.fit();
                 this.terminal.clear();
 
-                this.$socket.emit('send server log');
+                this.$socket().instance().emit('send server log');
             },
 
             /**
@@ -112,7 +114,7 @@
             sendCommand: function () {
                 this.commandHistoryIndex = -1;
                 this.commandHistory.unshift(this.command);
-                this.$socket.emit('send command', this.command);
+                this.$socket().instance().emit('send command', this.command);
                 this.command = '';
             },