vue專案中引入noVNC遠端桌面
阿新 • • 發佈:2019-01-26
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的方式。需要注意的是在引入某些檔案時,專案是基於es6的語法,所以引入外部js的方式略有差異。例如引入webutil.js檔案,需要增加export default,然後才能正確使用。在引入時可以稍微修改一下檔案即可。檔案中有相應的備註描述。 引入資源完成後接下來就是如何去使用了,其實並不複雜。話不多說,上碼。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'
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);
}
可以在連線成功後設置一些引數資訊或者螢幕尺寸等。做好以上操作之後,就可以在網頁上看到一個遠端桌面螢幕了哦。 一個簡單的遠端桌面,是可以操作的哦。有更多其他的引數或者要求的可以參考官網點選開啟連結。或者聯絡我討論哦