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

cnpm install xterm --save

cnpm install xterm-addon-attach --save

cnpm install xterm-addon-fit --save

安裝最新版本即可文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-733468.html

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

2、在頁(yè)面中使用

<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", //渲染類(lèi)型
	          rows: Math.trunc(rowHeight / 17 - 1)  || 36, //行數(shù)
	          // cols: 10, // 不指定行數(shù)，自動(dòng)回車(chē)后光標(biāo)從下一行開(kāi)始
	          convertEol: true, //啟用時(shí)，光標(biāo)將設(shè)置為下一行的開(kāi)頭
	          // scrollback: 50, //終端中的回滾量
	          disableStdin: false, //是否應(yīng)禁用輸入
	          windowsMode: true, // 根據(jù)窗口換行
	          cursorStyle: "underline", //光標(biāo)樣式
	          cursorBlink: true, //光標(biāo)閃爍
	          theme: {
	            foreground: "#ECECEC", //字體
	            background: "#000000", //背景色
	            cursor: "help", //設(shè)置光標(biāo)
	            lineHeight: 20,
	          },
	        });
	
	        // 2.webSocket初始化 (不需要另外的方法)
	        const socketUri = "ws://" + process.env.VUE_APP_SOCKET + ":9207/sshSocket";
	        this.socket = new WebSocket(socketUri); // 發(fā)起連接
	
	        // 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;
	        // 發(fā)送 term 數(shù)據(jù)
	        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
	        });
	      });
	    },
	    /** 當(dāng)屏幕變化時(shí)修改 */
	    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>

到了這里，關(guān)于2023 ~【VUE+Xterm+Websocket】模擬SSH連接效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！