evan/next-terminal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

动态指令增加录屏

Browse Source
This commit is contained in:
dushixiang
2021-02-07 17:46:47 +08:00
committed by dushixiang
parent d72ab4e21e
commit b4421b1b56
9 changed files with 61 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/package.json
View File

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

2
web/public/asciinema.html
View File

@ -12,7 +12,7 @@
</style>
</head>
<body>
<asciinema-player id='asciinema-player' src=""></asciinema-player>
<asciinema-player id='asciinema-player' src="" rows="42" cols="150"></asciinema-player>
<script src="asciinema-player.js"></script>
</body>

62
web/src/components/access/Console.js
View File

@ -4,8 +4,10 @@ import {Terminal} from "xterm";
import qs from "qs";
import {wsServer} from "../../common/constants";
import "./Console.css"
import {getToken} from "../../utils/utils";
import {getToken, isEmpty} from "../../utils/utils";
import {FitAddon} from 'xterm-addon-fit'
import request from "../../common/request";
import {message} from "antd";
class Console extends Component {
@ -18,45 +20,33 @@ class Console extends Component {
fitAddon: undefined
};
componentDidMount() {
componentDidMount = async () => {
let command = this.props.command;
let assetId = this.props.assetId;
let width = this.props.width;
let height = this.props.height;
let params = {
'width': width,
'height': height,
'assetId': assetId
};
let paramStr = qs.stringify(params);
const ua = navigator.userAgent.toLowerCase();
let lineHeight = 1;
if (ua.includes('windows')) {
lineHeight = 1.1;
let sessionId = await this.createSession(assetId);
if (isEmpty(sessionId)) {
return;
}
let term = new Terminal({
fontFamily: 'monaco, Consolas, "Lucida Console", monospace',
fontSize: 14,
lineHeight: lineHeight,
theme: {
background: '#1b1b1b'
},
rightClickSelectsWord: true,
});
let fitAddon = new FitAddon();
term.loadAddon(fitAddon);
term.open(this.refs.terminal);
const fitAddon = new FitAddon();
term.loadAddon(fitAddon);
fitAddon.fit();
term.focus();
term.writeln('Trying to connect to the server ...');
term.onResize(e => {
});
term.onData(data => {
let webSocket = this.state.webSocket;
@ -66,8 +56,16 @@ class Console extends Component {
});
let token = getToken();
let params = {
'cols': term.cols,
'rows': term.rows,
'sessionId': sessionId,
'X-Auth-Token': token
};
let webSocket = new WebSocket(wsServer + '/ssh?X-Auth-Token=' + token + '&' + paramStr);
let paramStr = qs.stringify(params);
let webSocket = new WebSocket(wsServer + '/ssh?' + paramStr);
this.props.appendWebsocket({'id': assetId, 'ws': webSocket});
@ -86,6 +84,10 @@ class Console extends Component {
webSocket.onmessage = (e) => {
let msg = JSON.parse(e.data);
switch (msg['type']) {
case 'connected':
term.clear();
this.updateSessionStatus(sessionId);
break;
case 'data':
term.write(msg['content']);
break;
@ -129,6 +131,22 @@ class Console extends Component {
}
}
async createSession(assetsId) {
let result = await request.post(`/sessions?assetId=${assetsId}&mode=naive`);
if (result['code'] !== 1) {
this.showMessage(result['message']);
return null;
}
return result['data']['id'];
}
updateSessionStatus = async (sessionId) => {
let result = await request.post(`/sessions/${sessionId}/connect`);
if (result['code'] !== 1) {
message.error(result['message']);
}
}
onWindowResize = (e) => {
let term = this.state.term;
let fitAddon = this.state.fitAddon;

1
web/src/components/access/Term.js
View File

@ -105,7 +105,6 @@ class Term extends Component {
let msg = JSON.parse(e.data);
switch (msg['type']) {
case 'connected':
// term.write(msg['content'])
term.clear();
this.updateSessionStatus(sessionId);
break;

12
web/src/components/asset/Asset.js
View File

@ -323,12 +323,12 @@ class Asset extends Component {
if (result.code === 1) {
if (result.data === true) {
message.success({content: '检测完成，您访问的资产在线，即将打开窗口进行访问。', key: id, duration: 3});
// window.open(`#/access?assetId=${id}&assetName=${name}&protocol=${protocol}`);
if (protocol === 'ssh') {
window.open(`#/term?assetId=${id}&assetName=${name}`);
} else {
window.open(`#/access?assetId=${id}&assetName=${name}&protocol=${protocol}`);
}
window.open(`#/access?assetId=${id}&assetName=${name}&protocol=${protocol}`);
// if (protocol === 'ssh') {
// window.open(`#/term?assetId=${id}&assetName=${name}`);
// } else {
// window.open(`#/access?assetId=${id}&assetName=${name}&protocol=${protocol}`);
// }
} else {
message.warn('您访问的资产未在线，请确认网络状态。', 10);
}