Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Implement basic support for connecting to wings console via websocket rather than socketio

Browse source
This commit is contained in:
Dane Everitt 2019-05-01 20:12:20 -07:00
parent 0757d8856b
commit e87c5f6657
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
12 changed files with 122 additions and 117 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
package.json
View file

@ -6,7 +6,7 @@
"feather-icons": "^4.10.0", "feather-icons": "^4.10.0",
"jquery": "^3.3.1", "jquery": "^3.3.1",
"lodash": "^4.17.11", "lodash": "^4.17.11",
"socket.io-client": "^2.1.1", "socket.io-client": "^2.2.0",
"vee-validate": "^2.1.7", "vee-validate": "^2.1.7",
"vue": "^2.6.4", "vue": "^2.6.4",
"vue-axios": "^2.1.1", "vue-axios": "^2.1.1",
@ -14,6 +14,7 @@
"vue-router": "^3.0.1", "vue-router": "^3.0.1",
"vuex": "^3.0.1", "vuex": "^3.0.1",
"vuex-router-sync": "^5.0.0", "vuex-router-sync": "^5.0.0",
"ws-wrapper": "^2.0.0",
"xterm": "^3.5.1" "xterm": "^3.5.1"
}, },
"devDependencies": { "devDependencies": {

4
public/themes/pterodactyl/js/frontend/console.js
View file

@ -65,7 +65,7 @@ $(document).ready(function () {
if (e.which === 13) { if (e.which === 13) {
saveToHistory($(this).val()); saveToHistory($(this).val());
Socket.emit((ConsoleServerStatus !== 0) ? 'send command' : 'set status', $(this).val()); Socket.emit((ConsoleServerStatus !== 0) ? 'send command' : 'set state', $(this).val());
$(this).val(''); $(this).val('');
} }
@ -233,7 +233,7 @@ function updateServerPowerControls (data) {
$(document).ready(function () { $(document).ready(function () {
$('[data-attr="power"]').click(function (event) { $('[data-attr="power"]').click(function (event) {
if (! $(this).hasClass('disabled')) { if (! $(this).hasClass('disabled')) {
Socket.emit('set status', $(this).data('action')); Socket.emit('set state', $(this).data('action'));
} }
}); });

17
resources/assets/scripts/components/server/Server.vue
View file

@ -34,6 +34,11 @@
Databases Databases
</router-link> </router-link>
</li> </li>
<li>
<router-link :to="{ name: 'server-network' }">
Networking
</router-link>
</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -54,7 +59,6 @@
import Vue from 'vue'; import Vue from 'vue';
import Navigation from '@/components/core/Navigation.vue'; import Navigation from '@/components/core/Navigation.vue';
import {mapState} from 'vuex'; import {mapState} from 'vuex';
import * as io from 'socket.io-client';
import {Socketio} from "@/mixins/socketio"; import {Socketio} from "@/mixins/socketio";
import PowerButtons from "@/components/server/components/PowerButtons.vue"; import PowerButtons from "@/components/server/components/PowerButtons.vue";
import Flash from "@/components/Flash.vue"; import Flash from "@/components/Flash.vue";
@ -105,13 +109,12 @@
this.$store.dispatch('server/getCredentials', {server: this.$route.params.id}) this.$store.dispatch('server/getCredentials', {server: this.$route.params.id})
]) ])
.then(() => { .then(() => {
// Configure the socket.io implementation. This is a really ghetto way of handling things // Configure the websocket implementation and assign it to the mixin.
// but all of these plugins assume you have some constant connection, which we don't. this.$socket().connect(
const socket = io(`${this.credentials.node}/v1/ws/${this.server.uuid}`, { `ws://192.168.50.3:8080/api/servers/${this.server.uuid}/ws`,
query: `token=${this.credentials.key}`, 'CC8kHCuMkXPosgzGO6d37wvhNcksWxG6kTrA',
}); );
this.$socket().connect(socket);
this.loadingServerData = false; this.loadingServerData = false;
}) })
.catch(err => { .catch(err => {

4
resources/assets/scripts/components/server/components/PowerButtons.vue
View file

@ -3,7 +3,7 @@
<div v-if="connected"> <div v-if="connected">
<transition name="slide-fade" mode="out-in"> <transition name="slide-fade" mode="out-in">
<button class="btn btn-green uppercase text-xs px-4 py-2" <button class="btn btn-green uppercase text-xs px-4 py-2"
v-if="status === statuses.STATUS_OFF" v-if="status === 'offline'"
v-on:click.prevent="sendPowerAction('start')" v-on:click.prevent="sendPowerAction('start')"
>Start >Start
</button> </button>
@ -45,7 +45,7 @@
methods: { methods: {
sendPowerAction: function (action: string) { sendPowerAction: function (action: string) {
this.$socket().instance().emit('set status', action) this.$socket().emit('set state', action)
}, },
}, },
}); });

20
resources/assets/scripts/components/server/subpages/Console.vue
View file

@ -64,20 +64,12 @@
* Listen for specific socket.io emits from the server. * Listen for specific socket.io emits from the server.
*/ */
sockets: { sockets: {
'server log': function (data: string) { 'server log': function (lines: Array<string>) {
data.split(/\n/g).forEach((line: string): void => { lines.forEach(data => data.split(/\n/g).forEach(line => this.terminal && this.terminal.writeln(line + '\u001b[0m')));
if (this.terminal) {
this.terminal.writeln(line + '\u001b[0m');
}
});
}, },
'console': function (data: { line: string }) { 'console output': function (line: string) {
data.line.split(/\n/g).forEach((line: string): void => { this.terminal && this.terminal.writeln(line.replace(/(?:\r\n|\r|\n)$/im, '') + '\u001b[0m');
if (this.terminal) {
this.terminal.writeln(line + '\u001b[0m');
}
});
}, },
}, },
@ -114,7 +106,7 @@
this.terminal.fit(); this.terminal.fit();
this.terminal.clear(); this.terminal.clear();
this.$socket().instance().emit('send server log'); this.$socket().emit('send logs');
}, },
/** /**
@ -123,7 +115,7 @@
sendCommand: function () { sendCommand: function () {
this.commandHistoryIndex = -1; this.commandHistoryIndex = -1;
this.commandHistory.unshift(this.command); this.commandHistory.unshift(this.command);
this.$socket().instance().emit('send command', this.command); this.$socket().emit('send command', this.command);
this.command = ''; this.command = '';
}, },

8
resources/assets/scripts/helpers/statuses.ts
View file

@ -1,6 +1,6 @@
export default { export default {
STATUS_OFF: 0, STATUS_OFF: 'offline',
STATUS_ON: 1, STATUS_ON: 'running',
STATUS_STARTING: 2, STATUS_STARTING: 'starting',
STATUS_STOPPING: 3, STATUS_STOPPING: 'stopping',
}; };

2
resources/assets/scripts/helpers/ziggy.js
View file

File diff suppressed because one or more lines are too long

101
resources/assets/scripts/mixins/socketio/connector.ts
View file

@ -1,29 +1,23 @@
import * as io from 'socket.io-client';
import {camelCase} from 'lodash'; import {camelCase} from 'lodash';
import SocketEmitter from './emitter'; import SocketEmitter from './emitter';
import {Store} from "vuex"; import {Store} from "vuex";
const SYSTEM_EVENTS: Array<string> = [ const SOCKET_CONNECT = 'connect';
'connect', const SOCKET_ERROR = 'error';
'error', const SOCKET_DISCONNECT = 'disconnect';
'disconnect',
'reconnect', // This is defined in the wings daemon code and referenced here so that it is obvious
'reconnect_attempt', // where we are pulling these random data objects from.
'reconnecting', type WingsWebsocketResponse = {
'reconnect_error', event: string,
'reconnect_failed', args: Array<string>
'connect_error', }
'connect_timeout',
'connecting',
'ping',
'pong',
];
export default class SocketioConnector { export default class SocketioConnector {
/** /**
* The socket instance. * The socket instance.
*/ */
socket: null | SocketIOClient.Socket; socket: null | WebSocket;
/** /**
* The vuex store being used to persist data and socket state. * The vuex store being used to persist data and socket state.
@ -37,21 +31,33 @@ export default class SocketioConnector {
/** /**
* Initialize a new Socket connection. * Initialize a new Socket connection.
*
* @param {io} socket
*/ */
connect(socket: SocketIOClient.Socket) { connect(url: string, protocols?: string | string[]): void {
this.socket = socket; this.socket = new WebSocket(url, protocols);
this.registerEventListeners(); this.registerEventListeners();
} }
/** /**
* Return the socket instance we are working with. * Return the socket instance we are working with.
*/ */
instance(): SocketIOClient.Socket | null { instance(): WebSocket | null {
return this.socket; return this.socket;
} }
/**
* Sends an event along to the websocket. If there is no active connection, a void
* result is returned.
*/
emit(event: string, payload?: string | Array<string>): void | false {
if (!this.socket) {
return false
}
this.socket.send(JSON.stringify({
event, args: typeof payload === 'string' ? [payload] : payload
}));
}
/** /**
* Register the event listeners for this socket including user-defined ones in the store as * Register the event listeners for this socket including user-defined ones in the store as
* well as global system events from Socekt.io. * well as global system events from Socekt.io.
@ -61,55 +67,66 @@ export default class SocketioConnector {
return; return;
} }
// @ts-ignore this.socket.onopen = () => this.emitAndPassToStore(SOCKET_CONNECT);
this.socket['onevent'] = (packet: { data: Array<any> }): void => { this.socket.onclose = () => this.emitAndPassToStore(SOCKET_DISCONNECT);
const [event, ...args] = packet.data; this.socket.onerror = () => {
SocketEmitter.emit(event, ...args); // @todo reconnect?
if (this.socket && this.socket.readyState !== 1) {
this.passToStore(event, args); this.emitAndPassToStore(SOCKET_ERROR, ['Failed to connect to websocket.']);
}
}; };
SYSTEM_EVENTS.forEach((event: string): void => { this.socket.onmessage = (wse): void => {
if (!this.socket) { console.log('Socket message:', wse.data);
return;
try {
let {event, args}: WingsWebsocketResponse = JSON.parse(wse.data);
this.emitAndPassToStore(event, args);
} catch (ex) {
// do nothing, bad JSON response
console.error(ex);
return
}
};
} }
this.socket.on(event, (payload: any) => { /**
SocketEmitter.emit(event, payload); * Emits the event over the event emitter and also passes it along to the vuex store.
*/
emitAndPassToStore(event: string, payload?: Array<string>) {
payload ? SocketEmitter.emit(event, ...payload) : SocketEmitter.emit(event);
this.passToStore(event, payload); this.passToStore(event, payload);
});
});
} }
/** /**
* Pass event calls off to the Vuex store if there is a corresponding function. * Pass event calls off to the Vuex store if there is a corresponding function.
*/ */
passToStore(event: string | number, payload: Array<any>) { passToStore(event: string, payload?: Array<string>) {
if (!this.store) { if (!this.store) {
return; return;
} }
const s: Store<any> = this.store; const s: Store<any> = this.store;
const mutation = `SOCKET_${String(event).toUpperCase()}`; const mutation = `SOCKET_${event.toUpperCase()}`;
const action = `socket_${camelCase(String(event))}`; const action = `socket_${camelCase(event)}`;
// @ts-ignore // @ts-ignore
Object.keys(this.store._mutations).filter((namespaced: string): boolean => { Object.keys(this.store._mutations).filter((namespaced: string): boolean => {
return namespaced.split('/').pop() === mutation; return namespaced.split('/').pop() === mutation;
}).forEach((namespaced: string): void => { }).forEach((namespaced: string): void => {
s.commit(namespaced, this.unwrap(payload)); s.commit(namespaced, payload ? this.unwrap(payload) : null);
}); });
// @ts-ignore // @ts-ignore
Object.keys(this.store._actions).filter((namespaced: string): boolean => { Object.keys(this.store._actions).filter((namespaced: string): boolean => {
return namespaced.split('/').pop() === action; return namespaced.split('/').pop() === action;
}).forEach((namespaced: string): void => { }).forEach((namespaced: string): void => {
s.dispatch(namespaced, this.unwrap(payload)).catch(console.error); s.dispatch(namespaced, payload ? this.unwrap(payload) : null).catch(console.error);
}); });
} }
unwrap(args: Array<any>) { unwrap(args: Array<string>) {
return (args && args.length <= 1) ? args[0] : args; return (args && args.length <= 1) ? args[0] : args;
} }
} }

