前言

在使用xterm开发前端终端的时候，一定会遇到这样一个问题，就是输入的数据有时候会下一行，有时候会覆盖前面写的，这其实不是xterm的原因，原因是后端，由于后端是使用的jsch，他默认的pty列是80，行是24，但如果前端不是这个大小，那么就会出现上述问题。

解决办法就是统一两个端的大小，创建xterm的时候指定cols、rows，和jsch的一样。

const term = new Terminal({
  cols: 80,
  rows: 24,
});

但问题又出来了，如果前端的终端大小可以随意改变，那么这时候一定要通知后端改变他的pty大小，否则还是会出现上述问题。后端可以通过以下方式设置大小。

channelShell = session!!.openChannel("shell") as ChannelShell

channelShell?.setPty(true)
channelShell?.setPtySize(col, row, w, h)

但问题是，前端如何更具终端的宽高，转换成对应的列行呢？

我找了半天，没有找到关于行数的获取的，但是找到了关于列数的设置，也就是使用xterm-addon-fit插件。

import { Terminal } from "xterm";
import { FitAddon } from "xterm-addon-fit";

const fitAddon = new FitAddon();
const term = new Terminal({
  fontSize: 16,
  rightClickSelectsWord: true,
  allowTransparency: true,
  cursorBlink: true,
  cursorStyle: "bar",
  cols: 80,
  rows: 24,
  theme: {
    background: "#00000000",
  },
});
term.loadAddon(fitAddon);

在xterm的父布局大小改变后，调用下面方法，即可让xterm自动更具父布局宽度，设置对应的列大小，然后调用xterm.cols获取现在是多少列，传给后端，后端重新设置pty大小即可。

但是不能响应高度，具体原因不知道。

fitAddon.fit();

效果展示

xterm.js + jsch不得不避的问题！

前言