recom-gorse/web/src/components/xterm/index.vue

<template>
  <div>
    <div id="xterm"></div>
  </div>
</template>
<script>
import request from '@/utils/request2';
import {Terminal} from '../../utils/xterm/lib/xterm.js' //注意路径

var _this;
var commandKey = [];
var term;
var socket;
var sit;
export default {
  name: "xterm",
  data() {
    return {
      id: ''
    }
  },
  // created() {
  //   let arr = ['../../utils/xterm/lib/xterm.js',
  //     '../../utils/xterm-addon/lib/xterm-addon-attach.js'];
  //   arr.map((item) => {
  //     let script = document.createElement('script');
  //     script.type = 'text/javascript';
  //     script.src = item;
  //     document.getElementsByTagName('body')[0].appendChild(script);
  //   });
  // },
  mounted() {
    _this = this;
    // _this.init();
  },
  methods: {
    close() {
      if(sit) {
        clearInterval(sit);
      }
      if(socket) {
        socket.close();
      }
    },
    init(id) {
      _this.id = id;
      console.log(`当前节点ID为${id}`);
      socket = new WebSocket(`ws://47.103.128.32:10050/socket/ssh?id=${id}&nodeId=${id}&type=ssh`);
      //连接打开事件
      socket.onopen = function () {
        console.log("Socket 已打开");
      };
      //收到消息事件
      socket.onmessage = function (msg) {
        term.write(msg.data);//把接收的数据写到这个插件的屏幕上
        if (msg.data.indexOf('连接成功，sessionId=') != -1) {
          var sessionId = msg.data.slice(15);
          console.log(sessionId)
        } else {
          console.log("常规数据：" + msg.data);
        }
      };
      //连接关闭事件
      socket.onclose = function () {
        console.log("Socket已关闭");
      };
      //发生了错误事件
      socket.onerror = function () {
        alert("Socket发生了错误");
      }
      term = new Terminal({
        rendererType: "canvas", //渲染类型
        rows: parseInt(24), //行数
        cols: parseInt(100), // 不指定行数，自动回车后光标从下一行开始
        convertEol: true, //启用时，光标将设置为下一行的开头
        scrollback: 10, //终端中的回滚量
        disableStdin: false, //是否应禁用输入
        cursorStyle: "underline", //光标样式
        cursorBlink: true, //光标闪烁
        theme: {
          foreground: "yellow", //字体
          background: "#060101", //背景色
          cursor: "help" //设置光标
        }
      });
      // const attachAddon = new AttachAddon(socket);
      // term.loadAddon(attachAddon);
      term.open(document.getElementById("xterm"));
      // 支持输入与粘贴方法
      term.onData(function (key) {
        // console.log("|"+key+"|");
        // commandKey.push(key);
        // console.log(commandKey);
        // term.write(key);
        socket.send(key); //转换为字符串
      });

      term.onLineFeed(function () {
        console.log("执行换行" + JSON.stringify(commandKey))
      });

      term.onTitleChange(function (key) {
        console.log("onTitleChange:" + key);
      });

       //创建心跳，防止掉线
      sit = setInterval(() => {
        let op = {
          data: "heart",
        };
        sendJson(op);
      }, 5000);

      runFakeTerminal();
    }
  }
}


function sendJson(data) {
  // 0        CONNECTING        连接尚未建立
  // 1        OPEN            WebSocket的链接已经建立
  // 2        CLOSING            连接正在关闭
  // 3        CLOSED            连接已经关闭或不可用
  if(socket.readyState == 2 || socket.readyState == 3) {
    clearInterval(sit);
    sit = null;
  } else {
    socket.send(JSON.stringify(data));
  }
}



function runFakeTerminal() {
  if (term._initialized) {
    return;
  }
  term._initialized = true;
  term.prompt = () => {
    term.write('\r\n~$ ');
  };
  term.writeln('Welcome to xterm.js');
  prompt(term);
  term.onKey(e => {
    const printable = !e.domEvent.altKey && !e.domEvent.altGraphKey && !e.domEvent.ctrlKey && !e.domEvent.metaKey;
    if (e.domEvent.keyCode === 13) {
      prompt(term);
    } else if (e.domEvent.keyCode === 8) {
      // Do not delete the prompt
      if (term._core.buffer.x > 2) {
        // term.write('\b \b')
      }
    } else if (printable) {
      // term.write(e.key);
    }
    console.log(commandKey);
    console.log("key::" + e.domEvent.keyCode);
  });
}

function prompt(term) {
  // term.write('\r\n~$ ');
  // term.focus();
}

</script>

<style lang="scss">
@import '../../utils/xterm/css/xterm.css';
</style>