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

实现可运行的xterm.js方案

Browse Source
This commit is contained in:
dushixiang
2021-02-01 00:37:56 +08:00
committed by dushixiang
parent 86ef89ff21
commit 29fb520e48
11 changed files with 165 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
web/src/components/session/asciinema-player.css → web/public/asciinema-player.css
View File

0
web/src/components/session/asciinema-player.js → web/public/asciinema-player.js
View File

38
web/public/asciinema.html Normal file
View File

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="asciinema-player.css"/>
<style>
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<asciinema-player id='asciinema-player' src=""></asciinema-player>
<script src="asciinema-player.js"></script>
</body>
<script>
const server = 'http://localhost:8088';
function getQueryVariable(variable) {
const query = window.location.search.substring(1);
const vars = query.split("&");
for (let i = 0; i < vars.length; i++) {
const pair = vars[i].split("=");
if (pair[0] === variable) {
return pair[1];
}
}
return false;
}
let sessionId = getQueryVariable('sessionId');
document.getElementById('asciinema-player').setAttribute('src', `${server}/sessions/${sessionId}/recording`);
</script>
</html>

10
web/src/components/access/AccessSSH.js
View File

@ -8,6 +8,7 @@ import {getToken, isEmpty} from "../../utils/utils";
import {FitAddon} from 'xterm-addon-fit';
import "./Access.css"
import request from "../../common/request";
import {message} from "antd";
class AccessSSH extends Component {
@ -111,8 +112,8 @@ class AccessSSH extends Component {
switch (msg['type']) {
case 'connected':
term.clear();
console.log(msg['content'])
this.onWindowResize();
this.updateSessionStatus(sessionId);
break;
case 'data':
term.write(msg['content']);
@ -152,6 +153,13 @@ class AccessSSH extends Component {
return result['data']['id'];
}
updateSessionStatus = async (sessionId) => {
let result = await request.post(`/sessions/${sessionId}/connect`);
if (result['code'] !== 1) {
message.error(result['message']);
}
}
terminalSize() {
return {
cols: Math.floor(this.state.width / 7.5),

33
web/src/components/session/OfflineSession.js
View File

@ -1,5 +1,4 @@
import React, {Component} from 'react';
import {
Button,
Col,
@ -64,6 +63,7 @@ class OfflineSession extends Component {
delBtnLoading: false,
users: [],
assets: [],
selectedRow: {},
};
componentDidMount() {
@ -123,10 +123,10 @@ class OfflineSession extends Component {
this.loadTableData(queryParams)
};
showPlayback = (sessionId) => {
showPlayback = (row) => {
this.setState({
playbackVisible: true,
playbackSessionId: sessionId
selectedRow: row
});
};
@ -289,7 +289,7 @@ class OfflineSession extends Component {
<div>
<Button type="link" size='small'
disabled={disabled}
onClick={() => this.showPlayback(record.id)}>回放</Button>
onClick={() => this.showPlayback(record)}>回放</Button>
<Button type="link" size='small' onClick={() => {
confirm({
title: '您确定要删除此会话吗?',
@ -488,7 +488,30 @@ class OfflineSession extends Component {
destroyOnClose
maskClosable={false}
>
<Playback sessionId={this.state.playbackSessionId}/>
{
this.state.selectedRow['protocol'] === 'rdp' || this.state.selectedRow['protocol'] === 'vnc' ?
<Playback sessionId={this.state.selectedRow['id']}/>
:
<iframe
style={{
width: '100%',
// height: this.state.iFrameHeight,
overflow: 'visible'
}}
onLoad={() => {
// const obj = ReactDOM.findDOMNode(this);
// this.setState({
// "iFrameHeight": obj.contentWindow.document.body.scrollHeight + 'px'
// });
}}
ref="iframe"
src={'./asciinema.html?sessionId=' + this.state.selectedRow['id']}
width="100%"
height={window.innerHeight * 0.8}
frameBorder="0"
/>
}
</Modal> : undefined
}

19
web/src/components/session/asciinema.html
View File

@ -1,19 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="asciinema-player.css"/>
<style>
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<asciinema-player src="./903dfd65-838c-453f-9866-eadd5725321b.cast"></asciinema-player>
<script src="asciinema-player.js"></script>
</body>
</html>