专栏名称: 前端大全

分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

万万没想到，用浏览器打开终端竟这么容易实现

前端大全 · 公众号 · · 2024-06-14 11:50

正文

作者：tager

https://juejin.cn/post/7028813566266310686

前言

你所追求的事物，所做的每一件事情，都有它存在的意义

说到用网页打开终端，相信大多数人都使用过，但是应该也没几个人去认真研究过🤔。自己也是因工作需要，于是对其进行了一番探索。

如果你有用过云服务器，肯定对这个就更熟悉了，比如阿里云的Workbench远程连接。它提供给我们的服务便利性、用户体验还是相当不错的，让我们和实际的机器通过网络联通了。

除此之外，浏览器上能运行的东西还有很多， 如：云文档、云软件、云IDE、云储存、云函数、云调用、云编辑器等等......

下面我们来做个小任务：用网页打开终端，然后在终端输入 small_cat 指令后，在终端输出一群小猫咪🐱。

先一睹为快

快速实现(仅需两步🚀 + 浏览器访问)

已有很成熟的组件库基于xterm.js来实现网页终端，比如webssh（More Real-world Uses(https://xtermjs.org/)），仅需两步就可以在网页连接你的服务器了。有木有很惊喜😁

1. 执行 `pip install webssh` ，安装webssh

首先要确定电脑安装了 Python ，且版本为2.7/3.4+

但实际上还是使用了 python3 （用 pythond+pip 安装时报错了，可能是Python和pip 版本不匹配 ）。

如果你使用的mac，可以通过命令查看是否已存在python3，如下：

python2 --version
-> Python 2.7.16
python3 --version 或者 /usr/bin/python3 --version
-> Python 3.9.5

确定有python3之后可以直接执行（如有错误可再升级 pip ）：

python3 -m pip install webssh 或者 pip3 install webssh

# 如果pip报错，根据终端提示升级pip，执行：
sudo /usr/bin/python3 -m pip install --upgrade pip

// 再重新安装即可
sudo /usr/bin/python3 -m pip install webssh

2. 启动webssh服务

在终端输入 wssh 即可在本地打开浏览器访问了。

（当然，运行wssh会占用进程，如果是部署到生产环境，需要使其在后台运行，并开启进程守护）

更多使用可参考webssh使用：https://github.com/huashengdun/webssh

3. 猫咪要怎样画？

回答可能会让你大跌眼镜👓----答案是使用 console 😄，我们可以使用 console 输出字符图片，也可以使用 console 输出背景图案（ nodejs的console不支持输出背景图 ）。（当然也可以使用 echo , 总之都是用 shell 去执行的脚本。）

到此，这个小任务就已完成了。

当然，如果你是对技术比较有追求的小伙伴，想自己实现扩展一些功能的话，也是没问题的。请看下面：

亲自动手实现

经了解发现，浏览器打开终端的解决方案，大部分使用的xterm.js，它被 VS Code、Hyper 和 Theia 等流行项目使用。除了提供基本的功能，还提供了很多终端相关的插件。下面我们一起来使用它，实现自己的网页终端。

1. 根据官方文档安装运行 xtermjs文档地址(https://xtermjs.org/)

安装：npm install xterm

直接在页面中使用：
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>

2.在客服端无法输入字符

运行后，发现 无法在浏览器终端输入任何字符 。查找文档后发现需要监听每次的输入：

term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
// 需要在脚本下增加：
term.onData((value)=>{
  term.write(value)
})

3.按删除键无效，回车时光标到了第一个字符

再次尝试，发现可以输入了，但是无法删除已输入的字符，继续查文档，发现是编码问题，无法识别删除等键。如文档所说，需使用 node-pty 来编译输入,它是基于 Node.js 的解决方案。

原理梳理（简概）

实现的逻辑是：客户端的任何输入指令 ==> 通过 websocket 传入到后端 ==> 在后端虚拟终端中编译后 ==> 再将结果通过 websocket 返回给客户端。

4.服务端虚拟终端（接收和转换来自客服端的输入）

浏览器端的具体实现（完整）：

html>
<html>
<head>
  <link rel="stylesheet" href="node_modules/xterm/css/xterm.css" />
  <script src="node_modules/xterm/lib/xterm.js">script>
  <script src="https://www.unpkg.com/[email protected]/dayjs.min.js">script>
  <script src="https://www.unpkg.com/[email protected]/lib/xterm-addon-attach.js">script>
head>

<body>
  <div id="terminal">div>
  <script>
    var term = new Terminal();
    term.open(document.getElementById('terminal'));
    term.focus()
    const socketURL = "ws://127.0.0.1:3030/socket";
    const ws = new WebSocket(socketURL);
    attachAddon = new AttachAddon.AttachAddon(ws);
    term.loadAddon(attachAddon);
  script>
body>
html>

服务端的具体实现（完整） ：