xterm 是一個使用 TypeScript 撰寫的前端終端組件，可以直接在瀏覽器中實作一個命令列終端應用。
主要特性：
終端應用程式正常作業：Xterm.js適用于大多數終端應用程式，如bash，vim和tmux，這包括對基于curses的應用程式和滑鼠事件支持的支持
Performant：Xterm.js 非常快，它甚至還包括一個GPU加速的渲染器
豐富的 unicode 支持：支持CJK，表情符號和IME
自包含：零依賴性可訪問：可以使用screenReaderMode選項打開螢屏閱讀器支持
還有更多：鏈接，主題，插件，記錄良好的API等。
xterm.js推薦使用最新版
基本展示：
<template>
<div class="container">
<div id="terminal-container"></div>
</div>
</template>
<script>
import 'xterm/dist/xterm.css
import { Terminal } from 'xterm';
export default {
mounted(){
let terminalContainer = document.getElementById('terminal-container')
let term = new Terminal()
term.open(terminalContainer)
}
};
</script>
專案的復制、粘貼功能。
<template>
<div class="container">
<div id="terminal-container"></div>
</div>
</template>
<script>
import "xterm/dist/xterm.css";
import { Terminal } from "xterm";
import * as fit from "xterm/lib/addons/fit/fit";
Terminal.applyAddon(fit); // Apply the `fit` addon
export default {
data() {
return {
copy: ""
};
},
mounted() {
let terminalContainer = document.getElementById("terminal-container");
let term = new Terminal({
// 游標閃爍
cursorBlink: true
});
term.open(terminalContainer, true);
term.fit();
let websocket = new WebSocket('ws:**********');//地址
websocket.binaryType = "arraybuffer";
//連接成功
websocket.onopen = function(evt) {
console.log("onopen", evt);
term.writeln(
"******************************************************************"
);
};
//輸入
term.on("data", function(data) {
console.log("data", data);
websocket.send(new TextEncoder().encode("\x00" + data));
});
//回傳
websocket.onmessage = function(evt) {
let str = new TextDecoder().decode(evt.data);
term.write(str);
};
//關閉
websocket.onclose = function(evt) {
console.log("close", evt);
};
//錯誤
websocket.onerror = function(evt) {
console.log("error", evt);
};
//選中 復制
term.on("selection", function() {
if (term.hasSelection()) {
this.copy = term.getSelection();
}
});
term.attachCustomKeyEventHandler(function(ev) {
//粘貼 ctrl+v
if (ev.keyCode == 86 && ev.ctrlKey) {
websocket.send(new TextEncoder().encode("\x00" + this.copy));
}
});
}
};
</script>
附上：專案例子:http://www.canis.cn/app_download.html
該工具支撐IT運維工程師，歡迎注冊下載。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/7455.html
標籤：網絡通信