2023 ~【VUE+Xterm+Websocket】模拟SSH连接效果

1、安装包 xterm、 xterm-addon-attach、 xterm-addon-fit

cnpm install xterm --save
1

cnpm install xterm-addon-attach --save
1

cnpm install xterm-addon-fit --save
1

安装最新版本即可

"xterm": "^5.2.1",
"xterm-addon-attach": "^0.8.0",
"xterm-addon-fit": "^0.7.0"
1
2
3

2、在页面中使用

<div id="terBox" ref="terminal" style="padding-top: 5px; height: calc(100vh - 294px)" />
1

<script>
import "xterm/css/xterm.css";
import { Terminal } from "xterm";
import { FitAddon } from "xterm-addon-fit"; // 全屏
import { AttachAddon } from "xterm-addon-attach";

export default {
  	name: "Ssh",
	data() {
	    return {
	      term: null,
	      socket: "",
	    };
	},
	mounted() {
	  this.initTerm();
	  window.addEventListener("resize", this.resizeScreen);
	},
	methods: {
	    initTerm() {
	      this.$nextTick(() => {
	        var rowHeight = document.getElementById("terBox").clientHeight; // 高
	        // 1.xterm终端初始化
	        let term = new Terminal({
	          rendererType: "canvas", //渲染类型
	          rows: Math.trunc(rowHeight / 17 - 1)  || 36, //行数
	          // cols: 10, // 不指定行数，自动回车后光标从下一行开始
	          convertEol: true, //启用时，光标将设置为下一行的开头
	          // scrollback: 50, //终端中的回滚量
	          disableStdin: false, //是否应禁用输入
	          windowsMode: true, // 根据窗口换行
	          cursorStyle: "underline", //光标样式
	          cursorBlink: true, //光标闪烁
	          theme: {
	            foreground: "#ECECEC", //字体
	            background: "#000000", //背景色
	            cursor: "help", //设置光标
	            lineHeight: 20,
	          },
	        });
	
	        // 2.webSocket初始化 (不需要另外的方法)
	        const socketUri = "ws://" + process.env.VUE_APP_SOCKET + ":9207/sshSocket";
	        this.socket = new WebSocket(socketUri); // 发起连接
	
	        // 3.websocket集成的插件
	        const attachAddon = new AttachAddon(this.socket);
	        const fitAddon = new FitAddon(); // 全屏插件
	        term.loadAddon(attachAddon);
	        term.loadAddon(fitAddon);
	        term.open(this.$refs.terminal);
	        fitAddon.fit();
	        term.focus();
	        this.term = term;
	        // 发送 term 数据
	        this.term.onData((data) => {
	          this.sendSSH({
	            operate: "command",
	            host: this.loginForm.host,
	            port: this.loginForm.port || 22,
	            command: data,
	            rows: this.term.rows,
	            cols: this.term.cols,
	          }); // 初次连接SSH
	        });
	      });
	    },
	    /** 当屏幕变化时修改 */
	    resizeScreen() {
	      var colWidth = document.getElementById("terBox").clientWidth; // 宽
	      var rowHeight = document.getElementById("terBox").clientHeight; // 高
	      // 注意修改 用 term.resize(cols, rows)，不能用 term.cols = cols（只能取值）
	      this.term.resize(Math.trunc(colWidth / 9), Math.trunc(rowHeight / 17 - 1)) // 修改 cols 和 rows
	    },
	}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77