在浏览器里面运行命令行,真香!

2024-05-15 11:38

本文主要是介绍在浏览器里面运行命令行,真香!,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

这是「进击的Coder」的第 545 篇技术分享

作者:崔庆才

之前我写过一篇《万物皆可 API》,这个项目就是把一些脚本的执行结果输出到了网页里面。

但是这个还是有很多改进空间,比如说 UI 能好看些,甚至能执行交互命令该多好,最后思来想去,它的究极形态不就是一个 Web 版的 Terminal (终端)吗?

然后本来我还想着对项目进行改造来着,但是想想,最终如果要改造成一个 Web 版的 Terminal,这个肯定已经有开源实现了。

于是我就开始搜,最后搜到几个还不错的。

Web Terminal

  • ttyd:https://github.com/tsl0922/ttyd,一款可以将命令行转到 Web 执行的工具,基于 C 编写的。

  • gotty:https://github.com/yudai/gotty,和 ttyd 一样,只不过是 Go 语言写的,但最新更新是在 2017 年了,估计失修了。

  • wetty:https://github.com/butlerx/wetty,基于 Node.js 开发的,也可以将命令行转到 Web 执行,但是需要基于 SSH 登录,其实就是个 Web 版的 SSH 终端。

  • Secure Shell (Chrome App):Google 浏览器插件,也可以提供网页版 SSH 终端。

  • tmate:https://tmate.io/,从 tmux 修改而来,可以支持 Terminal 分享。

经过一番试用,我个人首推的还是 ttyd,其他的几个要么是基于 SSH 的,要么不怎么好用或停止维护了。

下面我就来介绍下 ttyd 的简单用法。

安装

安装其实非常简单,我用的是 Mac,所以用 HomeBrew 直接安装即可:

brew install ttyd

如果你用的是 Windows、Linux,依然也可以支持,安装可以参考 https://github.com/tsl0922/ttyd#installation 章节。

使用

ttyd 支持不少功能配置,完整命令如下:

