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

This commit is contained in:
dushixiang 2021-01-09 12:02:46 +08:00
parent 52beffd9c1
commit df65341193
7 changed files with 63 additions and 56 deletions

View File

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

View File

@ -1,7 +1,14 @@
// prod // prod
let wsPrefix;
if (window.location.protocol === 'https') {
wsPrefix = 'wss:'
} else {
wsPrefix = 'ws:'
}
export const server = ''; 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 // dev
// export const server = '//127.0.0.1:8088'; // export const server = '//127.0.0.1:8088';

View File

@ -1,12 +1,12 @@
import axios from 'axios' import axios from 'axios'
import {prefix, server} from "./constants"; import {server} from "./constants";
import {message} from 'antd'; import {message} from 'antd';
import {getHeaders} from "../utils/utils"; import {getHeaders} from "../utils/utils";
// 测试地址 // 测试地址
// axios.defaults.baseURL = server; // axios.defaults.baseURL = server;
// 线上地址 // 线上地址
axios.defaults.baseURL = server + prefix; axios.defaults.baseURL = server;
const handleError = (error) => { const handleError = (error) => {
if ("Network Error" === error.toString()) { if ("Network Error" === error.toString()) {
@ -35,14 +35,14 @@ const request = {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
axios.get(url, {headers: headers}) axios.get(url, {headers: headers})
.then((response) => { .then((response) => {
handleResult(response.data); handleResult(response.data);
resolve(response.data); resolve(response.data);
}) })
.catch((error) => { .catch((error) => {
handleError(error); handleError(error);
reject(error); reject(error);
}); });
}) })
}, },
@ -52,14 +52,14 @@ const request = {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
axios.post(url, params, {headers: headers}) axios.post(url, params, {headers: headers})
.then((response) => { .then((response) => {
handleResult(response.data); handleResult(response.data);
resolve(response.data); resolve(response.data);
}) })
.catch((error) => { .catch((error) => {
handleError(error); handleError(error);
reject(error); reject(error);
}); });
}) })
}, },
@ -69,14 +69,14 @@ const request = {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
axios.put(url, params, {headers: headers}) axios.put(url, params, {headers: headers})
.then((response) => { .then((response) => {
handleResult(response.data); handleResult(response.data);
resolve(response.data); resolve(response.data);
}) })
.catch((error) => { .catch((error) => {
handleError(error); handleError(error);
reject(error); reject(error);
}); });
}) })
}, },
@ -85,14 +85,14 @@ const request = {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
axios.delete(url, {headers: headers}) axios.delete(url, {headers: headers})
.then((response) => { .then((response) => {
handleResult(response.data); handleResult(response.data);
resolve(response.data); resolve(response.data);
}) })
.catch((error) => { .catch((error) => {
handleError(error); handleError(error);
reject(error); reject(error);
}); });
}) })
}, },
@ -101,14 +101,14 @@ const request = {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
axios.patch(url, params, {headers: headers}) axios.patch(url, params, {headers: headers})
.then((response) => { .then((response) => {
handleResult(response.data); handleResult(response.data);
resolve(response.data); resolve(response.data);
}) })
.catch((error) => { .catch((error) => {
handleError(error); handleError(error);
reject(error); reject(error);
}); });
}) })
}, },
}; };

View File

@ -19,7 +19,7 @@ import {
} from 'antd' } from 'antd'
import qs from "qs"; import qs from "qs";
import request from "../../common/request"; import request from "../../common/request";
import {prefix, server, wsServer} from "../../common/constants"; import {server, wsServer} from "../../common/constants";
import { import {
CloudDownloadOutlined, CloudDownloadOutlined,
CloudUploadOutlined, CloudUploadOutlined,
@ -406,7 +406,7 @@ class Access extends Component {
async renderDisplay(sessionId, protocol) { async renderDisplay(sessionId, protocol) {
let tunnel = new Guacamole.WebSocketTunnel(wsServer + prefix + '/tunnel'); let tunnel = new Guacamole.WebSocketTunnel(wsServer + '/tunnel');
tunnel.onstatechange = this.onTunnelStateChange; tunnel.onstatechange = this.onTunnelStateChange;
// Get new client instance // Get new client instance
@ -658,7 +658,7 @@ class Access extends Component {
message.warning('当前只支持下载文件'); message.warning('当前只支持下载文件');
return; 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 () => { rmdir = async () => {
@ -711,7 +711,7 @@ class Access extends Component {
} }
getTreeNodes = async (key) => { 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); let result = await request.get(url);
@ -845,7 +845,7 @@ class Access extends Component {
onCancel={this.handleUploadCancel} onCancel={this.handleUploadCancel}
> >
<Upload <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> <Button icon={<UploadOutlined/>}>上传文件</Button>
</Upload> </Upload>
</Modal> </Modal>

View File

@ -3,7 +3,7 @@ import "xterm/css/xterm.css"
import {Terminal} from "xterm"; import {Terminal} from "xterm";
import {AttachAddon} from 'xterm-addon-attach'; import {AttachAddon} from 'xterm-addon-attach';
import qs from "qs"; import qs from "qs";
import {prefix, wsServer} from "../../common/constants"; import {wsServer} from "../../common/constants";
import "./Console.css" import "./Console.css"
import {getToken} from "../../utils/utils"; import {getToken} from "../../utils/utils";
@ -61,7 +61,7 @@ class Console extends Component {
let token = getToken(); 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)); term.loadAddon(new AttachAddon(webSocket));
this.props.appendWebsocket(webSocket); this.props.appendWebsocket(webSocket);

View File

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

View File

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