当前位置：首页 > news >正文

node.js使用websockify代理VNC代理使用NoVNC进行远程桌面实现方案

news 2025/6/18 16:50:07

UltraVNC作为VNC服务器

下载UltraVNC

UltraVNC官网下载地址
在每个需要被远程的PC上安装UltraVNC软件并且开启5900端口

配置UltraVNC

打开winvnc.exe
在这里插入图片描述
初次打开需要手动在exe文件根目录新建配置文件ultravnc.ini，这样setting后可以保存配置

下面是一些简单配置

在这里插入图片描述

其他不用动

代理实现使用NoVNC进行远程桌面

使用node.js使用websockify代理PC的RFB 5900端口让前端可以使用WebSocket通讯进行远程桌面，并且使用NoVNC进行远程桌面

原理

在Node.js服务端的服务器上安装websockify，然后客户端请求远程时执行websockify命令随机分配端口继续代理PC的5900端口，客户端就可以使用这随机分配的端口进行WebSocket远程桌面（传入ip和随机分配的端口给到NoVNC的页面中即可访问）

安装 websockify

首先需要下载Python
Python下载地址windows
下载websockify

pip install websockify

独立版本的websockifyGitHub链接
下载后进入目录，运行：

npm install
npm link

然后你就可以用 websockify 命令了。

下载noVNC

noVNC github地址

需要将noVNC下载到vnc-proxy的public目录，到时候会用到vnc.html或者vnc_lite.html进行远程

核心代码

后端核心代码server.js

// server.js
const express = require('express')
const path = require('path')
const { spawn } = require('child_process')const app = express()
const HTTP_PORT = 3000
const WS_START_PORT = 6080const proxies = {}      // key = targetIP:port
let nextPort = WS_START_PORT// 映射noVnc静态资源到url
app.use('/', express.static(path.join(__dirname, 'public/novnc')))// 启动新代理
app.get('/api/start-proxy', (req, res) => {const { ip, vncPort } = req.queryif (!ip || !vncPort) return res.status(400).send('缺少参数 ip 或 vncPort')const target = `${ip}:${vncPort}`if (proxies[target]) return res.send(`代理已存在：ws://${req.hostname}:${proxies[target].wsPort} -> ${target}`)const wsPort = nextPort++// 使用websockify代理PC5900端口，后前端可以使用wsPort进行访问远程桌面const child = spawn('python', ['-m', 'websockify', '--web=./public/novnc', wsPort, target])child.on('exit', () => delete proxies[target])child.stdout.on('data', d => console.log(`[${target}] ${d}`))child.stderr.on('data', d => console.error(`[${target} ERROR] ${d}`))proxies[target] = { child, wsPort }res.send(`已启动：ws://${req.hostname}:${wsPort} -> ${target}`)
})// 停止指定代理
app.get('/api/stop-proxy', (req, res) => {const { ip, vncPort } = req.queryif (!ip || !vncPort) return res.status(400).send('缺少参数 ip 或 vncPort')const target = `${ip}:${vncPort}`const proxy = proxies[target]if (!proxy) return res.status(404).send('代理不存在')proxy.child.kill()delete proxies[target]res.send(`已停止代理：${target}`)
})// 查看当前代理状态
app.get('/api/list-proxy', (req, res) => {const list = Object.entries(proxies).map(([target, { wsPort }]) => ({target,wsPort,url: `ws://${req.hostname}:${wsPort}`}))res.json(list)
})app.listen(HTTP_PORT, () => {console.log(`服务运行：http://localhost:${HTTP_PORT}/vnc.html`)
})

项目使用命令

npm install express
node server.js

前端代码

doServer.vue组件
可以对后端进行请求实现:开启代理、停止代理、代理列表，然后通过代理列表点击进行远程桌面

<template><div><h2>VNC 多端代理</h2><div><input v-model="ip" placeholder="VNC 设备 IP"><input v-model="vncPort" placeholder="VNC 端口" type="number"><button @click="startProxy">启动代理</button></div><h3>当前代理列表</h3><button @click="refreshList">刷新</button><ul><li v-for="item in proxyList" :key="item.target"><span>{{ item.target }} → {{ item.url }}</span><button @click="openVnc(item.wsPort)">打开</button><button @click="stopProxy(item.target)">停止</button></li></ul><p style="color:red">{{ message }}</p></div>
</template><script>
import axios from 'axios'export default {data() {return {ip: '127.0.0.1',vncPort: 5900,proxyList: [],message: '',ServerIp: '192.168.1.24',ServerPort: '3000'}},mounted() {this.refreshList()},methods: {async startProxy() {try {const res = await axios.get(`/api/start-proxy?ip=${this.ip}&vncPort=${this.vncPort}`)this.message = res.datathis.refreshList()} catch (err) {this.message = '启动失败: ' + (err.response?.data || err.message)}},async stopProxy(target) {const [ip, vncPort] = target.split(':')try {const res = await axios.get(`/api/stop-proxy?ip=${ip}&vncPort=${vncPort}`)this.message = res.datathis.refreshList()} catch (err) {this.message = '停止失败: ' + (err.response?.data || err.message)}},async refreshList() {try {const res = await axios.get('/api/list-proxy')this.proxyList = res.data} catch (err) {this.message = '获取代理失败: ' + (err.response?.data || err.message)}},openVnc(wsPort) {// scale=true自适应屏幕// host port ws的ip和端口  这些参数可以去vnc_lite或者vnc.html代码查看window.open(`http://${this.ServerIp}:${this.ServerPort}/vnc_lite.html?host=${this.ServerIp}&port=${wsPort}&scale=true`, '_blank')}}
}
</script>