VNC Server + noVNC实现web远程控制桌面

VNC Server

• tightVNC

  下载地址：https://www.tightvnc.com/download.php

• tigerVNC

  官方地址：https://tigervnc.org/
  下载地址：https://sourceforge.net/projects/tigervnc/files/stable/

• UltraVNC

  官方地址：https://uvnc.com/downloads/ultravnc.html
  下载地址：https://mksoftcdnhp.yesky.com/64e0687c/304ab21d4260eeb860061b18b88b45a2/uploadsoft/UltraVNC_1.4.3.1_X64_Setup.exe

• libVNCServer

  GIT地址：https://github.com/LibVNC/libvncserver
  文档：https://libvnc.github.io/doc/html/libvncserver_doc.html
  示例：https://blog.csdn.net/yang1fei2/article/details/132371918

noVNC

下载地址：https://github.com/novnc/noVNC

noVNC提供一种在网页上通过html5的Canvas，访问机器上vncserver提供的vnc服务，需要做tcp到websocket的转化，才能在html5中显示出来。
WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。

websockify

noVNC是通过websockt建立链接，而VNC Server不支持websocket，所以需要开启websockify代理来做 WebSockets 和 TCP sockets 之间的转换。

本机部署 VNCServer + noVNC

方案一

1. 下载并安装tightVNC，安装完成后启动服务
2. 下载并安装node.js，一定记得勾选npm package manager，下载地址：https://nodejs.org/zh-cn/download/
3. node.js安装完成后，需要安装ws、optimist模块（websockify依赖）

   cd C:\Users\Administrator\noVNC
   npm install ws
   npm install optimist
   npm install mime-types
   

   安装完成后会在C:\Users\Administrator\noVNC目录下生成node_modules。
4. 安装websockify（有python和js两个版本，以下是websockify-js的两种部署方式）

• 方式一
  1. 在node_modules目录中执行npm命令：npm i @maximegris/node-websockify
  2. 在node_modules目录下创建config.js 文件内容为：

     var websockify = require('@maximegris/node-websockify');
     //192.168.1.180 为VNC server主机的IP
     websockify({
     source: '192.168.1.180:6080',//websocket Server 的服务地址和端口，端口号为6080
     target: '192.168.1.180:5900',//VNC Server 的服务地址和端口，端口号为 5900
     });
     

  3. 执行命令启用服务：node config.js
  4. 下载并解压Nginx：https://nginx.org/en/download.html

     Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器，并在一个BSD-like 协议下发行。其特点是占有内存少，并发能力强，事实上nginx的并发能力确实在同类型的网页服务器中表现较好。

  5. 使用Nginx代理noVNC:

     1）把noVNC服务部署到Nginx：把noVNC解压放在“nginx/html”目录下；
     2）修改“nginx/conf/nginx.conf”配置：
     

     #在http中添加一个server节点
     server {
     listen 6080;
     server_name localhost;
     location / {
     root html/noVNC;
     index vnc.html;
     }
     }

     3）启动nginx服务
     

  6. 浏览器访问：localhost:6080
     测试结果：noVNC提示无法连接服务器
• 方式二
  1. 下载noVNC：https://github.com/novnc/noVNC
     下载websockify-js：https://github.com/novnc/websockify-js.git
  2. 将noVNC和websockify-js都解压到C:\Users\Administrator\noVNC目录下

     node_modules
     noVNC
     websockify-js
     package.json
     package-lock.json
     

  3. 在websockify-js\websockify目录下执行websockify.js：

     node websockify.js --web C:\Users\Administrator\noVNC\noVNC 6080 localhost:5900
     

  4. 浏览器访问：localhost:6080/vnc.html
  5. 打开noVNC目录，将vnc.html重命名为index.html，即可使用localhost:6080访问。
     测试结果：可用

方案二

1. 下载并安装python（python-3.8.10及以上）
2. 下载并解压noVNC 和 websockify
3. cd到websockify根目录，执行：

   python setup.py install
   

   注意：若提示权限不够，则使用管理员身份执行。
4. 开启websockify

   websockify.exe 6080 127.0.0.1:5900 --web C:\Users\Administrator\noVNC\noVNC
   
   #会有如下输出：
   WARNING: no 'resource' module, daemonizing is disabled
   WebSocket server settings:
   - Listen on :6080
   - Web server. Web root: C:\Users\Administrator\Desktop\noVNC\noVNC-1.3.0
   - No SSL/TLS support (no cert file)
   - proxying from :6080 to 127.0.0.1:5900
   
   第一个参数 6080 表示websockify 自身监听的端口，即自身作为min web server向浏览器提供服务的端口  
   第二个参数 127.0.0.1:5900 表示UltraVNC监听的端口  
   第三个参数 --web C:\xxxx\noVNC\noVNC-1.3.0 表示min web server（websockify）的网站服务的根目录，即为noVNC-1.3.0的根目录，且该目录下vnc.html文件为主页文件
   

5. 访问：http://localhost:6080/vnc.html
6. 可以将noVNC目录下的vnc.html更名为index.html，修改后可以直接访问：http://localhost:6080
   测试结果：可用

参考资料

• noVNC+tightVNC：https://www.cnblogs.com/connect/p/nginx-proxy-websocket.html
• noVNC+ultraVNC：https://zhuanlan.zhihu.com/p/427144657
• Centos/Windows：https://blog.csdn.net/qq_37242520/article/details/103688221
• 其他：https://blog.csdn.net/weixin_58448088/article/details/129834143
• VNC协议：https://blog.csdn.net/sui1005316018/article/details/89134066
• LibVNCServer: https://blog.csdn.net/yang1fei2/article/details/132371918