深度解析noVNC proxy

背景

因为最近需要用到vncproxy ，vncproxy的原理就是使用网页版前端连接wss到后端，后端将wss转发到vnc的tcp端口，然后vnc返回tcp的rfb协议的数据，然后后端将rfb数据通过wss发送到前端

github 地址

https://github.com/novnc/noVNC/releases
一定要下载完整版本，否者访问vnc.html可能会出现

启动方式

✅ 场景一：用 noVNC 自带的代理调试（推荐初学者）

./utils/novnc_proxy --vnc localhost:5901 --listen 6080

打开：http://localhost:6080/vnc.html

自动转发 WebSocket 到 localhost:5901

✅ 场景二：你已有 WebSocket 后端（比如 FastAPI）
如果你用 FastAPI 转发 Proxmox 的 RFB 数据，那么你应该直接打开你的页面：

http://yourdomain.com/vnc.html?host=yourdomain.com&port=8000&path=ws/console

然后在前端用 JS 连接：

const rfb = new RFB(document.getElementById('screen'), 'wss://yourdomain.com/ws/console');

注意：vnc.html 是静态 HTML 页面，默认路径会去 /websockify，你需要自己改页面或者传入 path 参数。、

实例fastapi后端

只需要挂载托管路径就可以

from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles
app = FastAPI()
app.mount("/static", StaticFiles(directory="path_to_novnc"), name="static")

当然可以！下面是对 FastAPI 中 app.mount(...) 方法的详细介绍：

---

🔧 app.mount(path, app, name=None)

✅ 功能：

将一个 子应用（如静态文件、子 FastAPI 应用等）挂载到主应用下的某个路径。

常用于：

• 挂载 静态文件目录（如前端页面、JS、CSS）
• 挂载 子 FastAPI 应用
• 组织大型项目的子模块

---

📘 参数说明：

参数名	类型	说明
path	str	子应用挂载到主应用的哪个路径，比如 "/static" 或 "/api/v1"
app	ASGI app	要挂载的应用对象，通常是 StaticFiles(...) 或另一个 FastAPI() 实例
name	str（可选）	给这个子应用起个名字，主要用于路由反查（reverse routing）

---

🧱 示例 1：挂载静态文件目录

from fastapi.staticfiles import StaticFiles
from fastapi import FastAPI

app = FastAPI()

# 将本地目录 "./static" 挂载到 URL 路径 "/static"
app.mount("/static", StaticFiles(directory="static"), name="static")

然后用户可以访问：

http://your_host/static/index.html
http://your_host/static/js/app.js

---

🧱 示例 2：挂载子 FastAPI 应用

from fastapi import FastAPI

main_app = FastAPI()
sub_app = FastAPI()

@sub_app.get("/hello")
def hello():
    return {"message": "Hello from sub app"}

main_app.mount("/sub", sub_app)

访问路径将是：

http://your_host/sub/hello

---

✅ 小贴士：

• app.mount 是“低层级 ASGI”操作，它完全接管该路径。
• 和 @app.get() 不同，mount() 不会合并路由，而是直接挂载完整的 ASGI 应用。
• 如果你需要提供 HTML 页面、前端构建文件（Vue/React 编译输出），这就是常用方式。

---

如果你是在托管 noVNC 页面的 vnc.html，就应该：

from fastapi.staticfiles import StaticFiles

app.mount("/static", StaticFiles(directory="/path/to/novnc"), name="novnc")

然后浏览器访问：

http://your_host/static/vnc.html