vue noVNC实现远程桌面连接

背景：

领导提出在vue前端打开远程桌面连接

即电脑A通过浏览器页面访问电脑B。

一：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之间的转换。

二：解决办法

1. 下载安装VNC Server ：https://blog.csdn.net/QFliangge/article/details/79058947
2. 下载安装node.js：https://nodejs.org/en/download/（用于执行Websockify.js。Websockify还有Python版本的，不过在Windows下不可以成功。）
3. 下载noVnc：https://github.com/novnc/noVNC
4. 下载websockify-js：https://github.com/novnc/websockify-js
5. 以上均安装完毕情况下：在常用路径新建一个文件夹，名称随意
6. 安装optimist，ws，mime-types三个模块，这都是websockify.js需要的模块。

   npm install optimist
   npm install ws
   npm install mime-types

   

    

    

   安装完以后三个模块后，文件夹里会多出一个node_modules文件夹。 

7. 将第3步下载好的noVnc-master.zip解压到node_modules文件夹下。

8.  将第4步下载好的websockify-js-master.zip加压到noVnc-master文件夹下。

9. 命令行切换到node_modules\noVNC-master\websockify-js-master\websockify目录，也就是带有websockify.js的文件夹下面。需要把websockify.js中的filename += ‘/index.html’改成filename += ‘/vnc.html’;

10. 执行以下命令

    node websockify.js --web D:\noVnc\node_modules\noVNC-master 6080 serverIP:serverPort

    解释：serverIP：VNC Server 服务端IP         serverPort：VNC Server 服务端 端口（默认5900）

11. 第1步到第10步均在电脑B操作

12. 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.sendCtrlAltDel

    this.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>