vue中websocket结合xterm.js实现实时日志监控

实现的效果

安装xterm.js

npm install --save xterm

官网xterm.js，我项目中安装的是4.19的版本

简单使用

import {
    Terminal } from 'xterm4';
import 'xterm4/css/xterm.css';
import 'xterm4/lib/xterm.js';
const term = new Terminal()

term.open(document.getElementById('xterm'))

new Terminal(options) 可以传递一个配置项，对终端的样式和功能进行一个初始化的设定

配置项options

cols?: number; // 列数
rows?: number; // 行数
cursorBlink?: boolean;// 光标是否闪烁
cursorStyle?: 'block' | 'underline' | 'bar'; // 光标的样式
cursorWidth?: number;// cursorStyle 为 ’bar‘ 设置光标的宽度
disableStdin?: boolean;// 是否禁用输入
theme?: {
     // 主题
    cursor?: string; // 光标颜色
    cursorAccent?: string; // 光标的强调色
    foreground?: string; // 默认的前景色,即字体颜色
    background?: string; // 默认的背景色
    selection?: string; // 选择的背景色（可以是透明的）
    selectionForeground?: String; //选择的字体颜色
};

以上是项目中用到的配置项，更多请查阅官网的声明文件xterm.d.ts中查看interface ITerminalOptions和interface ITheme

实例属性

readonly element: HTMLElement | undefined; // 包含终端的元素
readonly textarea: HTMLTextAreaElement | undefined;
readonly rows: number; // 行数
readonly rows: number; // 列数
readonly buffer: IBufferNamespace; // 终端缓冲区的内容，如果要操作终端中的内容这个，了解这个属性很有必要

更多请查阅官网的声明文件xterm.d.ts中查看

内置函数 APIS

    open(HTMLElement): void; // Terminal基于传入的 dom 元素进行初始化
    dispose(): void; // Terminal销毁，同时也会销毁 dom 元素以及事件
    reset(): void; // Terminal  reset (没用过)
 
    getOption(key: string): any; // 获取配置
    setOption(key: string, value: any): void; // 动态设置配置
 
    focus(): void; // Terminal聚焦
    blur(): void; // Terminal失焦
    resize(columns: number, rows: number): void; // 可以动态设置行数和列数
 
    write(data: string | Uint8Array, callback?: () => void): void; // xterm终端写入
    writeln(data: string | Uint8Array, callback?: () => void): void;// (没用过)
    writeUtf8(data: Uint8Array, callback?: () => void): void;// (没用过)
    clear(): void; // 清空光标所在行上面的所有输入内容，不包含删除当前光标所在行
 
    select(column: number, row: number, length: number): void; // 选择第row + 1 行的 第 column + 1 列开始，直到后面的第 length 个字符