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

最新推荐文章于 2025-06-03 09:04:52 发布

CCFNBQ

最新推荐文章于 2025-06-03 09:04:52 发布

阅读量1.9k

点赞数 1

CC 4.0 BY-SA版权

文章标签： c++ c语言远程工作

本文链接：https://blog.youkuaiyun.com/CCFNBQ/article/details/132644135

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.youkuaiyun.com/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

方案一

下载并安装tightVNC，安装完成后启动服务
下载并安装node.js，一定记得勾选npm package manager，下载地址：https://nodejs.org/zh-cn/download/
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。
安装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访问。
  测试结果：可用

方案二

下载并安装python（python-3.8.10及以上）
下载并解压noVNC 和 websockify
cd到websockify根目录，执行：
```
python setup.py install
```
注意：若提示权限不够，则使用管理员身份执行。

开启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文件为主页文件

访问：http://localhost:6080/vnc.html
可以将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.youkuaiyun.com/qq_37242520/article/details/103688221
其他：https://blog.youkuaiyun.com/weixin_58448088/article/details/129834143
VNC协议：https://blog.youkuaiyun.com/sui1005316018/article/details/89134066
LibVNCServer: https://blog.youkuaiyun.com/yang1fei2/article/details/132371918