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

熱門文章

熱工具

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

SecLists
SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

EditPlus 中文破解版
體積小,語法高亮,不支援程式碼提示功能

SublimeText3 Linux新版
SublimeText3 Linux最新版

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