k8s的容器的webssh实现

标签：数据   blank   lazy   types   round   log   href   mina   new t   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 排坑不易，大家给给?※?，好让我在排坑的路上乐此不疲 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 } }, }) k8s的容器的webssh实现标签：数据   blank   lazy   types   round   log   href   mina   new t   原文地址：https://www.cnblogs.com/haozheyu/p/14865190.html