这次给大家带来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);
}
可以在连接成功后设置一些参数信息或者屏幕尺寸等。
做好以上操作之后，就可以在网页上看到一个远程桌面屏幕了哦。
一个简单的远程桌面，是可以操作的哦。有更多其他的参数或者要求的可以参考官网点击打开链接。或者联系我讨论哦
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
canvas如何做出3d动态的chart图表
h5手机端页面缩放
以上就是vue项目中如何映入novnc远程桌面的详细内容。