将命令行工具转为 Web 页面?

脑洞前端

共 1260字,需浏览 3分钟

 · 2021-07-09


这是个什么东西

作为程序员不可避免的会与命令行打交道。我们会用很多的命令行工具,甚至自己开发一些命令行工具。那么如何将一个命令行工具转成 web 页面,变成一个「云端应用」,方便地与队友共享呢?

比如我做了一个可以将命令行转为 web 页面的工具叫 ttw(terminal to web),此时我想将 vi 变成一个 web 页面。

首先,可以执行如下命令:

ttw  vi

然后就返回一个 web 页面地址,比如是 https://lucifer.ren/ttw/dsuh8643&8934 打开后会发现就是 vim 的页面,然后你可以像本地命令行一样去进行操作,并得到实时的返回效果。

至此,我们就完成了将命令行工具转化为 web 页面的功能。

如何实现

我们可以将命令行工具看成是「从标准输入或者命令行参数读取输入,然后做一些处理,最后做出响应(包括读写文件,输出等)」

而做成 web 页面后,除了输出其实都是还是在本地的电脑上进行就好了。因此我们要做的其实就是将「输出部分转到」 web 上而已。

基于此,我们只需要:

  1. 代理命令行的输入和输出。
  2. 将输出通过 web socket 同步到 web 页面。

显然,我们可以将同步到多个客户端。

整个架构可以分为三个部分,命令行客户端,web socket 客户端 和 server 端。

命名行客户端负责解析输入,并 fork 子进程调用真实的命令行工具,同时将代理的输入传递给它。接下来开启一个服务端的监听,同时将真实命令行的输出通过 web socket 同步到 web socket 客户端。

这里我们甚至可以做一些权限控制,比如哪些人可以做编辑,哪些人不可以等等。

有什么用

我们可以做一些在线的控制台。比如阿里云的控制台,可以直接在 web 上操作远程的主机。

比如我本地使用命令行报错了(比如 npm run dev 报错),就可以通过这个工具实现「远程投屏」效果,给别人最最精准的信息,甚至可以用它来报 bug 也行。

更多用处,等你来探索。

相关工具推荐

原理差不多讲完了,那有没有现成的工具可以做到呢?

当然有了,以下这两款工具都可以将你的命令行转化为 web 页面。

  • gotty[1]
  • termpair[2]

Reference

[1]

gotty: https://github.com/sorenisanerd/gotty

[2]

termpair: https://github.com/cs01/termpair

爱心三连击

1.看到这里了就点个在看支持下吧,你的在看是我创作的动力。

2.关注公众号脑洞前端,获取更多前端硬核文章!加个星标,不错过每一条成长的机会。

3.如果你觉得本文的内容对你有帮助,就帮我转发一下吧。

浏览 11
点赞
评论
收藏
分享

手机扫一扫分享

举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

举报