做一个web termianl

Copy 
1import { useEffect, useLayoutEffect, useRef } from "react";
2import { Terminal } from "xterm";
3import { AttachAddon } from "xterm-addon-attach";
4import { FitAddon } from "xterm-addon-fit";
5import { SearchAddon } from "xterm-addon-search";
6import { WebLinksAddon } from "xterm-addon-web-links";
7import { AdventureTime } from "xterm-theme";
8import { useSize, useWebSocket } from "ahooks";
9import "xterm/css/xterm.css";
10import "./index.less";
11
12const socketURL = "ws://127.0.0.1:4000/socket";
13const height = 500;
14const fontSize = 12;
15
16export default function HomePage() {
17  const termRef = useRef<any>(null);
18  const containerRef = useRef<any>(null);
19  const insDomRef = useRef<any>(null);
20  // 监听容器尺寸，用于做自适应
21  const size = useSize(containerRef);
22
23  // 直接使用封装好的useWebSocket
24  const {
25    readyState,
26    sendMessage,
27    latestMessage,
28    disconnect,
29    connect,
30    webSocketIns,
31  } = useWebSocket(socketURL);
32
33  useEffect(() => {
34    if (!webSocketIns) {
35      return;
36    }
37
38    // 创建终端实例
39    var term = new Terminal({
40      fontFamily: 'Menlo, Monaco, "Courier New", monospace',
41      fontWeight: 400,
42      fontSize,
43      theme: AdventureTime,
44      rows: Math.floor(height / (fontSize + 2)),
45    });
46
47    // 添加终端插件
48    // An addon for xterm.js that enables attaching to a web socket
49    const attachAddon = new AttachAddon(webSocketIns as WebSocket);
50    // 自适应容器插件
51    const fitAddon = new FitAddon();
52    // 搜索插件
53    const searchAddon = new SearchAddon();
54    // 超链接显示插件
55    const webLinksAddon = new WebLinksAddon();
56
57    term.loadAddon(attachAddon);
58    term.loadAddon(fitAddon);
59    term.loadAddon(searchAddon);
60    term.loadAddon(webLinksAddon);
61
62    // 把示例挂载给ref
63    termRef.current = {
64      term,
65      searchAddon,
66      fitAddon,
67    };
68
69    // render 终端到容器
70    term.open(insDomRef.current);
71    // 适用容器（发现只能适应宽度）
72    fitAddon.fit();
73
74    return () => {
75      //组件卸载，清除 Terminal 实例
76      term.dispose();
77      termRef.current = null;
78    };
79  }, [webSocketIns]);
80
81  // 响应容器尺寸副作用
82  useLayoutEffect(() => {
83    if (!size) {
84      return;
85    }
86    // 想做响应式高度、不过这个方法调用报错说rows只能在构造函数里指定，暂时没想到好的办法处理
87    // termRef.current.term.setOption(
88    //   "rows",
89    //   Math.floor(size.height / (fontSize + 2))
90    // );
91    termRef.current?.fitAddon?.fit();
92  }, [size]);
93
94  return (
95    <>
96      <input
97        type="text"
98        placeholder="查询关键字"
99        onChange={(e) => termRef.current.searchAddon?.findNext(e.target.value)}
100        style={{ marginBottom: 10 }}
101      />
102      <div style={{ height, width: "100%" }} ref={containerRef}>
103        <div
104          style={{
105            background: "#1F1D45",
106            borderRadius: 10,
107            overflow: "hidden",
108            padding: 10,
109          }}
110          ref={insDomRef}
111        />
112      </div>
113    </>
114  );
115}

Copy 
1.xterm .xterm-viewport {
2  &::-webkit-scrollbar {
3    width: 10px;
4    height: 10px;
5  }
6
7  &::-webkit-scrollbar-track {
8    background-color: transparent;
9    border-radius: 10px;
10  }
11
12  &::-webkit-scrollbar-thumb {
13    background-color: rgba(255, 255, 255, 0.1);
14    border-radius: 10px;
15  }
16}

Copy 
1const express = require("express");
2const expressWs = require("express-ws");
3const pty = require("node-pty");
4const os = require("os");
5const example = require("./data");
6const app = express();
7const port = 4000;
8
9expressWs(app);
10
11// 创建终端子进程
12const shell = os.platform() === "win32" ? "powershell.exe" : "bash";
13const term = pty.spawn(shell, ["--login"], {
14  name: "xterm-color",
15  cols: 80,
16  rows: 24,
17  cwd: process.env.HOME,
18  env: process.env,
19});
20
21// 暴露socket
22app.ws("/socket", (ws, req) => {
23  term.write(example);
24  // 编码转换
25  term.onData(function (data) {
26    ws.send(data);
27  });
28  // 收到输入
29  ws.on("message", (data) => {
30    term.write(data);
31  });
32  ws.on("close", function () {
33    term.kill();
34  });
35});
36
37app.listen(port, "127.0.0.1", () => {
38  console.log(`Example app listening on port ${port}`);
39});