vue xterm.js命令行使用及问题解决

安装

npm i xterm --save

配置

基础展示

<template>
    <div class="container">
      <div id="terminal-container"></div>
    </div>
</template>

<script>
import 'xterm/dist/xterm.css
import { Terminal } from 'xterm';

export default {
  mounted(){
    let terminalContainer = document.getElementById('terminal-container')
    let term = new Terminal()
    term.open(terminalContainer)
  }
};
</script>

以下内容都是，在此基础上的添加修改，非单独使用

输入

term.on('key', function(key, ev) {
    console.log("key==========",ev.keyCode);
     term.write(key)//输入
     //term.writeln(key)//输入并换行
 })

大小
cols: 92, rows: 22,

let term = new Terminal({
      cols: 92,
      rows: 22,
      cursorBlink: true, // 光标闪烁
      cursorStyle: "underline", // 光标样式  null | 'block' | 'underline' | 'bar'
      scrollback: 800, //回滚
      tabStopWidth: 8, //制表宽度
      screenKeys: true//
    });

自适应大小(使终端的尺寸和几何尺寸适合于终端容器的尺寸) 只是width

import * as fit from 'xterm/lib/addons/fit/fit';

Terminal.applyAddon(fit);  // Apply the `fit` addon

//调用
term.fit();

全屏

import 'xterm/dist/addons/fullscreen/fullscreen.css'//如果不成功，请检查路径

import * as fullscreen from 'xterm/lib/addons/fullscreen/fullscreen';
Terminal.applyAddon(fullscreen);  // Apply the `fullscreen` addon

//调用
term.toggleFullScreen();//全屏
term.toggleFullScreen();//正常
term.toggleFullScreen();//全屏

项目代码基本功能+复制粘贴

<template>
  <div class="container">
    <div id="terminal-container"></div>
  </div>
</template>

<script>
import "xterm/dist/xterm.css";
import { Terminal } from "xterm";
import * as fit from "xterm/lib/addons/fit/fit";
Terminal.applyAddon(fit); // Apply the `fit` addon
export default {
  data() {
    return {
      copy: ""
    };
  },
  mounted() {
    let terminalContainer = document.getElementById("terminal-container");
    let term = new Terminal({
      // 光标闪烁
      cursorBlink: true
    });
    term.open(terminalContainer, true);
    term.fit();

    let websocket = new WebSocket('ws:**********');//地址
    websocket.binaryType = "arraybuffer";
    //连接成功
    websocket.onopen = function(evt) {
      console.log("onopen", evt);
      term.writeln(
        "******************************************************************"
      );
    };
    //输入
    term.on("data", function(data) {
      console.log("data", data);
      websocket.send(new TextEncoder().encode("\x00" + data));
    });
    //返回
    websocket.onmessage = function(evt) {
      let str = new TextDecoder().decode(evt.data);
      term.write(str);
    };
    //关闭
    websocket.onclose = function(evt) {
      console.log("close", evt);
    };
    //错误
    websocket.onerror = function(evt) {
      console.log("error", evt);
    };
    //选中 复制
    term.on("selection", function() {
      if (term.hasSelection()) {
        this.copy = term.getSelection();
      }
    });
    term.attachCustomKeyEventHandler(function(ev) {
      //粘贴 ctrl+v
      if (ev.keyCode == 86 && ev.ctrlKey) {
        websocket.send(new TextEncoder().encode("\x00" + this.copy));
      }
    });
  }
};
</script>

1
TextEncoder.encode()
TextDecoder.decode()
通过以上两个方法进行,Uint8Array对象的编解码,方便传输
2 大小自适应
当终端打开后,在变动窗口大小,如何自适应

window.onresize = function() {
    term.fit();
    term.scrollToBottom();
};

window.onresize 的多次调用限制,请自行查询.
在项目中 window.onresize只能挂载一次，在多个页面中同时挂载 window.onresize时，只有其中一个 window.onresize会起作用
所以,在终端关闭后我们要取消resize的监听

window.addEventListener('resize',this.windowChange)

windowChange(){
    this.term.fit();
    this.term.scrollToBottom();
}

// 关闭时,取消监听
websocket.onclose = function(evt) {
      console.log("close", evt);
      window.removeEventListener('resize',this.windowChange)
};

3 当连bash 时,会出现输入大量内容把当强行最前面的内容覆盖的问题
问题如图所示

测试发现是使用了fit(),或者设置了cols,会发生这种状况.

不设置fit()和cols
在这里插入图片描述
github-issues 找到说法issues连接

所以根据需求在请求上添加 cols ,使后台或者服务的大小修改成你窗口的大小.

let height = document.body.clientHeight;
let rows = height/18;//18是字体高度,根据需要自己修改
let term = new Terminal({
    rows:parseInt(rows)
});
term.open(terminalContainer, true);
term.fit();
let socket = new WebSocket(`ws://*******command=env&command=TERM%3Dxterm&command=COLUMNS%3D${term.cols}&command=LINES%3D${rows}&command=/bin/bash&********`,"channel.k8s.io");

.....同上述代码

command=env&command=TERM%3Dxterm&command=COLUMNS%3D${term.cols}&command=LINES%3D${rows}主要是这段代码,什么意思我也不知道- -

windowChange(){
        let height = document.body.clientHeight;
        let rows = height/18;
        this.term.fit();
        this.term.resize(this.term.cols,parseInt(rows))//终端窗口重新设置大小 并触发term.on("resize"
        this.term.scrollToBottom();
}
term.on("resize", function(evt) {
      self.socket.send(
        JSON.stringify({ Op: "resize", Cols: self.term.cols, Rows: self.term.rows })//发送修改大小
      );
});

4连接sh时，上下左右键出现类似^[[A等问题
bash，上下左右键好使
经过多次测试研究，发现同时有bash/sh的，(上下左右等)bash好使，sh不好使；只有sh时,(上下左右等)好使
所以
都先连bash,若bash连接报错,在连sh

xterm.js 使用及问题【新】

vue xterm.js命令行使用及问题解决

安装

配置

悦读