背景：
领导提出在vue前端打开远程桌面连接（咱也不知道为啥不用mstsc或者向日葵之类的）
即电脑A通过浏览器页面访问电脑B。
一：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下载安装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 optimistnpm install wsnpm install mime-types
安装完以后三个模块后，文件夹里会多出一个node_modules文件夹。
将第3步下载好的noVnc-master.zip解压到node_modules文件夹下。
将第4步下载好的websockify-js-master.zip加压到noVnc-master文件夹下。
命令行切换到node_modulesnoVNC-masterwebsockify-js-masterwebsockify目录，也就是带有websockify.js的文件夹下面。需要把websockify.js中的filename += ‘/index.html’改成filename += ‘/vnc.html’;
执行以下命令
node websockify.js --web D:noVncnode_modulesnoVNC-master 6080 serverIP:serverPort
解释：serverIP：VNC Server 服务端IP serverPort：VNC Server 服务端 端口（默认5900）
第1步到第10步均在电脑B操作
VNC Server的security的encryption配置为prefer on(这个视情况而定！)
电脑A:
浏览器输入地址：（电脑B第10步的serverIP:6080/vnc.html），然后点击屏幕出现的链接按钮，输入电脑B的vnc server的远程验证密码即可
如果控制台出现unsupported security types见下图，就配置电脑B的第12步
VUE代码 npm install @novnc/novnc
<template> <div class="page-home" ref="canvas"> <div id="top_bar"> <div id="status">Loading</div> <div id="sendCtrlAltDelButton">Send CtrlAltDel</div> </div> <div id="screen"> </div> </div></template><script>import RFB from '@novnc/novnc/core/rfb'export default { name: 'novnc', data() { return { rfb: null, desktopName: '', isFullscreen: false, } }, mounted() { document.getElementById('sendCtrlAltDelButton').onclick = this.sendCtrlAltDel this.connectVnc() }, //销毁 断开连接 beforeDestroy() { this.rfb && this.rfb._disconnect() }, methods: { sendCtrlAltDel() { this.rfb.sendCtrlAltDel() return false }, //连接 connectVnc() { const PASSWORD = ''//VNC Server 密码 const url = 'ws://192.168.8.15:6080/websockify' this.rfb = new RFB(document.getElementById('screen'), url, { // 向vnc 传递的一些参数，比如说虚拟机的开机密码等 credentials: { password: PASSWORD }, }) this.rfb.addEventListener('connect', this.connectedToServer) this.rfb.addEventListener('disconnect', this.disconnectedFromServer) this.rfb.scaleViewport = false //scaleViewport指示是否应在本地扩展远程会话以使其适合其容器。禁用时，如果远程会话小于其容器，则它将居中，或者根据clipViewport它是否更大来处理。默认情况下禁用。 this.rfb.resizeSession = false //是一个boolean指示是否每当容器改变尺寸应被发送到调整远程会话的请求。默认情况下禁用 console.log(this.rfb) }, status(text) { document.getElementById('status').textContent = text }, connectedToServer(e) { this.status('Connected to ' + this.desktopName) console.log('success', e) }, disconnectedFromServer(e) { if (e.detail.clean) { this.status('Disconnected') console.log('clean', e.detail.clean) //根据 断开信息的msg.detail.clean 来判断是否可以重新连接 // this.connectVnc() } else { this.status('Something went wrong, connection is closed') console.log('链接失败,重新链接中-------' + this.wsURL) // this.connectVnc() } }, },}</script><style scoped>.page-home { width: 100%; height: 800px; margin: 0; background-color: dimgrey; display: flex; flex-direction: column;}#top_bar { background-color: #6e84a3; color: white; font: bold 12px Helvetica; padding: 6px 5px 4px 5px; border-bottom: 1px outset;}#status { text-align: center;}#sendCtrlAltDelButton { position: fixed; top: 0px; right: 0px; border: 1px outset; padding: 5px 5px 4px 5px; cursor: pointer;}#screen { flex: 1; /* fill remaining space */ overflow: hidden;}</style>