7
resources/assets/scripts/mixins/socketio/index.ts
View file

@ -34,10 +34,7 @@ export const Socketio: ComponentOptions<Vue> = {
}, },
methods: { methods: {
/** '$socket': function (): SocketioConnector | null {
* @return {SocketioConnector}
*/
'$socket': function () {
return connector; return connector;
}, },
@ -49,7 +46,7 @@ export const Socketio: ComponentOptions<Vue> = {
return; return;
} }
const instance: SocketIOClient.Socket | null = connector.instance(); const instance = connector.instance();
if (instance) { if (instance) {
instance.close(); instance.close();
} }

13
resources/assets/scripts/store/modules/socket.ts
View file

@ -19,17 +19,12 @@ export default {
state.connectionError = err; state.connectionError = err;
}, },
SOCKET_CONNECT_ERROR: (state: SocketState, err: Error) => { 'SOCKET_INITIAL STATUS': (state: SocketState, data: string) => {
state.connected = false; state.status = data;
state.connectionError = err;
}, },
'SOCKET_INITIAL STATUS': (state: SocketState, data: { status: number }) => { SOCKET_STATUS: (state: SocketState, data: string) => {
state.status = data.status; state.status = data;
},
SOCKET_STATUS: (state: SocketState, data: { status: number }) => {
state.status = data.status;
} }
}, },
}; };

