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

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

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

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

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


先一睹为快

cat6.gif


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

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

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使用:github.com/huashengdun…[2]

3. 猫咪要怎样画?

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

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

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


亲自动手实现

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

1. 根据官方文档安装运行\[xtermjs文档地址\][3]

`安装:npm install xterm

直接在页面中使用:
<!doctype html>
                         dayjs@1.10.7 dayjs.min.js” class=“jop-noMdConv”>   <script src=“https: www.unpkg.com xterm-addon-attach@0.6.0 lib xterm-addon-attach.js” class=“jop-noMdConv”> </script src=“https:></script src=“node_modules></link rel=“stylesheet” href=“node_modules>     </div id=“terminal”>

`

服务端的具体实现(完整)

`#!/usr/bin/env node
var express = require(‘express’);
var app = express();
const pty = require(“node-pty”);
require(‘express-ws’)(app);

const os = require(“os”);
const shell = os.platform() === “win32” ? “powershell.exe” : “bash”;
app.ws(“/socket”, (ws, req) => {
  console.log(‘websocket连接成功了’)
  // 每次连接的时候都要生成一次term。否则在客服端刷新页面时,服务端的term就会失去连接
  // 虚拟终端(接收和转换输入)
  const term = pty.spawn(shell, [“—login”], {
    name: “xterm”,
    cols: 50,
    rows: 24,
    cwd: process.env.HOME,
    env: process.env,
  });
  ws.on(“open”, (data) => {
    console.log(‘open data===’, data)
  });
  term.on(“data”, function (data) {
    console.log(‘发送给客服端的数据===’, data)
    ws.send(data);
  });
  ws.on(“message”, (data) => {
    console.log(‘接收客服端的数据===’, data)
    term.write(data);
  });
  ws.on(“close”, function () {
    term.kill();
  });
});
app.listen(3030);

// copy后可直接在本地尝试使用

`

需要注意的是:客户端每次连接服务端的时候都要生成一次term,因此在socket每次连接时都需要初始化一次。否则在客服端重新刷新页面时,服务端的term就会失去连接

目前,我们已实现了网页终端的基本功能,官网还提供了很多有意思的插件,有兴趣的小伙伴可以去尝试哟!(More Real-world Uses[5])

文章主体内容已完成,后续会继续补充一些关于linux命名行操作vim快捷操作的相关内容。感兴趣的同学可以先加个收藏(Ctrl + D 或 command + D),以备不时之需。


最后

如果我们在遇到某些问题没有完整的思路时,也不妨先尝试下去实现。在实现的过程中再去寻找方法、总结经验。而不应该没有任何尝试就放弃实现或者认为不可能实现。

如果觉得有帮助,不妨点赞、关注支持一下。如文章有不足之处、疑问或建议,希望能在下方👇🏻 留言,非常感谢。

作者:tager
相关文章地址:`https://juejin.cn/user/4353721776234743/posts\`\[6\]

参考资料

[1]

https://xtermjs.org/: https://xtermjs.org/

[2]

https://github.com/huashengdun/webssh: https://github.com/huashengdun/webssh

[3]

https://xtermjs.org/: https://xtermjs.org/

[4]

https://xtermjs.org/docs/guides/encoding/: https://xtermjs.org/docs/guides/encoding/

[5]

https://xtermjs.org/: https://xtermjs.org/

[6]

https://juejin.cn/user/4353721776234743/posts: https://juejin.cn/user/4353721776234743/posts

往期推荐

浏览器节能机制导致Websocket断连的巨坑!

实战分享:20分钟页面不操作,页面失效

Vue 存储插件的底层原理,你不知道的 localStorage API

个人笔记记录 2021 ~ 2025