一：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(这个视情况而定！)
电脑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>
————————————————
原文链接：https://blog.csdn.net/lululuyang/article/details/122345529
