這次帶給大家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> <canvas> 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> // 目标</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中文網其它相關文章!
推薦閱讀:
以上是vue專案中如何映入noVNC遠端桌面的詳細內容。更多資訊請關注PHP中文網其他相關文章!

H5與HTML5指的是同一個東西,即HTML5。 HTML5是HTML的第五個版本,帶來了語義化標籤、多媒體支持、畫布與圖形、離線存儲與本地存儲等新功能,提升了網頁的表現力和交互性。

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

H5開發需要掌握的工具和框架包括Vue.js、React和Webpack。 1.Vue.js適用於構建用戶界面,支持組件化開發。 2.React通過虛擬DOM優化頁面渲染,適合複雜應用。 3.Webpack用於模塊打包,優化資源加載。

HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee

H5通過語義化元素和ARIA屬性提升網頁的可訪問性和SEO效果。 1.使用、、等元素組織內容結構,提高SEO。 2.ARIA屬性如aria-label增強可訪問性,輔助技術用戶可順利使用網頁。

"h5"和"HTML5"在大多數情況下是相同的,但它們在某些特定場景下可能有不同的含義。 1."HTML5"是W3C定義的標準,包含新標籤和API。 2."h5"通常是HTML5的簡稱,但在移動開發中可能指基於HTML5的框架。理解這些區別有助於在項目中準確使用這些術語。

H5,即HTML5,是HTML的第五個版本,它為開發者提供了更強大的工具集,使得創建複雜的網頁應用變得更加簡單。 H5的核心功能包括:1)元素允許在網頁上繪製圖形和動畫;2)語義化標籤如、等,使網頁結構清晰,利於SEO優化;3)新API如GeolocationAPI,支持基於位置的服務;4)跨瀏覽器兼容性需要通過兼容性測試和Polyfill庫來確保。

如何創建 H5 鏈接?確定鏈接目標:獲取 H5 頁面或應用程序的 URL。創建 HTML 錨點:使用 <a> 標記創建錨點並指定鏈接目標URL。設置鏈接屬性(可選):根據需要設置 target、title 和 onclick 屬性。添加到網頁:將 HTML 錨點代碼添加到希望鏈接出現的網頁中。


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

WebStorm Mac版
好用的JavaScript開發工具

SublimeText3漢化版
中文版,非常好用

Dreamweaver Mac版
視覺化網頁開發工具

mPDF
mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

Atom編輯器mac版下載
最受歡迎的的開源編輯器