2
resources/assets/scripts/store/types.ts
View file

@ -11,7 +11,7 @@ export type ApplicationState = {
export type SocketState = { export type SocketState = {
connected: boolean, connected: boolean,
connectionError: boolean | Error, connectionError: boolean | Error,
status: number, status: string,
} }
export type ServerApplicationCredentials = { export type ServerApplicationCredentials = {

56
yarn.lock
View file

@ -1379,9 +1379,9 @@ binary-extensions@^1.0.0:
version "1.11.0" version "1.11.0"
resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.11.0.tgz#46aa1751fb6a2f93ee5e689bb1087d4b14c6c205" resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.11.0.tgz#46aa1751fb6a2f93ee5e689bb1087d4b14c6c205"
blob@0.0.4: blob@0.0.5:
version "0.0.4" version "0.0.5"
resolved "https://registry.yarnpkg.com/blob/-/blob-0.0.4.tgz#bcf13052ca54463f30f9fc7e95b9a47630a94921" resolved "https://registry.yarnpkg.com/blob/-/blob-0.0.5.tgz#d680eeef25f8cd91ad533f5b01eed48e64caf683"
bluebird@^3.1.1, bluebird@^3.5.3: bluebird@^3.1.1, bluebird@^3.5.3:
version "3.5.3" version "3.5.3"
@ -2607,9 +2607,9 @@ end-of-stream@^1.0.0, end-of-stream@^1.1.0:
dependencies: dependencies:
once "^1.4.0" once "^1.4.0"
engine.io-client@~3.2.0: engine.io-client@~3.3.1:
version "3.2.1" version "3.3.2"
resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-3.2.1.tgz#6f54c0475de487158a1a7c77d10178708b6add36" resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-3.3.2.tgz#04e068798d75beda14375a264bb3d742d7bc33aa"
dependencies: dependencies:
component-emitter "1.2.1" component-emitter "1.2.1"
component-inherit "0.0.3" component-inherit "0.0.3"
@ -2619,18 +2619,18 @@ engine.io-client@~3.2.0:
indexof "0.0.1" indexof "0.0.1"
parseqs "0.0.5" parseqs "0.0.5"
parseuri "0.0.5" parseuri "0.0.5"
ws "~3.3.1" ws "~6.1.0"
xmlhttprequest-ssl "~1.5.4" xmlhttprequest-ssl "~1.5.4"
yeast "0.1.2" yeast "0.1.2"
engine.io-parser@~2.1.1: engine.io-parser@~2.1.1:
version "2.1.2" version "2.1.3"
resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-2.1.2.tgz#4c0f4cff79aaeecbbdcfdea66a823c6085409196" resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-2.1.3.tgz#757ab970fbf2dfb32c7b74b033216d5739ef79a6"
dependencies: dependencies:
after "0.8.2" after "0.8.2"
arraybuffer.slice "~0.0.7" arraybuffer.slice "~0.0.7"
base64-arraybuffer "0.1.5" base64-arraybuffer "0.1.5"
blob "0.0.4" blob "0.0.5"
has-binary2 "~1.0.2" has-binary2 "~1.0.2"
enhanced-resolve@^3.4.0: enhanced-resolve@^3.4.0:
@ -2809,7 +2809,7 @@ event-emitter@~0.3.5:
d "1" d "1"
es5-ext "~0.10.14" es5-ext "~0.10.14"
eventemitter3@^3.0.0: "eventemitter3@>=2 <4", eventemitter3@^3.0.0:
version "3.1.0" version "3.1.0"
resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-3.1.0.tgz#090b4d6cdbd645ed10bf750d4b5407942d7ba163" resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-3.1.0.tgz#090b4d6cdbd645ed10bf750d4b5407942d7ba163"
@ -6299,28 +6299,28 @@ snapdragon@^0.8.1:
source-map-resolve "^0.5.0" source-map-resolve "^0.5.0"
use "^3.1.0" use "^3.1.0"
socket.io-client@^2.1.1: socket.io-client@^2.2.0:
version "2.1.1" version "2.2.0"
resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-2.1.1.tgz#dcb38103436ab4578ddb026638ae2f21b623671f" resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-2.2.0.tgz#84e73ee3c43d5020ccc1a258faeeb9aec2723af7"
dependencies: dependencies:
backo2 "1.0.2" backo2 "1.0.2"
base64-arraybuffer "0.1.5" base64-arraybuffer "0.1.5"
component-bind "1.0.0" component-bind "1.0.0"
component-emitter "1.2.1" component-emitter "1.2.1"
debug "~3.1.0" debug "~3.1.0"
engine.io-client "~3.2.0" engine.io-client "~3.3.1"
has-binary2 "~1.0.2" has-binary2 "~1.0.2"
has-cors "1.1.0" has-cors "1.1.0"
indexof "0.0.1" indexof "0.0.1"
object-component "0.0.3" object-component "0.0.3"
parseqs "0.0.5" parseqs "0.0.5"
parseuri "0.0.5" parseuri "0.0.5"
socket.io-parser "~3.2.0" socket.io-parser "~3.3.0"
to-array "0.1.4" to-array "0.1.4"
socket.io-parser@~3.2.0: socket.io-parser@~3.3.0:
version "3.2.0" version "3.3.0"
resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-3.2.0.tgz#e7c6228b6aa1f814e6148aea325b51aa9499e077" resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-3.3.0.tgz#2b52a96a509fdf31440ba40fed6094c7d4f1262f"
dependencies: dependencies:
component-emitter "1.2.1" component-emitter "1.2.1"
debug "~3.1.0" debug "~3.1.0"
@ -6870,10 +6870,6 @@ uglifyjs-webpack-plugin@^2.1.1:
webpack-sources "^1.1.0" webpack-sources "^1.1.0"
worker-farm "^1.5.2" worker-farm "^1.5.2"
ultron@~1.1.0:
version "1.1.1"
resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.1.1.tgz#9fe1536a10a664a65266a1e3ccf85fd36302bc9c"
unicode-canonical-property-names-ecmascript@^1.0.2: unicode-canonical-property-names-ecmascript@^1.0.2:
version "1.0.3" version "1.0.3"
resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.3.tgz#f6119f417467593c0086357c85546b6ad5abc583" resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.3.tgz#f6119f417467593c0086357c85546b6ad5abc583"
@ -7445,13 +7441,17 @@ write-file-stdout@0.0.2:
version "0.0.2" version "0.0.2"
resolved "https://registry.yarnpkg.com/write-file-stdout/-/write-file-stdout-0.0.2.tgz#c252d7c7c5b1b402897630e3453c7bfe690d9ca1" resolved "https://registry.yarnpkg.com/write-file-stdout/-/write-file-stdout-0.0.2.tgz#c252d7c7c5b1b402897630e3453c7bfe690d9ca1"
ws@~3.3.1: ws-wrapper@^2.0.0:
version "3.3.3" version "2.0.0"
resolved "https://registry.yarnpkg.com/ws/-/ws-3.3.3.tgz#f1cf84fe2d5e901ebce94efaece785f187a228f2" resolved "https://registry.yarnpkg.com/ws-wrapper/-/ws-wrapper-2.0.0.tgz#598f67a9fdf13d532abaf593d8ce8889f94b5a2a"
dependencies:
eventemitter3 ">=2 <4"
ws@~6.1.0:
version "6.1.4"
resolved "https://registry.yarnpkg.com/ws/-/ws-6.1.4.tgz#5b5c8800afab925e94ccb29d153c8d02c1776ef9"
dependencies: dependencies:
async-limiter "~1.0.0" async-limiter "~1.0.0"
safe-buffer "~5.1.0"
ultron "~1.1.0"
xmlhttprequest-ssl@~1.5.4: xmlhttprequest-ssl@~1.5.4:
version "1.5.5" version "1.5.5"