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
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, // 指标
"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);
}可以在连贯成功后设定一些参数信息或者屏幕尺寸等。
做好以上操纵之后，就可以在网页上看到一个长途桌面屏幕了哦。
H5手机端页面缩放
以上就是vue项目中怎样映入noVNC长途桌面的细致内容，更多请关注 百分百源码网 其它相干文章！
