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

最新推荐文章于 2024-03-29 10:00:12 发布

尔特特特特

最新推荐文章于 2024-03-29 10:00:12 发布

阅读量1.4k

点赞数 10

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_47305973/article/details/136164661

版权

介绍

本文使用通过在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>