vue 浏览器打开远程桌面 novnc

一：noVnc是什么

noVNC是一个 HTML5 VNC 客户端，采用 HTML 5 WebSockets, Canvas 和 JavaScript 实现，noVNC 被普遍用在各大云计算、虚拟机控制面板中，比如 OpenStack Dashboard 和 OpenNebula Sunstone 都用的是 noVNC。
noVNC采用WebSockets实现，但是目前大多数VNC服务器都不支持 WebSockets，所以noVNC是不能直接连接 VNC 服务器的，需要一个代理来做WebSockets和TCP sockets 之间的转换。这个代理在noVNC的目录里，叫做websockify 。

目标：通过浏览器远程访问Windows桌面。

原理：浏览器不支持VNC，所以不能直接连接VNC，但是可以使用代理，使用noVNC通过WebSocket建立连接，而VNC Server不支持WebSocket，所以需要开启Websockify代理来做WebSocket和TCP Socket之间的转换。

二：解决办法

下载安装VNC Server ：https://blog.csdn.net/QFliangge/article/details/79058947
(这里可替换为更简单且免费的utraVNC:https://uvnc.com/downloads/ultravnc.html)
下载安装node.js：https://nodejs.org/en/download/（用于执行Websockify.js。Websockify还有Python版本的，不过在Windows下不可以成功。）
下载noVnc：https://github.com/novnc/noVNC
下载websockify-js：https://github.com/novnc/websockify-js
以上均安装完毕情况下：在常用路径新建一个文件夹，名称随意
安装optimist，ws，mime-types三个模块，这都是websockify.js需要的模块。

npm install optimist
npm install ws
npm install mime-types

安装完以后三个模块后，文件夹里会多出一个node_modules文件夹。

将第3步下载好的noVnc-master.zip解压到node_modules文件夹下。

将第4步下载好的websockify-js-master.zip加压到noVnc-master文件夹下。

命令行切换到node_modules\noVNC-master\websockify-js-master\websockify目录，也就是带有websockify.js的文件夹下面。需要把websockify.js中的filename += ‘/index.html’改成filename += ‘/vnc.html’;

执行以下命令

node websockify.js --web D:\noVnc\node_modules\noVNC-master 6080 serverIP:serverPort

解释：serverIP：VNC Server 服务端IP serverPort：VNC Server 服务端 端口（默认5900）

第1步到第10步均在电脑B操作(如使用utraVNC,到此即可万成server端)

VNC Server的security的encryption配置为prefer on(这个视情况而定！)

image.png

电脑A:
浏览器输入地址：（电脑B第10步的serverIP:6080/vnc.html），然后点击屏幕出现的链接按钮，输入电脑B的vnc server的远程验证密码即可
如果控制台出现unsupported security types见下图，就配置电脑B的第12步

image.png

VUE代码

npm install @novnc/novnc

 

 

————————————————
原文链接：https://blog.csdn.net/lululuyang/article/details/122345529