vue項目中引入noVNC遠端桌面的方法，vue項目引入novnc

vue項目中引入noVNC遠端桌面的方法，vue項目引入novnc

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 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);   } 

可以在串連成功後設定一些參數資訊或者螢幕尺寸等。

做好以上操作之後，就可以在網頁上看到一個遠端桌面螢幕了哦。

一個簡單的遠端桌面，是可以操作的哦。有更多其他的參數或者要求的可以參考官網點擊開啟連結。或者聯絡我討論哦

以上這篇vue項目中引入noVNC遠端桌面的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援幫客之家。