首頁 > web前端 > H5教程 > 主體

vue專案中如何映入noVNC遠端桌面

php中世界最好的语言
發布: 2018-03-27 14:54:06
原創
4583 人瀏覽過

這次帶給大家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> 
 <p class="page-home" ref="canvas"> 
 <canvas id="noVNC_canvas" width="800" height="600"> 
 Canvas not supported. 
 </canvas> 
 </p> 
</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); 
 
 }
登入後複製

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

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

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

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

Canvas如何做出3D動態的Chart圖表

H5手機端頁面縮放

以上是vue專案中如何映入noVNC遠端桌面的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!