智宸墨语

简体中文

English

简体中文

English

外观

应用noVNC实现在浏览器远程服务器桌面

约 916 字大约 3 分钟

远程桌面noVNCVNCServer

2025-07-22

需求描述

有个单机图形化界面，需要在b/s系统中打开展示。

术语解释

VNC

​ VNC（Virtual Network Console，虚拟网络控制台）是一种流行的远程桌面访问协议，它允许用户通过网络连接到远程计算机的图形界面。VNC协议的实现通常包括两个主要组件：服务器端（Server）和客户端（Client）。 ​ VNC-Server部署在需要被远程访问的机器上。它负责捕获图形界面，处理输入事件，并将这些信息发送到VNC客户端。

​ VNC-Client运行在用户本地机器上。它负责显示远程桌面的图像，接收用户的输入，并将这些输入发送到VNC Server。

noVNC

​ noVNC是一种基于Web的VNC客户端，它利用HTML5的Canvas元素在网页上实现对VNC服务器的访问。与传统的VNC客户端不同，noVNC不需要安装任何额外的软件或插件，仅需通过浏览器即可实现远程桌面访问。

工作原理

​ 由于现代Web浏览器对直接访问TCP/IP服务有限制，因此noVNC通过将TCP协议转换为WebSocket协议，使得在浏览器中显示VNC服务成为可能（通过Websockify代理实现）。

工作流程

​ WebSocket代理：noVNC服务器充当WebSocket代理，接收来自Web客户端的WebSocket连接请求。 TCP到WebSocket的转换：代理服务器将WebSocket连接转换为TCP连接，进而连接到VNC服务器。 反向代理配置：在noVNC代理服务器上，需要为每个VNC服务配置反向代理，确保通过noVNC提供的WebSocket连接可以正确访问对应的VNC服务。 访问标识：noVNC为每个VNC服务提供一个唯一的标识，客户端通过这个标识连接到相应的VNC服务。

使用的软件包

UtralVNC

​ windows 环境下的 VNC Server，在需要访问的目标服务器上安装

Node.js

​ 用于执行Websockify.js 。

noVNC

​ 略

websockify-js

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

安装过程

下载、安装、配置 utralVNC

下载

https://uvnc.eu/download/1640/UltraVNC_1640_x64_Setup.exe

安装

双击UltraVNC_1640_x64_Setup.exe，下一步直至完成安装

配置

启动UltraVNC后，在右下角任务栏图标中找到，然后右键，install service， 然后点击 settings，在第一个选项卡 Security 中，配置 Authentication 中的 VNC Password， 本次设置为 123456Aa。

image-20250722095647546

创建文件夹 ，下载、安装Node.js 以及安装依赖

在 vue_project 中创建 vncs 文件夹

D:\LocalDEV\vue_project\vncs\

安装node.js （略） - 本地使用nvm 切换 node 16.x

在vncs文件夹下载依赖

node.js安装完成后，需要安装ws、optimist模块（执行websockify.js文件所需）

npm install ws
npm install optimist
npm install mime-types

下载noVNC、websockify-js 源码到 node_modules 文件夹

https://github.com/novnc/noVNC`
https://github.com/novnc/websockify-js.git

下载后可以对文件夹改名，如下：

image-20250722094459818

修改websockify.js 源码

..\websockify-js\websockify\websockify.js

image-20250722094641342

启动websockify.js

D:\LocalDEV\vue_project\vncs\node_modules\websockify-js\websockify>node websockify.js --web D:\LocalDEV\vue_project\vncs\node_modules\noVNC 10.83.32.253:8881 10.83.32.253:5900
WebSocket settings:
    - proxying from 10.83.32.253:8881 to 10.83.32.253:5900
    - Web server active. Serving: D:\LocalDEV\vue_project\vncs\node_modules\noVNC
    - Running in unencrypted HTTP (ws://) mode

结果展示

使用其他电脑，访问 10.83.32.253:8881 ，即可打开浏览器版vnc 客户端， 点击连接，输入密码即可实现远程桌面操作。