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

1、安装包 xtermxterm-addon-attachxterm-addon-fit

cnpm install xterm --save
cnpm install xterm-addon-attach --save
cnpm install xterm-addon-fit --save

安装最新版本即可

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

2、在页面中使用

<div id="terBox" ref="terminal" style="padding-top: 5px; height: calc(100vh - 294px)" />
<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>
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在 Vue 中使用 xterm.js 和 WebSocket 实现终端,你需要将用户输入的命令发送给后端,然后将后端返回的结果输出到 xterm.js 终端中。以下是一个简单的示例: ```html <template> <div id="terminal"></div> </template> <script> import { Terminal } from 'xterm'; import { FitAddon } from 'xterm-addon-fit'; export default { data() { return { socket: null, // WebSocket 实例 term: null, // Terminal 实例 }; }, mounted() { // 创建 WebSocket 实例 this.socket = new WebSocket('ws://localhost:8080'); // 创建 Terminal 实例 this.term = new Terminal(); const fitAddon = new FitAddon(); this.term.loadAddon(fitAddon); this.term.open(document.getElementById('terminal')); // 处理 WebSocket 消息 this.socket.onmessage = (event) => { this.term.write(event.data); }; // 处理输入事件 this.term.onData(data => { this.socket.send(data); }); // 调整终端大小 this.term.onResize(size => { const cols = size.cols; const rows = size.rows; this.socket.send(JSON.stringify({ type: 'resize', cols, rows })); }); // 发送 resize 消息 const cols = this.term.cols; const rows = this.term.rows; this.socket.send(JSON.stringify({ type: 'resize', cols, rows })); }, beforeDestroy() { // 关闭 WebSocket 连接 this.socket.close(); } } </script> ``` 以上代码中,我们首先在 `mounted` 钩子函数中创建了一个 WebSocket 实例和一个 Terminal 实例。然后我们为 WebSocket 实例添加了一个 `onmessage` 事件监听器,该监听器会在接收到服务器返回的消息时触发,我们在该事件处理函数中将消息输出到终端中。 接着,我们为 Terminal 实例添加了一个 `onData` 事件监听器,该监听器会在用户输入时触发,我们在该事件处理函数中向服务器发送用户输入的命令。同时,我们还为 Terminal 实例添加了一个 `onResize` 事件监听器,该监听器会在终端大小调整时触发,我们在该事件处理函数中向服务器发送终端大小变化的消息。 最后,我们在 `beforeDestroy` 钩子函数中关闭了 WebSocket 连接。 需要注意的是,以上代码中的 WebSocket 连接是通过 `ws://localhost:8080` 连接本地服务器的,你需要根据实际情况修改 WebSocket 连接地址。另外,代码中的消息格式和处理逻辑也需要根据实际情况进行修改。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值