Vite2.x + Vue3.x + Xtermjs4

相關(guān)信息

• 編程語(yǔ)言：TypeScript 4.x + JavaScript
• 構(gòu)建工具：Vite 2.x
• 前端框架：Vue 3.x
• 路由工具：Vue Router 4.x
• 狀態(tài)管理：Vuex 4.x
• UI 框架：Element Plus
• CSS 預(yù)編譯：Stylus / Sass / Less
• HTTP 工具：Axios

安裝依賴

npm install
# or
yarn add

啟動(dòng)項(xiàng)目

npm run dev

項(xiàng)目打包

npm run build

功能完成

2021/6/8

具體代碼在：https://github.com/haozheyu/k8sResourceDisplay
排坑不易，大家給給?※?，好讓我在排坑的路上樂(lè)此不疲

<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(){
    //實(shí)例化路由
    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節(jié)點(diǎn)
      term.focus() // 取得輸入焦點(diǎn)
      term.writeln('Connecting...');  // 寫一行測(cè)試
      ws.onclose = function (e) {
        ElMessage.warning({
          message: '鏈接已關(guān)閉',
          type: 'warning',
          center: true,
        });
      }
      ws.onmessage = function (e) { // 服務(wù)端ssh輸出, 寫到web shell展示
        term.write(e.data)
      }
      ws.onerror = function (e) {
        ElMessage.error({
          message: '請(qǐng)更換，shell環(huán)境再試一下',
          type: 'error',
          center: true,
        });
      }
      // 當(dāng)瀏覽器窗口變化時(shí), 重新適配終端
      window.addEventListener("resize", function () {
        fitAddon.fit();
        // 把web終端的尺寸term.rows和term.cols發(fā)給服務(wù)端, 通知sshd調(diào)整輸出寬度
        var msg = {type: "resize", rows: term.rows, cols: term.cols}
        ws.send(JSON.stringify(msg))
      })
      // 當(dāng)向web終端敲入字符時(shí)候的回調(diào)
      // term.onKey(e => {  //給后端發(fā)送數(shù)據(jù)
      //   // 寫給服務(wù)端, 由服務(wù)端發(fā)給container
      //   console.log(e.key)
      //   var msg = {type: "input", input: e.key }
      //   ws.send(JSON.stringify(msg))
      // })
      // 支持輸入與粘貼方法
      term.onData(function(input) {
        // 寫給服務(wù)端, 由服務(wù)端發(fā)給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