一：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 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操作
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.sendCtrlAltDelthis.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>

vue noVNC实现远程桌面连接相关推荐

外网远程桌面连接设置
外网远程桌面连接设置听语音浏览:14925 | 更新:2016-08-09 11:33 返回暂停重播播放 x <div class="jw-preview jw-reset& ...
MSLicensing中断远程桌面连接
--------------------------- 中断远程桌面连接 --------------------------- 客户端无法建立跟远程计算机的连接. 导致这个错误的可能的原因是: 1) ...
windows server 2008设置远程桌面连接最大数量
windows server 2008设置远程桌面连接最大数量系统默认远程桌面连接的数量为1 打开控制面板---管理工具---远程桌面服务---远程桌面会话主机设置---把"限制每个用户只 ...
详细故障排除步骤：针对 Azure 中到 Windows VM 的远程桌面连接问题
本文提供详细的故障排除步骤,用于为基于 Windows 的 Azure 虚拟机诊断和修复复杂的远程桌面错误. Important 若要消除更常见的远程桌面错误,请务必先阅读远程桌面的基本故障排除文章, ...
Windows远程桌面连接并传输文件
Windows远程桌面连接 IT管理员说他把设备配置好了,你可以使用了: 给你了如下信息: 用户名:admin123 密码: xxxxxxxxx IP:10.10.10.10 第一步:在win10搜索 ...
windows10 python调用wsl_(亲测!)Windows10用WSL安装Ubuntu远程桌面连接和配置开发环境...
Windows10使用默认的WSL安装Ubuntu并启用远程桌面连接一.启用WSL功能首先进入控制面板, 输入快捷键: windows键 + r 然后输入 control 然后选择程序–> ...
如何允许计算机远程桌面连接,远程桌面 - 允许访问你的电脑
远程桌面 - 允许访问你的电脑 06/05/2018 本文内容适用于:Windows 10.Windows 8.1.Windows Server 2019.Windows Server 2016.W ...
U盘安装win8教程（资源下载地址、远程桌面连接方法等）
1.制作U盘启动 PE工具下载地址:http://pan.baidu.com/s/1i3r9MrN 不会U盘启动制作看这里:http://jingyan.baidu.com/article/b ...
阿里云Windows服务器重启后无法远程桌面连接，大量注册表在检测
背景: 今天阿里金融云上有一台服务器不能远程桌面连接,现象:连接上去就会断开,从WEB控制台和远程桌面都是一样的现象. 我从WEB控制台上强制重启之后,通过VNC连接服务器看到大量类似注册表的扫描记 ...

vue noVNC实现远程桌面连接

一：noVnc是什么

二：解决办法

电脑A:

VUE代码

vue noVNC实现远程桌面连接相关推荐

最新文章

热门文章