关于通过web页⾯实现类似SSH客户端⼯具的技术⽅案
前⾔
前端⼀段时间被"容器云"团队抓了"壮丁"，去⽀援了⼀段时间，恰好有⼀个需求是通过web页⾯实现链接容器的命令⾏⼯具。这⾥分享⼀下相关的实现⽅案。有兴趣的可以了解⼀下。
可以参考的三种⽅案：
1. noVNC+vncserver
2. Xtermjs+SSH2+nodejs
3. nodejs+tty.js
前⾯提到容器，了解的朋友请忽略，不了解的朋友就把它当做⼀台虚拟服务器把，虽然他不是。下⾯的案例也是通过web页⾯实现和服务器的连接，并不是和容器的连接，但是原理是⼀样的。
优缺点分析：
1. noVNC+vncserver⽅案相对来说后端服务实现较轻松，但前端界⾯国语简陋，需要弄清楚原来前端业
务的逻辑和代码结构，重够前
端。另⼀⽅⾯由于整个noVNC是开源的，安全以及后期维护问题需要进⾏相关评估和考量。
2. Xtermjs+SSH2+nodejs⽅案⽆论前端还是后端都需要重新开发，⼯作量会⽐较⼤。后期的维护性和扩展较容易。虽然Xtermjs和
SSH2都是第三⽅模块，但是他们都只是提供功能的简单封装，安全是可控的。
3. nodejs+tty.js 没跑起来，安装tty.js报错，⽹上说nodejs新版本已经不⽀持该模块的部分⽅法了。所以…
具体⽅案
⼀.noVNC+vncserver
先⾛⼀下程序百度科普⼀下什么是VNC技术，VNC（Virtual Network Computing）⽹络遥控技术是指由⼀部计算机（主控端）去控制另⼀部计算机（被控端），⽽且当主控端在控制端时，就如同⽤户亲⾃坐在被控端前操作⼀样，可以执⾏被控端的应⽤程序，及使⽤被控端的系统资源。
这种⽅案相对简单，我们⼤部分⼯作是集成，因为作者已经将前端，后端服务都写好了，我们只需要部署上去就能正常的运⾏起来。当然，只是运⾏起来，他运⾏起来是长这样的：
正常情况下这界⾯是不满⾜我们需要的，我们需要根据⾃⼰的交互稿去修改源⽂件的前端代码，当然后端也可能需要⼀定的定制，⽐如和数据库进⾏交互…。但是它不⽤服务端去解析命令输⼊和⽬标服务器的连接，这看起来前端的⼯作好像要⼤⼀点了。下⾯这张图是百度云的webSSH窗⼝ ，他就是基于noVNC实现的，在这个基础上做了⼀定的定制。
看起来好像有点简陋，但是⼈家是⼀个有内涵的。外观简洁，功能强⼤，在SSH客户端上能实现的他基本上都能实现，所以有时候我们还是不能只看颜值，内在美也不能忽略。
整个业务流程：
web后端是指什么
实现步骤：
1. 安装vncserver
2. 安装noVNC
3. 实现远程服务器连接的任意切换
4. 实现免密登录
vncserver安装
vncserver是部署在远程服务器上的服务，通过接收和处理noVNC传输过来的命令，然后实现对⽬标服务器的操作，然后再将操作结果和过程通过双⽅建⽴的tcp通道返回给noVNC，noVNC服务再通过websocket推送给前端页⾯，前端页⾯服务显⽰信息和收集下发命令。下⾯是⼀张草图，供参考。
⾸先需要操作的服务器上装上vncserver服务，他才是在宿主机上接受命令，然后向Linux操作系统下发命令的，⽽noVNC只是⼀个中间代理⼈的⾓⾊，这个后⾯安装noVNC再讲。
sudo apt-get install vnc4server
安装成功后执⾏vnc4server，启动服务
:~$ vncserver        //启动vncserver服务
You will require a password to access your desktops.
Password:
Verify:
xauth:  file /home/xy/.Xauthority does not exist
New 'tnode07:1 (nsr)' desktop is tnode07:1
Creating default startup script /home/xy/.vnc/xstartup
Starting applications specified in /home/xy/.vnc/xstartup
命令查看vncserver状态
ps axu|grep vnc4
安装好vncServer后，再来安装noVNC，因为我这⾥只有⼀台服务器，所以我server和client的服务是部署再⼀台机器上的，通常情况下这两个是部署在不同服务上的，这⾥提⼀下。
noVNC安装
noVNC提供浏览器访问的web服务，访问⽬标服务器vncserver提供的vnc服务
noVNC和vncserver建⽴TCP连接，浏览器端和noVNC服务之间通过websocket连接，前端通过Canvas录⼊和接收显⽰命令和信息。浏览器其实就相当于⼀个客户端，类似win下⾯的vncviewer。
git clone github/kanaka/noVNC
这⾥我建议在线通过git 将远程仓库克隆下来，因为再克隆的过程中还会下载websocket相关的包，如果通过离线的⽅式，这些包还需要⼿动去安装。
下载成功后执⾏启动服务命令
./noVNC/utils/.launch.sh --vnc localhost:5900
Warning: could not find self.pem
Starting webserver and WebSockets proxy on port 6080
WARNING: no 'numpy' module, HyBi protocol will be slower
WebSocket server settings:
- Listen on :6080
- Flash security policy server
- Web server. Web root: /home/xiaofei/work/noVNC
- No SSL/TLS support (no cert file)
- proxying from :6080 to 192.168.110.179:5901
因为我noVNC和vncServer是安装⼀台机器上的，所以就是是localhost，如果不是⼀台机器，就是vncServer所在服务器的地址。5900是vncServer开放的访问端⼝
这样就安装成功了，然后通过浏览器访问⼀下，看看是长什么样⼦。
点击链接，然后输⼊远程服务器的登陆密码
看起来确实有点抽象，⽐上⾯百度云那个看起来抽象多了，这⾥就是我们前端发挥作⽤的时候了，我
们可以将noVNC的前端源码按照我们的UI输出进⾏修改，达到我们想要的效果。
到这⼀步，基本功能就实现了。
实现切换到任意⼀台远程服务器
在做管理平台时，需求是需要通过noVNC提供的服务来访问任意我们有权访问的远程服务器，但是我们可以发现，前⾯我们在启动noVNC 的时候，我们是通过
./noVNC/utils/.launch.sh --vnc localhost:5900
的形式来启动的，这样是指定了远程服务的ip和端⼝，那么如何实现noVNC和远程服务器链接的任意切换呢？
答案就是通过配置⽂件来实现多台服务器的管理，然后通过在访问时带上为每台远程服务的唯⼀命名，来实现链接不同的远程服务。具体实现如下：
1. 在noVNC⽬录下创建vnc_tokens⽂件
vi ./noVNC/vnc_token
配置格式为hostName:ip:port,hostName，为远程服务器的名称，配置好后执⾏

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。