ttyd is a tool for sharing terminal over the webUSAGE:ttyd [options] <command> [<arguments...>]VERSION:1.6.3OPTIONS:-p, --port              Port to listen (default: 7681, use `0` for random port)-i, --interface         Network interface to bind (eg: eth0), or UNIX domain socket path (eg: /var/run/ttyd.sock)-c, --credential        Credential for Basic Authentication (format: username:password)-u, --uid               User id to run with-g, --gid               Group id to run with-s, --signal            Signal to send to the command when exit it (default: 1, SIGHUP)-a, --url-arg           Allow client to send command line arguments in URL (eg: http://localhost:7681?arg=foo&arg=bar)-R, --readonly          Do not allow clients to write to the TTY-t, --client-option     Send option to client (format: key=value), repeat to add more options-T, --terminal-type     Terminal type to report, default: xterm-256color-O, --check-origin      Do not allow websocket connection from different origin-m, --max-clients       Maximum clients to support (default: 0, no limit)-o, --once              Accept only one client and exit on disconnection-B, --browser           Open terminal with the default system browser-I, --index             Custom index.html path-b, --base-path         Expected base path for requests coming from a reverse proxy (eg: /mounted/here)-P, --ping-interval     Websocket ping interval(sec) (default: 300)-6, --ipv6              Enable IPv6 support-S, --ssl               Enable SSL-C, --ssl-cert          SSL certificate file path-K, --ssl-key           SSL key file path-A, --ssl-ca            SSL CA file path for client certificate verification-d, --debug             Set log level (default: 7)-v, --version           Print the version and exit-h, --help              Print this text and exitVisit https://github.com/tsl0922/ttyd to get more information and report bugs.

可以看到,这里可以使用 -p 来指定运行端口,使用 -c 指定登录密码等等。

基本使用

我们来试下,最基本的命令如下:

ttyd bash

这样就使用启动了一个 Web 版的 bash,运行结果如下:

28ae04600b0095681346333b8eda4835.png

这里显示是在 7681 上运行的,那我们就可以打开 http://localhost:7681/,就可以直接运行命令了:

4b7dd4669b3518a226c2098aebccbd5f.png

非常丝滑。

看了下背后的传输协议是 WebSocket,所以稳定性还是有保障的:

e4a2d76800ccd3aef434b5c8427a3d71.png

当然,我们也可以不用 bash,用自己喜欢的 Shell,比如 zsh,命令如下:

ttyd zsh

这样的话浏览器里面的 Shell 就是 zsh 啦:

7aee4ab5549b0f0cd0cb23515a5c0527.png

绑定端口

当然我们也可以更换端口,比如 8000,则可以使用如下命令:

ttyd -p 8000 zsh

这样 ttyd 就可以在 8000 端口运行 HTTP 服务,我们打开 http://localhost:8000/ 就可以执行命令了。

Basic Auth

当然这么直接暴露出去似乎也不太安全,我们可以设置 Basic Auth,使用 -c 这个选项即可指定用户名密码,格式为 username:password,例如我们指定用户名和密码都是 admin,那命令就这么写:

ttyd -p 8000 -c admin:admin zsh

这样打开  http://localhost:8000/ 之后就需要输入用户名密码才可以登录了:

f9edea080bdb2738a25dcccd27e5d225.png

自动打开浏览器

我们还可以使用 -B 命令让它自动打开浏览器:

ttyd -p 8000 -B zsh

这样运行之后,默认的浏览器就会自动打开 http://localhost:8000/,不用我们再去敲网址了,十分方便。

所以,上面这个命令甚至我们还可以做成一个 alias,比如:

alias webcmd="ttyd -p 8000 -B zsh";

这样输入 webcmd 就可以轻松打开一个 Web 版命令行了。

Docker 支持

另外 ttyd 还提供了 Docker 镜像,如果你不想安装的话,可以直接启 Docker,比如这样的话就可以在 7681 上启动:

docker run -it --rm -p 7681:7681 tsl0922/ttyd

但这实际上是把容器内部的命令行暴露出来了,如果要暴露宿主机的命令行还需要 mount 下磁盘:

SSH 终端

ttyd 还支持 SSH 终端,命令如下:

ttyd login

这样的话,打开浏览器之后就需要 SSH 登录,输入正确的 SSH 用户名和密码后才能使用。

SSL 支持

如果你想配置 SSL 支持,即支持 HTTPS 的话,可以自己生成证书并添加对应的参数来启动 ttyd,参考链接是:https://github.com/tsl0922/ttyd/wiki/SSL-Usage。

更多

上面的用法基本能满足日常需要了,如果想要了解更多用法,可以参考其 Wiki,链接是:https://github.com/tsl0922/ttyd/wiki/Example-Usage。

公网暴露

当然,我们如果想把它公网暴露出来,还可以配合 Ngrok,比如 ttyd 运行在 8000 端口上,我可以使用 Ngrok 将其暴露出来:

ngrok http 8000

运行结果如下:

69984921706d0c30a23a7c8408bdb535.png

这样我就可以通过指定的 URL 访问这个终端了,比如这里我就可以使用 https://11b4-2404-f801-8050-3-bf-00-55.ngrok.io/ 来访问我的终端了:

01cab19cde929e3bd4be3b4168029888.png

非常 Nice!

总结

好了,以上就是 ttyd 的基本使用了,有了它,我们就可以轻松将某台机器上的终端转到 Web 上来执行了,还是非常方便有用的。

15f22acb948eb70a8bef4ee5c5eb52c7.png

End

崔庆才的新书《Python3网络爬虫开发实战(第二版)》已经正式上市了!书中详细介绍了零基础用 Python 开发爬虫的各方面知识,同时相比第一版新增了 JavaScript 逆向、Android 逆向、异步爬虫、深度学习、Kubernetes 相关内容,‍同时本书已经获得 Python 之父 Guido 的推荐,目前本书正在七折促销中!

内容介绍:《Python3网络爬虫开发实战(第二版)》内容介绍

ef09d7593dcb0649c94f6e03a053f612.png

扫码购买

19288545e1bee867e7bc20dbe8261619.png

好文和朋友一起看~

这篇关于在浏览器里面运行命令行,真香!的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/991729

相关文章

在VSCode中本地运行DeepSeek的流程步骤

《在VSCode中本地运行DeepSeek的流程步骤》本文详细介绍了如何在本地VSCode中安装和配置Ollama和CodeGPT,以使用DeepSeek进行AI编码辅助,无需依赖云服务,需要的朋友可... 目录步骤 1:在 VSCode 中安装 Ollama 和 CodeGPT安装Ollama下载Olla

Windows server服务器使用blat命令行发送邮件

《Windowsserver服务器使用blat命令行发送邮件》在linux平台的命令行下可以使用mail命令来发送邮件,windows平台没有内置的命令,但可以使用开源的blat,其官方主页为ht... 目录下载blatBAT命令行示例备注总结在linux平台的命令行下可以使用mail命令来发送邮件,Win

解读docker运行时-itd参数是什么意思

《解读docker运行时-itd参数是什么意思》在Docker中,-itd参数组合用于在后台运行一个交互式容器,同时保持标准输入和分配伪终端,这种方式适合需要在后台运行容器并保持交互能力的场景... 目录docker运行时-itd参数是什么意思1. -i(或 --interactive)2. -t(或 --

pycharm远程连接服务器运行pytorch的过程详解

《pycharm远程连接服务器运行pytorch的过程详解》:本文主要介绍在Linux环境下使用Anaconda管理不同版本的Python环境,并通过PyCharm远程连接服务器来运行PyTorc... 目录linux部署pytorch背景介绍Anaconda安装Linux安装pytorch虚拟环境安装cu

使用Go语言开发一个命令行文件管理工具

《使用Go语言开发一个命令行文件管理工具》这篇文章主要为大家详细介绍了如何使用Go语言开发一款命令行文件管理工具,支持批量重命名,删除,创建,移动文件,需要的小伙伴可以了解下... 目录一、工具功能一览二、核心代码解析1. 主程序结构2. 批量重命名3. 批量删除4. 创建文件/目录5. 批量移动三、如何安

Android里面的Service种类以及启动方式

《Android里面的Service种类以及启动方式》Android中的Service分为前台服务和后台服务,前台服务需要亮身份牌并显示通知,后台服务则有启动方式选择,包括startService和b... 目录一句话总结:一、Service 的两种类型:1. 前台服务(必须亮身份牌)2. 后台服务(偷偷干

JavaWeb-WebSocket浏览器服务器双向通信方式

《JavaWeb-WebSocket浏览器服务器双向通信方式》文章介绍了WebSocket协议的工作原理和应用场景,包括与HTTP的对比,接着,详细介绍了如何在Java中使用WebSocket,包括配... 目录一、概述二、入门2.1 POM依赖2.2 编写配置类2.3 编写WebSocket服务2.4 浏

通过prometheus监控Tomcat运行状态的操作流程

《通过prometheus监控Tomcat运行状态的操作流程》文章介绍了如何安装和配置Tomcat,并使用Prometheus和TomcatExporter来监控Tomcat的运行状态,文章详细讲解了... 目录Tomcat安装配置以及prometheus监控Tomcat一. 安装并配置tomcat1、安装

CSS自定义浏览器滚动条样式完整代码

《CSS自定义浏览器滚动条样式完整代码》:本文主要介绍了如何使用CSS自定义浏览器滚动条的样式,包括隐藏滚动条的角落、设置滚动条的基本样式、轨道样式和滑块样式,并提供了完整的CSS代码示例,通过这些技巧,你可以为你的网站添加个性化的滚动条样式,从而提升用户体验,详细内容请阅读本文,希望能对你有所帮助...

mysqld_multi在Linux服务器上运行多个MySQL实例

《mysqld_multi在Linux服务器上运行多个MySQL实例》在Linux系统上使用mysqld_multi来启动和管理多个MySQL实例是一种常见的做法,这种方式允许你在同一台机器上运行多个... 目录1. 安装mysql2. 配置文件示例配置文件3. 创建数据目录4. 启动和管理实例启动所有实例