Vue中引入noVNC实现远程桌面控制

介绍

本文使用通过在Vue中引入novnc实现Web远程控制桌面的功能，其中UltraVNC作为开源项目，因此不存在收费才能使用问题。

一、实现工具下载

1. UltraVNC：https://uvnc.com/downloads/ultravnc.html
   
   
2. Node.js：https://nodejs.org/download/release/v16.20.2/
   
3. noVnc、websockify-js等模块（已整理好，直接用即可）：https://pan.baidu.com/s/1BTcj10O7W0vBujEuz6vSLw
   提取码：xreu

二、实现远程控制桌面

1. 准备一台被控的Windows电脑，可以使用VMware中的虚拟机替代实现。
2. 将下载好的Node.js安装程序拖入被控电脑，双击启动安装，一直下一步即可。
3. 将下载好的UltraVNC安装程序拖入被控电脑，双击启动安装，选择安装目录后一直下一步即可。
   
4. 进入到安装好UltraVNC目录下，根据红框双击打开设置UltraVNC程序。
   
5. 显示设置程序后选择Security设置连接VNC的密码，两个红框都设置同一个密码即可，设置完成后点击确认进行保存即可。
   
6. 设置完成之后，启动UltraVNC
   
7. 启动完成后，可以在右下角菜单栏中看到UltraVNC已启动，然后右击出来菜单后点击红框进行按照启动程序。
   
8. 安装完成后如图所示
   
9. 将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文件夹的地址改为实际存放的地址保存即可，编辑完成后可以双击直接运行。

10. win+R，输入shell:startup，打开启动电脑时自启任务文件夹，将start_vnc.bat移入其中，之后就会跟着电脑自行启动。
    

11. 正常运行结果如下图所示：
    

12. 在主控电脑浏览器中，输入被控电脑的ip:9999，本文在.bat脚本中设定对外端口为9999。两台电脑需要是在同一网络环境下。
    

13. 点击连接，输入刚刚设定好的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>
 复制