(vue)在windows下用noVNC实现浏览器网页访问vnc(安卓机droidVNC)

原创已于 2025-04-09 11:09:16 修改 · 1.2k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #windows #android #远程工作

于 2025-04-08 16:34:30 首次发布

最近提出了一个需求，让在windows网页上放个控制按钮，点击按钮实现对医院大屏的远程桌面控制，像向日葵那样。
这里分windows端和安卓大屏端（测试用安卓手机测试）

一、安卓机——被控制端

被控制端就比较简单，直接安装“droidVNC.apk”包即可。
打开后界面如图：（首次打开有个弹窗，记得点击ok进行启用，启用后显示图上绿色的“GRANTED”,未打开是红色的“DENIED”）
在这里插入图片描述

未打开访问权限时：
在这里插入图片描述
到这里就行了，先放一边。

Windows——控制端

首先打开我们已有的vue项目，
1、安装novnc包，https://github.com/novnc/noVNC
2、安装websockify，（npm install websockify 、pip install websockify、git clone https://github.com/novnc/websockify.git）
pip show websockify查看安装位置
3、启用websockify，（websockify 6080 ip:5900 --web D:\路径\noVNC）
4、页面代码

<div id="app">
   <h1>Vue novnc 远程桌面</h1>
   <div id="screen"></div>
 </div>
  
<script>
import RFB from "novnc/core/rfb";
export default {
  name: "App",
  components: {},
  data() {
    return {
      rfb: null,
    };
  },
  created() {},
  mounted() {
    this.connectVnc();
  },
  methods: {
    //连接
    connectVnc() {
      const PASSWORD = ""; //VNC Server 密码
      const url = "ws://localhost:6080";
      //"ws://192.168.1.114:5900/websockify"
      //"ws://192.168.1.114:5900"
      //"ws://localhost: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);
    },
    connectedToServer(e) {
      console.log("success", e);
    },
    disconnectedFromServer(e) {
      if (e.detail.clean) {
        console.log("clean", e.detail.clean);
        //根据 断开信息的msg.detail.clean 来判断是否可以重新连接
      } else {
        // this.status("Something went wrong, connection is closed");
        console.log("链接失败,重新链接中-------" + this.wsURL);
      }
    },
  },
};
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
#screen {
  flex: 1;
  overflow: hidden;
  /* width: 250px;
  height: 500px; */
}
</style>