Initial commit

web/src/components/access/Console.js

@@ -0,0 +1,110 @@
+import React, {Component} from 'react';
+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 "./Console.css"
+import {getToken} from "../../utils/utils";
+
+
+function getGeometry(width, height) {
+    const cols = Math.floor(width / 9);
+    const rows = Math.floor(height / 17);
+    return [cols, rows];
+}
+
+class Console extends Component {
+
+    state = {
+        containerOverflow: 'hidden',
+        containerWidth: 0,
+        containerHeight: 0,
+        term: null,
+    };
+
+    componentDidMount() {
+
+        let command = this.props.command;
+        let assetId = this.props.assetId;
+        let width = this.props.width;
+        let height = this.props.height;
+
+        // let width = Math.floor(window.innerWidth * scale);
+        // let height = Math.floor(window.innerHeight * scale);
+
+        let params = {
+            'width': width,
+            'height': height,
+            'assetId': assetId
+        };
+
+        let paramStr = qs.stringify(params);
+
+        let [cols, rows] = getGeometry(width, height);
+        let term = new Terminal({
+            cols: cols,
+            rows: rows,
+            // screenKeys: true,
+            // fontFamily: 'menlo',
+        });
+
+        // let fitAddon = new FitAddon();
+        // term.loadAddon(fitAddon);
+        term.open(this.refs.terminal);
+        // fitAddon.fit();
+
+        term.writeln('正在努力连接服务器中...');
+        term.onResize(e => {
+
+        });
+
+        let token = getToken();
+
+        let webSocket = new WebSocket(wsServer + prefix + '/ssh?X-Auth-Token=' + token + '&' + paramStr);
+        term.loadAddon(new AttachAddon(webSocket));
+        this.props.appendWebsocket(webSocket);
+
+        webSocket.onopen = (e => {
+            term.clear();
+            term.focus();
+
+            if (command !== '') {
+                webSocket.send(command + String.fromCharCode(13));
+            }
+
+        });
+
+
+        this.setState({
+            term: term,
+            containerWidth: width,
+            containerHeight: height
+        });
+
+        // window.addEventListener('resize', this.onWindowResize);
+    }
+
+    onWindowResize = (e) => {
+        let term = this.state.term;
+        if (term) {
+            const [cols, rows] = getGeometry(this.state.containerWidth, this.state.containerHeight);
+            term.resize(cols, rows);
+        }
+    };
+
+    render() {
+        return (
+            <div>
+                <div ref='terminal' style={{
+                    overflow: this.state.containerOverflow,
+                    width: this.state.containerWidth,
+                    height: this.state.containerHeight,
+                    backgroundColor: 'black'
+                }}/>
+            </div>
+        );
+    }
+}
+
+export default Console;