推荐系统初始化

web/src/components/xterm/index.vue

@@ -0,0 +1,171 @@
+<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>