UltraVNC作為VNC服務(wù)器

下載UltraVNC

UltraVNC官網(wǎng)下載地址
在每個(gè)需要被遠(yuǎn)程的PC上安裝UltraVNC軟件并且開啟5900端口

配置UltraVNC

打開winvnc.exe

初次打開需要手動(dòng)在exe文件根目錄新建配置文件ultravnc.ini，這樣setting后可以保存配置

下面是一些簡單配置

其他不用動(dòng)

代理實(shí)現(xiàn)使用NoVNC進(jìn)行遠(yuǎn)程桌面

使用node.js使用websockify代理PC的RFB 5900端口讓前端可以使用WebSocket通訊進(jìn)行遠(yuǎn)程桌面，并且使用NoVNC進(jìn)行遠(yuǎn)程桌面

原理

在Node.js服務(wù)端的服務(wù)器上安裝websockify，然后客戶端請(qǐng)求遠(yuǎn)程時(shí)執(zhí)行websockify命令隨機(jī)分配端口繼續(xù)代理PC的5900端口，客戶端就可以使用這隨機(jī)分配的端口進(jìn)行WebSocket遠(yuǎn)程桌面（傳入ip和隨機(jī)分配的端口給到NoVNC的頁面中即可訪問）

安裝 websockify

1. 首先需要下載Python
   Python下載地址windows

2. 下載websockify

pip install websockify

獨(dú)立版本的websockifyGitHub鏈接
下載后進(jìn)入目錄，運(yùn)行：

npm install
npm link

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

下載noVNC

noVNC github地址

需要將noVNC下載到vnc-proxy的public目錄，到時(shí)候會(huì)用到vnc.html或者vnc_lite.html進(jìn)行遠(yuǎn)程

核心代碼

后端核心代碼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靜態(tài)資源到url
app.use('/', express.static(path.join(__dirname, 'public/novnc')))// 啟動(dòng)新代理
app.get('/api/start-proxy', (req, res) => {const { ip, vncPort } = req.queryif (!ip || !vncPort) return res.status(400).send('缺少參數(shù) 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進(jìn)行訪問遠(yuǎn)程桌面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(`已啟動(dòng)：ws://${req.hostname}:${wsPort} -> ${target}`)
})// 停止指定代理
app.get('/api/stop-proxy', (req, res) => {const { ip, vncPort } = req.queryif (!ip || !vncPort) return res.status(400).send('缺少參數(shù) 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}`)
})// 查看當(dāng)前代理狀態(tài)
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(`服務(wù)運(yùn)行：http://localhost:${HTTP_PORT}/vnc.html`)
})

項(xiàng)目使用命令

npm install express
node server.js

前端代碼

doServer.vue組件
可以對(duì)后端進(jìn)行請(qǐng)求實(shí)現(xiàn):開啟代理、停止代理、代理列表，然后通過代理列表點(diǎn)擊進(jìn)行遠(yuǎn)程桌面

<template><div><h2>VNC 多端代理</h2><div><input v-model="ip" placeholder="VNC 設(shè)備 IP"><input v-model="vncPort" placeholder="VNC 端口" type="number"><button @click="startProxy">啟動(dòng)代理</button></div><h3>當(dāng)前代理列表</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 = '啟動(dòng)失敗: ' + (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自適應(yīng)屏幕// host port ws的ip和端口  這些參數(shù)可以去vnc_lite或者vnc.html代碼查看window.open(`http://${this.ServerIp}:${this.ServerPort}/vnc_lite.html?host=${this.ServerIp}&port=${wsPort}&scale=true`, '_blank')}}
}
</script>

啟動(dòng)項(xiàng)目

npm install
npm run serve

效果