实现可运行的xterm.js方案

web/src/components/access/AccessSSH.js

@@ -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),

web/src/components/session/OfflineSession.js

@@ -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
                     }
 

web/src/components/session/asciinema.html

@@ -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>