vue項(xiàng)目中怎么映入noVNC遠(yuǎn)程桌面

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

創(chuàng)新互聯(lián)建站網(wǎng)站建設(shè)提供從項(xiàng)目策劃、軟件開(kāi)發(fā)，軟件安全維護(hù)、網(wǎng)站優(yōu)化(SEO)、網(wǎng)站分析、效果評(píng)估等整套的建站服務(wù)，主營(yíng)業(yè)務(wù)為網(wǎng)站建設(shè)、做網(wǎng)站，成都app軟件開(kāi)發(fā)以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專(zhuān)業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。創(chuàng)新互聯(lián)建站深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

1 、首先，先簡(jiǎn)單介紹一下概念。

VNCServer 是一個(gè)為了滿足分布式用戶共享服務(wù)器資源，而在服務(wù)器開(kāi)啟的一項(xiàng)服務(wù)，對(duì)應(yīng)的客戶端軟件有圖形化客戶端 VNCViewer，而 noVNC 則是 HTML5 VNC 客戶端，它采用 HTML 5 WebSocket, Canvas 和 JavaScript 實(shí)現(xiàn)。

noVNC 被普遍用在各大云計(jì)算、虛擬機(jī)控制面板中。noVNC 采用 WebSockets 實(shí)現(xiàn)，但是當(dāng)前大多 VNC 服務(wù)器不支持 WebSocket，所以 noVNC 不能直連 VNC 服務(wù)器，而是需要開(kāi)啟一個(gè)代理來(lái)做 WebSockets 和 TCP sockets 之間的轉(zhuǎn)換。這個(gè)代理叫做 websockify。

2 、項(xiàng)目中有這樣一個(gè)需求，系統(tǒng)中有多個(gè)功能頁(yè)，但是功能還包括原有的在物理終端設(shè)備上的功能（包括后來(lái)在電腦的虛擬終端客戶端），這就用到了noVNC。好處是可以將其他功能系統(tǒng)（或稱(chēng)之為頁(yè)面）嵌入新的項(xiàng)目中，還可以去點(diǎn)擊操作上面的功能等，可以暫時(shí)解決一些問(wèn)題。

3 、由于項(xiàng)目框架是vue，所以以下均為前端實(shí)現(xiàn)部分

首先是先引入noVNC的庫(kù)。有兩種引入方式，一是，直接下載源碼到自己的項(xiàng)目中，此方式一些問(wèn)題下面進(jìn)行詳細(xì)介紹；

git clone git://github.com/novnc/noVNC

二是，如果采用了webpack的方式，可以使用npm進(jìn)行安裝依賴(lài)，更方便。

npm install @novnc/novnc

下面是詳細(xì)代碼部分

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的方式。需要注意的是在引入某些文件時(shí)，項(xiàng)目是基于es6的語(yǔ)法，所以引入外部js的方式略有差異。例如引入webutil.js文件，需要增加export default，然后才能正確使用。在引入時(shí)可以稍微修改一下文件即可。文件中有相應(yīng)的備注描述。

引入資源完成后接下來(lái)就是如何去使用了，其實(shí)并不復(fù)雜。話不多說(shuō)，上碼。

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;"> // 目標(biāo)</span>
  "focusContainer": top.document, // 鼠標(biāo)焦點(diǎn)定位
  "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, // 回調(diào)函數(shù)
  "onDisconnected": that._disconnected // 斷開(kāi)連接
  });
  // console.log('sHost:' + sHost + '--nPort:' + nPort)
  cRfb.connect(sHost, nPort, sPassword, sPath);
 })
 },

首先是在methods生命周期中定義了一個(gè)方法，把初始化相關(guān)的操作寫(xiě)在里面。然后再mounted生命周期中去調(diào)用this.connectVnc()。一定要在這個(gè)生命周期內(nèi)去調(diào)用，否則canvas未初始化是不能獲取到dom結(jié)構(gòu)的。

簡(jiǎn)單描述一下就是，實(shí)例化一個(gè)對(duì)象，包括一些用到的方法或者屬性，然后調(diào)用connect方法，并傳入host,port,password,path參數(shù)即可建立連接。

其中有兩個(gè)方法，一個(gè)是鏈接成功后的回調(diào)_.onCompleteHandler，一個(gè)是斷開(kāi)連接的回調(diào)_disconnected

// 遠(yuǎn)程桌面連接成功后的回調(diào)函數(shù) 
 _onCompleteHandler (rfb, fbu) { 
 // 清除 onComplete 的回調(diào)。 
 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 
 ; 
 
 // 設(shè)置當(dāng)前與實(shí)際的比例。 
 oDisplay.setScale(nWidth / nViewWidth, nHeight / nViewHeight); 
 
 }

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

做好以上操作之后，就可以在網(wǎng)頁(yè)上看到一個(gè)遠(yuǎn)程桌面屏幕了哦。

一個(gè)簡(jiǎn)單的遠(yuǎn)程桌面，是可以操作的哦。有更多其他的參數(shù)或者要求的可以參考官網(wǎng)點(diǎn)擊打開(kāi)鏈接?；蛘呗?lián)系我討論哦

以上是vue項(xiàng)目中怎么映入noVNC遠(yuǎn)程桌面的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站欄目：vue項(xiàng)目中怎么映入noVNC遠(yuǎn)程桌面
URL分享：http://bm7419.com/article2/gegpic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開(kāi)發(fā)、網(wǎng)站內(nèi)鏈、網(wǎng)站設(shè)計(jì)公司、品牌網(wǎng)站制作、云服務(wù)器、微信公眾號(hào)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)