修复了动态指令灰屏的问题

web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-terminal",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "private": true,
   "dependencies": {
     "@ant-design/icons": "^4.3.0",

web/src/common/constants.js

@@ -1,7 +1,14 @@
 // prod
+let wsPrefix;
+if (window.location.protocol === 'https') {
+    wsPrefix = 'wss:'
+} else {
+    wsPrefix = 'ws:'
+}
+
 export const server = '';
-export const wsServer = '';
+export const wsServer = wsPrefix + window.location.host;
-export const prefix = '';
+export const prefix = window.location.protocol + ':' + window.location.host;
 
 // dev
 // export const server = '//127.0.0.1:8088';

web/src/common/request.js

@@ -1,12 +1,12 @@
 import axios from 'axios'
-import {prefix, server} from "./constants";
+import {server} from "./constants";
 import {message} from 'antd';
 import {getHeaders} from "../utils/utils";
 
 // 测试地址
 // axios.defaults.baseURL = server;
 // 线上地址
-axios.defaults.baseURL = server + prefix;
+axios.defaults.baseURL = server;
 
 const handleError = (error) => {
     if ("Network Error" === error.toString()) {

web/src/components/access/Access.js

@@ -19,7 +19,7 @@ import {
 } from 'antd'
 import qs from "qs";
 import request from "../../common/request";
-import {prefix, server, wsServer} from "../../common/constants";
+import {server, wsServer} from "../../common/constants";
 import {
     CloudDownloadOutlined,
     CloudUploadOutlined,
@@ -406,7 +406,7 @@ class Access extends Component {
 
     async renderDisplay(sessionId, protocol) {
 
-        let tunnel = new Guacamole.WebSocketTunnel(wsServer + prefix + '/tunnel');
+        let tunnel = new Guacamole.WebSocketTunnel(wsServer + '/tunnel');
 
         tunnel.onstatechange = this.onTunnelStateChange;
         // Get new client instance
@@ -658,7 +658,7 @@ class Access extends Component {
             message.warning('当前只支持下载文件');
             return;
         }
-        download(`${server}${prefix}/sessions/${this.state.sessionId}/download?file=${this.state.selectNode.key}`);
+        download(`${server}/sessions/${this.state.sessionId}/download?file=${this.state.selectNode.key}`);
     }
 
     rmdir = async () => {
@@ -711,7 +711,7 @@ class Access extends Component {
     }
 
     getTreeNodes = async (key) => {
-        const url = server + prefix + '/sessions/' + this.state.sessionId + '/ls?dir=' + key;
+        const url = server + '/sessions/' + this.state.sessionId + '/ls?dir=' + key;
 
         let result = await request.get(url);
 
@@ -845,7 +845,7 @@ class Access extends Component {
                     onCancel={this.handleUploadCancel}
                 >
                     <Upload
-                        action={server + prefix + '/sessions/' + this.state.sessionId + '/upload?X-Auth-Token=' + getToken() + '&dir=' + this.state.selectNode.key}>
+                        action={server + '/sessions/' + this.state.sessionId + '/upload?X-Auth-Token=' + getToken() + '&dir=' + this.state.selectNode.key}>
                         <Button icon={<UploadOutlined/>}>上传文件</Button>
                     </Upload>
                 </Modal>

web/src/components/access/Console.js

@@ -3,7 +3,7 @@ import "xterm/css/xterm.css"
 import {Terminal} from "xterm";
 import {AttachAddon} from 'xterm-addon-attach';
 import qs from "qs";
-import {prefix, wsServer} from "../../common/constants";
+import {wsServer} from "../../common/constants";
 import "./Console.css"
 import {getToken} from "../../utils/utils";
 
@@ -61,7 +61,7 @@ class Console extends Component {
 
         let token = getToken();
 
-        let webSocket = new WebSocket(wsServer + prefix + '/ssh?X-Auth-Token=' + token + '&' + paramStr);
+        let webSocket = new WebSocket(wsServer + '/ssh?X-Auth-Token=' + token + '&' + paramStr);
         term.loadAddon(new AttachAddon(webSocket));
         this.props.appendWebsocket(webSocket);
 

web/src/components/access/Monitor.js

@@ -2,7 +2,7 @@ import React, {Component} from 'react';
 import Guacamole from 'guacamole-common-js';
 import {message, Modal} from 'antd'
 import qs from "qs";
-import {prefix, wsServer} from "../../common/constants";
+import {wsServer} from "../../common/constants";
 import {getToken} from "../../utils/utils";
 import './Access.css'
 
@@ -178,7 +178,7 @@ class Access extends Component {
 
     async renderDisplay(connectionId, protocol) {
 
-        let tunnel = new Guacamole.WebSocketTunnel(wsServer + prefix + '/tunnel');
+        let tunnel = new Guacamole.WebSocketTunnel(wsServer + '/tunnel');
 
         tunnel.onstatechange = this.onTunnelStateChange;
         let client = new Guacamole.Client(tunnel);

web/src/components/session/Playback.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import Guacamole from "guacamole-common-js";
-import {prefix, server} from "../../common/constants";
+import {server} from "../../common/constants";
 
 class Playback extends Component {
 
@@ -14,7 +14,7 @@ class Playback extends Component {
     }
 
     initPlayer(sessionId) {
-        var RECORDING_URL = `${server + prefix}/sessions/${sessionId}/recording`;
+        var RECORDING_URL = `${server}/sessions/${sessionId}/recording`;
 
         var player = document.getElementById('player');
         var display = document.getElementById('display');