web端实现远程桌面连接（noVnc）相关知识记录

本文链接：https://blog.youkuaiyun.com/qq_46311036/article/details/130740671

文章介绍了如何通过noVNC，一个HTML5的VNC客户端，结合WebSocket和Websockify代理来实现浏览器与不支持WebSocket的VNCServer之间的通信。noVNC将远程桌面图像编码成Web格式，通过WebSocket传输到浏览器，同时处理用户输入事件。Websockify则负责WebSocket到TCP的转换，使得VNCServer能正常工作。整个过程涉及到TCP、WebSocket协议以及加密和身份验证机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原理

浏览器不支持VNC，所以不能直接连接VNC，但是可以使用代理，使用noVNC（noVNC是一个 HTML5 VNC 客户端）通过WebSocket建立连接，而VNC Server不支持WebSocket，所以需要开启Websockify代理来做WebSocket和TCP Socket之间的转换。当浏览器访问时，会通过网络加载运行noVNC。

关于通信
VNC是基于TCP的通信，VNC server处理的始终是TCP的流，而浏览器和noVNC之间是在http基础上使用WebSocket交互，VNC server是无法处理WebSocket的流，所以引入了 websockify ，负责把WebSocket流转换为普通的TCP流，使VNC server正常工作。

传输原理
将远程计算机的桌面图像编码为Web图像格式，然后通过WebSockets或XHR（XMLHttpRequest）将图像数据传输到客户端浏览器。客户端浏览器将图像数据解码并显示在屏幕上，同时将用户的输入事件传输回远程计算机。noVNC支持多种加密和身份验证方法，以确保安全性。

执行命令

node D:\VNC\node_modules\websockify-js\websockify\websockify.js  --web// 执行websockify.js并且启动一个websocket服务器 
D:\VNC\node_modules\noVNC //找到对应入口文件，加载该目录下资源，运行noVNC
8000 // 启动服务端口为8000
localhost:5900 // 转发的VNC地址和端口

关键代码

websockify.js

fs.exists(filename, function(exists) {
        if(!exists) {
            return http_error(response, 404, "404 Not Found");
        }

        if (fs.statSync(filename).isDirectory()) {
            // filename += '/index.html';
            filename += '/vnc.html';
        }

        fs.readFile(filename, "binary", function(err, file) {
            if(err) {
                return http_error(response, 500, err);
            }

            var headers = {};
            var contentType = mime.contentType(path.extname(filename));
            if (contentType !== false) {
              headers['Content-Type'] = contentType;
            }

            response.writeHead(200, headers);
            response.write(file, "binary");
            response.end();
        });
    });
    读入入口文件，并且将文件以二进制形式写入服务

vnc.html

<div id="noVNC_container">
        <!-- Note that Google Chrome on Android doesn't respect any of these,
             html attributes which attempt to disable text suggestions on the
             on-screen keyboard. Let's hope Chrome implements the ime-mode
             style for example -->
        <textarea id="noVNC_keyboardinput" autocapitalize="off"
            autocomplete="off" spellcheck="false" tabindex="-1"></textarea>
    </div>