介绍
本文使用通过在Vue中引入novnc实现Web远程控制桌面的功能，其中UltraVNC作为开源项目，因此不存在收费才能使用问题。
一、实现工具下载
- UltraVNC：https://uvnc.com/downloads/ultravnc.html
- Node.js：https://nodejs.org/download/release/v16.20.2/
- noVnc、websockify-js等模块（已整理好，直接用即可）：https://pan.baidu.com/s/1BTcj10O7W0vBujEuz6vSLw
提取码：xreu
二、实现远程控制桌面
- 准备一台被控的Windows电脑，可以使用VMware中的虚拟机替代实现。
- 将下载好的Node.js安装程序拖入被控电脑，双击启动安装，一直下一步即可。
- 将下载好的UltraVNC安装程序拖入被控电脑，双击启动安装，选择安装目录后一直下一步即可。
- 进入到安装好UltraVNC目录下，根据红框双击打开设置UltraVNC程序。
- 显示设置程序后选择Security设置连接VNC的密码，两个红框都设置同一个密码即可，设置完成后点击确认进行保存即可。
- 设置完成之后，启动UltraVNC
- 启动完成后，可以在右下角菜单栏中看到UltraVNC已启动，然后右击出来菜单后点击红框进行按照启动程序。
- 安装完成后如图所示
- 将VNC文件夹拖入被控电脑，创建一个.bat脚本，用来开机自启被控程序。
@echo off
start /min node C:\Users\ybet\Desktop\VNC\node_modules\websockify-js\websockify\websockify.js --web C:\Users\ybet\Desktop\VNC\node_modules\noVNC 9999 localhost:5900
将VNC文件夹的地址改为实际存放的地址保存即可，编辑完成后可以双击直接运行。
-
win+R，输入shell:startup，打开启动电脑时自启任务文件夹，将start_vnc.bat移入其中，之后就会跟着电脑自行启动。
-
正常运行结果如下图所示：
-
在主控电脑浏览器中，输入被控电脑的ip:9999，本文在.bat脚本中设定对外端口为9999。两台电脑需要是在同一网络环境下。
-
点击连接，输入刚刚设定好的UltraVNC密码连接即可。
三、Vue中引入远程桌面控制
npm install @novnc/novnc
<template>
<div class="content" ref="canvas">
<div id="screen"></div>
</div>
</template>
<script>
import RFB from "@novnc/novnc/core/rfb";
export default {
name: "novnc",
data() {
return {
rfb: null,
isFullscreen: false,
wsURL: "ws://192.168.xx.xxx:9999/websockify",
// wsURL: "wss://xxx.xxx.xx/websockify", // https请求使用wss
password: "xxxxx",
};
},
mounted() {
this.sendCtrlAltDel();
this.connectVnc();
},
methods: {
sendCtrlAltDel() {
this.rfb.sendCtrlAltDel();
return false;
},
//连接
connectVnc() {
this.rfb = new RFB(document.getElementById("screen"), this.wsURL, {
// 传递参数，例如UltraVNC设置的密码
credentials: {
password: this.password,
},
});
this.rfb.addEventListener("connect", this.connectedToServer);
this.rfb.addEventListener("disconnect", this.disconnectedFromServer);
this.rfb.scaleViewport = true; // true为自适应大小，false当远程会话小于容器大小时居中
this.rfb.resizeSession = false;
},
connectedToServer(e) {
console.log("success", e);
},
disconnectedFromServer(e) {
// 根据情况重新连接或销毁
if (e.detail.clean) {
// 重新连接
// this.connectVnc()
// 销毁连接
// this.rfb && this.rfb._disconnect();
} else {
// 重新连接
// this.connectVnc()
// 销毁连接
// this.rfb && this.rfb._disconnect();
}
}
},
};
</script>
<style lang="scss" scoped>
.content {
width: 100%;
height: 800px;
display: flex;
flex-direction: row;
#screen {
overflow: hidden;
height: 800px;
width: 70%;
}
}
</style>
