vue專案中如何映入noVNC遠端桌面-H5教程-PHP中文網

這次帶給大家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

登入後複製

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, // 目标 "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); }

登入後複製

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

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