vue项目中引入noVNC远程桌面

注：看大家都在问按照以下方式会报错，原因是版本问题。看API文档新的版本，一些传参形式发生了变化，可能需要自己按照新版本的文档进行完成。如果不想改的话，我这里用的版本是0.6.1

1 首先，先简单介绍一下概念。

VNCServer 是一个为了满足分布式用户共享服务器资源，而在服务器开启的一项服务，对应的客户端软件有图形化客户端 VNCViewer，而 noVNC 则是 HTML5 VNC 客户端，它采用 HTML 5 WebSocket, Canvas 和 JavaScript 实现。

noVNC 被普遍用在各大云计算、虚拟机控制面板中。noVNC 采用 WebSockets 实现，但是当前大多 VNC 服务器不支持 WebSocket，所以 noVNC 不能直连 VNC 服务器，而是需要开启一个代理来做 WebSockets 和 TCP sockets 之间的转换。这个代理叫做 websockify。

2 项目中有这样一个需求，系统中有多个功能页，但是功能还包括原有的在物理终端设备上的功能（包括后来在电脑的虚拟终端客户端），这就用到了noVNC。好处是可以将其他功能系统（或称之为页面）嵌入新的项目中，还可以去点击操作上面的功能等，可以暂时解决一些问题。

3 由于项目框架是vue，所以以下均为前端实现部分

首先是先引入noVNC的库。有两种引入方式，一是，直接下载源码到自己的项目中，此方式一些问题下面进行详细介绍；

 

git clone git://github.com/novnc/noVNC

 

二是，如果采用了webpack的方式，可以使用npm进行安装依赖，更方便。

 

npm install @novnc/novnc

下面是详细代码部分

 

HTML

<template>
  <div class="page-home" ref="canvas">
    <canvas id="noVNC_canvas" width="800" height="600">
      Canvas not supported.
    </canvas>
  </div>
</template>

Script

import WebUtil from '../../noVNC/app/webutil.js'

import Base64 from '../../noVNC/core/base64.js'
import Websock from '../../noVNC/core/websock.js'
import '../../noVNC/core/des.js'
import '../../noVNC/core/input/keysymdef.js'
import '../../noVNC/core/input/xtscancodes.js'
import '../../noVNC/core/input/util.js'
import {Keyboard, Mouse} from '../../noVNC/core/input/devices.js'
import Display from '../../noVNC/core/display.js'
import '../../noVNC/core/inflator.js'
import RFB from '../../noVNC/core/rfb.js'
import '../../noVNC/core/input/keysym.js'

由于采用的是第一种引入方式，所以在资源引入上用了import的方式。需要注意的是在引入某些文件时，项目是基于es6的语法，所以引入外部js的方式略有差异。例如引入webutil.js文件，需要增加export default，然后才能正确使用。在引入时可以稍微修改一下文件即可。文件中有相应的备注描述。

 

引入资源完成后接下来就是如何去使用了，其实并不复杂。话不多说，上码。

connectVNC () {
        var
          DEFAULT_HOST = '',
          DEFAULT_PORT = '',
          DEFAULT_PASSWORD = "",
          DEFAULT_PATH = "websockify"
        ;
        var cRfb = null;
        var oTarget = document.getElementById("noVNC_canvas");

        let that = this

          WebUtil.init_logging(WebUtil.getConfigVar("logging", "warn"));

          var sHost = DEFAULT_HOST,
            nPort = DEFAULT_PORT,
            sPassword = DEFAULT_PASSWORD,
            sPath = DEFAULT_PATH
          ;

          cRfb = new RFB({
            "target": oTarget, // 目标
            "focusContainer": top.document,  // 鼠标焦点定位
            "encrypt": WebUtil.getConfigVar("encrypt", window.location.protocol === "https:"),
            "repeaterID": WebUtil.getConfigVar("repeaterID", ""),
            "true_color": WebUtil.getConfigVar("true_color", true),
            "local_cursor": WebUtil.getConfigVar("cursor", true),
            "shared": WebUtil.getConfigVar("shared", true),
            "view_only": WebUtil.getConfigVar("view_only", false),
            "onFBUComplete": that._onCompleteHandler,    // 回调函数
            "onDisconnected": that._disconnected  // 断开连接
          });
          // console.log('sHost:' + sHost + '--nPort:' + nPort)
          cRfb.connect(sHost, nPort, sPassword, sPath);
      },

首先是在methods生命周期中定义了一个方法，把初始化相关的操作写在里面。然后再mounted生命周期中去调用this.connectVnc()。一定要在这个生命周期内去调用，否则canvas未初始化是不能获取到dom结构的。

 

简单描述一下就是，实例化一个对象，包括一些用到的方法或者属性，然后调用connect方法，并传入host,port,password,path参数即可建立连接。

 

其中有两个方法，一个是链接成功后的回调_.onCompleteHandler，一个是断开连接的回调_disconnected

// 远程桌面连接成功后的回调函数
      _onCompleteHandler (rfb, fbu) {
        // 清除 onComplete 的回调。
        rfb.set_onFBUComplete(function () {
        });

        var oDisplay = rfb.get_display(),
          nWidth = oDisplay.get_width(),
          nHeight = oDisplay.get_height(),

          oView = oDisplay.get_target(),
          nViewWidth = oView.clientWidth,
          nViewHeight = oView.clientHeight
        ;

        // 设置当前与实际的比例。
        oDisplay.setScale(nWidth / nViewWidth, nHeight / nViewHeight);

      }

可以在连接成功后设置一些参数信息或者屏幕尺寸等。

做好以上操作之后，就可以在网页上看到一个远程桌面屏幕了哦。

一个简单的远程桌面，是可以操作的哦。有更多其他的参数或者要求的可以参考官网点击打开链接。或者联系我讨论哦