Vite2.x + Vue3.x + Xtermjs4
相关信息
- 编程语言：TypeScript 4.x + JavaScript
- 构建工具：Vite 2.x
- 前端框架：Vue 3.x
- 路由工具：Vue Router 4.x
- 状态管理：Vuex 4.x
- UI 框架：Element Plus
- CSS 预编译：Stylus / Sass / Less
- HTTP 工具：Axios
安装依赖
npm install
# or
yarn add
启动项目
npm run dev
项目打包
npm run build
功能完成
2021/6/8
具体代码在：https://github.com/haozheyu/k8sResourceDisplay
排坑不易，大家给给⭐※⭐，好让我在排坑的路上乐此不疲
<template>
<div ref="terminal" id="terminal"></div>
</template>
<script>
import {defineComponent, reactive, toRefs, onMounted, ref, markRaw, onBeforeUnmount, onUnmounted} from 'vue'
import { useRouter } from 'vue-router'
import { Terminal } from 'xterm';
import { FitAddon } from 'xterm-addon-fit';
import 'xterm/css/xterm.css'
import { ElMessage } from 'element-plus'
export default defineComponent({
name: 'Xterm',
setup(){
//实例化路由
const shellWs = ref(null)
const rows = ref(null)
const cols = ref(null)
const term = new Terminal({
rendererType: 'canvas',
cursorBlink: true,
convertEol: true,
scrollback: 800,
row: 70,
theme: {
foreground: 'white',
background: '#181E29'
}
})
const fitAddon = new FitAddon();
// canvas背景全屏
term.loadAddon(fitAddon);
fitAddon.fit();
const router = useRouter();
const podName = router.currentRoute.value.query.podName
const podNamespace = router.currentRoute.value.query.podNamespace
const containerName = router.currentRoute.value.query.containerName
const SHELL = router.currentRoute.value.query.shell
const querystring = "ws://localhost:8080/resource/websocket?" + "podNs="+ podNamespace + "&podName=" + podName + "&containerName=" + containerName + "&shell=" + SHELL
const ws = new WebSocket(querystring)
onMounted(()=>{
term.open(document.getElementById('terminal')); //绑定dom节点
term.focus() // 取得输入焦点
term.writeln('Connecting...'); // 写一行测试
ws.onclose = function (e) {
ElMessage.warning({
message: '链接已关闭',
type: 'warning',
center: true,
});
}
ws.onmessage = function (e) { // 服务端ssh输出, 写到web shell展示
term.write(e.data)
}
ws.onerror = function (e) {
ElMessage.error({
message: '请更换，shell环境再试一下',
type: 'error',
center: true,
});
}
// 当浏览器窗口变化时, 重新适配终端
window.addEventListener("resize", function () {
fitAddon.fit();
// 把web终端的尺寸term.rows和term.cols发给服务端, 通知sshd调整输出宽度
var msg = {type: "resize", rows: term.rows, cols: term.cols}
ws.send(JSON.stringify(msg))
})
// 当向web终端敲入字符时候的回调
// term.onKey(e => { //给后端发送数据
// // 写给服务端, 由服务端发给container
// console.log(e.key)
// var msg = {type: "input", input: e.key }
// ws.send(JSON.stringify(msg))
// })
// 支持输入与粘贴方法
term.onData(function(input) {
// 写给服务端, 由服务端发给container
var msg = {type: "input", input: input}
ws.send(JSON.stringify(msg))
})
})
onUnmounted(()=>{
ws.close()
})
return {
shellWs, term, rows, cols
}
},
})
</script>
<style>
</style>
image.png
