免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

vue項目中怎么映入noVNC遠程桌面

小編給大家分享一下vue項目中怎么映入noVNC遠程桌面,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!

創新互聯建站網站建設提供從項目策劃、軟件開發,軟件安全維護、網站優化(SEO)、網站分析、效果評估等整套的建站服務,主營業務為網站建設、做網站,成都app軟件開發以傳統方式定制建設網站,并提供域名空間備案等一條龍服務,秉承以專業、用心的態度為用戶提供真誠的服務。創新互聯建站深信只要達到每一位用戶的要求,就會得到認可,從而選擇與我們長期合作。這樣,我們也可以走得更遠!

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); 
 
 }

可以在連接成功后設置一些參數信息或者屏幕尺寸等。

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

vue項目中怎么映入noVNC遠程桌面

一個簡單的遠程桌面,是可以操作的哦。有更多其他的參數或者要求的可以參考官網點擊打開鏈接。或者聯系我討論哦

以上是vue項目中怎么映入noVNC遠程桌面的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注創新互聯行業資訊頻道!

網站欄目:vue項目中怎么映入noVNC遠程桌面
URL分享:http://m.newbst.com/article2/gegpic.html

成都網站建設公司_創新互聯,為您提供定制開發網站內鏈網站設計公司品牌網站制作云服務器微信公眾號

廣告

聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯

成都網站建設