在浏览器里实现一个远程终端
最近在做的一个需求:
实现一个终端web页面,远端执行,结果回显到网页上。
需求
- 根据
用户id连上对应的远端机器 - 能在网页上输入命令并能看到输出结果
整条链路
初步理解的流程:
text
user input
│
▼
Xterm.js在网页上实现的终端画布
│
│ 命令通过传输通道
│
▼
远端机器上的 PTY
│
▼
Shell 收到输入,执行命令
│
│ 输出再通过流式通道传回,保证顺序
│
▼
xterm.write 渲染页面
知识补充
PTY:
PTY 全称 Pseudo-Terminal,中文叫伪终端。它是假的,用软件模拟出来的终端设备。
为什么需要它?因为 bash、vim 这些程序天生就认为自己在跟一个真实终端交互,它们不认识 WebSocket、不认识 WebRTC,只认识终端设备。PTY 的作用就是欺骗 bash,让它以为自己连着真实硬件,实际上我们在背后偷偷转发字节流。
PTY 是一对虚拟设备,包括:
- Master 端:我们的程序连这边,负责收发数据
- Slave 端:bash 连这边,以为自己在用真终端
一点感想
-
开始以为难点在连接时的认证,然后发现这块已经被同事初步完成了,我只需要注册命令,就可以直接通过前端连接。真正费劲的是理解整条链路,目前只是初步理解了数据流。
-
WebRTC 的选择值得深思。目前只知道DataChannel 的延迟比 WebSocket 低
参考