通过在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 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中使用jointjs的方法
浅谈Vue下使用百度地图的简易方法
jQuery实现新闻播报滚动及淡入淡出效果示例
绛旓細鍦ㄦ彃浠跺競鍦虹洿鎺ュ鍏ワ細 https://ext.dcloud.net.cn/plugin?id=2046 娉細鎻掍欢甯傚満涓嶆敮鎸両E璺宠浆锛屽缓璁敤璋锋瓕娴忚鍣 濡傛灉鎮ㄧ殑椤圭洰鏄敱vue-cli鍒涢犵殑锛岃閫氳繃浠ヤ笅鍛戒护瀹夎瀵箂ass锛坰css锛夌殑鏀寔锛屽鏋滃凡瀹夎锛岃鐣ヨ繃銆3銆佸鐩稿叧鏂囦欢杩涜閰嶇疆 3.1銆佸湪main.js 鏂囦欢鍏ㄥ眬寮曞叆uView 3.2銆...
绛旓細鏍规嵁瀹樼綉鐨勬枃妗ｏ紝瑕佸湪涓涓猦tml鏂囦欢涓嬩娇鐢╨ayui閲岄潰鐨勭粍浠跺簱鍏跺疄寰堢畝鍗曪紝浣嗘槸鍦╲ue椤圭洰涓浣跨敤璇i搴撳嵈瀛樺湪鐫寰堝鍧戯紝涓嬮潰鎴戜滑灏辫缁嗚瑙ｄ竴涓嬪浣曞湪vue-cli鎼缓鐨勯」鐩笅浣跨敤layui1.绗竴涓潙锛歷ue椤圭洰涓娇鐢╪pm瀹夎寮曞叆鏃舵姤閿欙紙鐩墠骞舵病鏈夋壘鍒板紩鍏ョ殑鍚堥傜殑鏂瑰紡锛岀煡閬撶殑鍙互鐣欒█鎺㈣锛夊湪瀹樼綉涓垜浠彲浠ョ湅鍒颁粬...
绛旓細UMD鐗堟湰涓鑸厤鍚圲MD鐗堟湰鐨剉ue锛屽彲鐩存帴浣跨敤script鏍囩寮曞叆锛屽紩鍏ュ悗鑷姩鎶婃墍鏈夌粍浠舵敞鍐屼负Vue鍏ㄥ眬缁勪欢銆傝嫢瑕鍦╲ue椤圭洰涓浣跨敤UMD鐗堢殑datav锛屽彲浠ュ湪main.js涓紩鍏锛屽鍥俱
绛旓細涓鑸鍦╒ue椤圭洰涓鐨刴ain.js涓叏灞寮曞叆鎴戜滑鎵鎯宠鐨勮祫婧愶紝浣嗕笉鎯冲叏灞寮曞叆灏卞湪鍗曚釜闇瑕佺敤鍒扮殑.vue缁勪欢涓紩鍏銆俰s not defined 灏辨槸xxx 涓嶅瓨鍦ㄦ病鏈夊紩鐢ㄦ垚鍔熴
绛旓細鈶 vuex 鐨勫叧绯诲浘 鈶 寮濮嬩娇鐢紝鍦 mian.js 涓紝寮曞叆 vuex 鈶ｇ劧鍚庡憡鐭 vue 寮濮嬩娇鐢 vuex (Vue.use(Vuex)) 鍦 store.js 鏂囦欢涓紝寮曞叆 vuex 骞朵笖浣跨敤 vuex 锛岃繖閲屾敞鎰忔垜鐨勫彉閲忓悕鏄ぇ鍐 Vue 鍜 Vuex 鈶ゆ帴涓嬫潵锛屽湪main.js涓紩鍏store 鍒拌繖閲岀畻鏄紝浠ュ強瀹屾垚浜嗐傛垜浠啀閲嶆柊鐪嬩竴涓嬫鏃剁殑椤圭洰...
绛旓細閫氳繃灏嗛昏緫浠ｇ爜灏佽涓洪昏緫缁勫悎鍑芥暟锛屽彲浠ユ洿瀹规槗鍦扮鐞嗗拰娴嬭瘯浠ｇ爜锛屼娇浠ｇ爜鏇存槗浜庣悊瑙ｅ拰缁存姢銆2. 鏇村ソ鐨勬ц兘锛Vue3閫氳繃閲嶆柊璁捐铏氭嫙DOM绠楁硶鍜岀紪璇戝櫒锛屾樉钁楁彁楂樹簡鎬ц兘銆俈ue3鐨勮櫄鎷烡OM绠楁硶鏇撮珮鏁堬紝骞朵笖鍦ㄥぇ鍨嬪簲鐢ㄧ▼搴忎腑娓叉煋閫熷害鏇村揩銆3. 鏇村ソ鐨勫紑鍙戜綋楠岋細Vue3寮曞叆浜嗚澶氬紑鍙戜汉鍛樺弸濂界殑鍔熻兘锛屼緥濡傛洿濂界殑绫诲瀷...
绛旓細杩欐缁欏ぇ瀹跺甫鏉Vue缁勪欢寮鍙戞湁鍝簺鎶宸э紝Vue缁勪欢寮鍙戠殑娉ㄦ剰浜嬮」鏈夊摢浜涳紝涓嬮潰灏辨槸瀹炴垬妗堜緥锛屼竴璧锋潵鐪嬩竴涓嬨俈ue 鍗曟枃浠剁粍浠跺紑鍙戝綋浣跨敤vue-cli鍒濆鍖栦竴涓椤圭洰鐨勬椂鍊欙紝浼氬彂鐜皊rc/components鏂囦欢澶逛笅鏈変竴涓狧elloWorld.vue鏂囦欢锛岃繖渚挎槸鍗曟枃浠剁粍浠剁殑鍩烘湰寮鍙戞ā寮忋// 娉ㄥ唽Vue.component('my-component', { template...
绛旓細姝ゆ椂鍙互鍦ㄦ祻瑙堝櫒鍙互鐪嬪埌css鏄閫氳繃js鍔ㄦ佸垱寤烘爣绛炬潵鍐欏叆鐨 閰嶇疆鎻掍欢鍚庡湪package.json涓湁鏄剧ず閰嶇疆鍚庣殑extract-text-webpack-plugin鍛戒护琛 閰嶇疆濂芥彃浠跺悗涔熼渶瑕佷慨鏀箇ebpack.config.js閰嶇疆鏂囦欢涓轰互涓嬪唴瀹癸細鏈鍚庡湪index.html涓紩鍏main.css鏂囦欢锛.vue涓哄悗缂鐨勬枃浠朵腑鐨剆tyle鏍峰紡閮界粺涓鎵撳寘鍦╩ain.css鏂囦欢涓級闇瑕...
绛旓細涓銆佸畨瑁呮彃浠 cnpm install echarts -D 娉細echarts 涔熶笉鑳閫氳繃 Vue.use() 杩涜鍏ㄥ眬璋冪敤 鎵浠ワ紝閫氬父鍦ㄩ渶瑕佷娇鐢ㄥ浘琛ㄧ殑 .vue鏂囦欢涓洿鎺ュ紩鍏 import echarts from 'echarts'涔熷彲浠ュ湪main.js涓紩鍏锛岀劧鍚庝慨鏀瑰師鍨嬮摼 Vue.prototype.$echarts = echarts 杩欐牱鍦ㄥ叏灞...
绛旓細涓嬮潰灏卞厛璇翠笅濡備綍寮曞叆鍗曠嫭鐨勬牱寮忔枃浠讹紝杩欓噷灏变互CSS鏂囦欢涓轰緥锛屼箣鍚庡啀璇翠笅鎴戠殑椤圭洰涓鐨勬牱寮忔枃浠剁殑鍒掑垎寮曞叆鍗曠嫭鐨勬牱寮忔枃浠舵柟寮忎竴鍦╩ain.js涓紩鍏闈欐佽祫婧愶紝杩欑鏂规硶浣垮緱璇ユ牱寮忔枃浠惰椤圭洰涓殑缁勪欢鎵鍏变韩// The Vue build version to load with the `import` command// (runtime-only or standalone) has ...
