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>
<div class="page-home" ref="canvas">
<canvas id="noVNC_canvas" width="800" height="600">
Canvas not supported.
</canvas>
</div>
</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
}
评论0