【xterm】在浏览器中实现SSH终端,实现远程登录服务器

发布时间 2023-11-02 13:44:49作者: 伊粒

image
使用插件 Xterm.js 扩展终端功能的 JavaScript 模块

网页植入SSH终端(web-terminal) 连接服务端,实现远程登录,用户可以在网页上直接进行远程登录和操作服务器,而无需使用传统的终端或SSH客户端

HTML 示例

npm install xterm

 <!doctype html>
  <html>
    <head>
      <link rel="stylesheet" href="node_modules/xterm/css/xterm.css" />
      <script src="node_modules/xterm/lib/xterm.js"></script>
    </head>
    <body>
      <div id="terminal"></div>
      <script>
        var term = new Terminal();
        term.open(document.getElementById('terminal'));
        term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
      </script>
    </body>
  </html>

vue3 示例

示例项目基于 Vue.js + Node WebSocket 通信服务
ws 库,创建 websocket 服务端
node-pty 库,模拟创建伪终端模拟器

vue3 WebSocket xterm