vue项目中引入noVNC远程桌面的方法

connectVNC () {
 var
  DEFAULT_HOST = '',
  DEFAULT_PORT = '',
  DEFAULT_PASSWORD = "",
  DEFAULT_PATH = "websockify"
 ;
 var cRfb = null;
 var oTarget = document.getElementById("noVNC_canvas");
 let that = this
 if (!this.currentEquipment) {
  return
 }
 let novncPort = this.currentEquipment.novncPort
 getNovncIp().then(function (resData) {
  WebUtil.init_logging(WebUtil.getConfigVar("logging", "warn"));
  var sHost = resData.data.content.ip || DEFAULT_HOST,
  nPort = novncPort || DEFAULT_PORT,
  sPassword = DEFAULT_PASSWORD,
  sPath = DEFAULT_PATH
  ;
  cRfb = new RFB({
  "target": oTarget,<span class="space" style="white-space:pre;display:inline-block;text-indent:2em;line-height:inherit;"> // 目标</span>
  "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); 
 } 

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

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