当前位置:首页 / 网页制作 / html5教程 / vue项目中映入noVNC远程桌面方法介绍
vue项目中映入noVNC远程桌面方法介绍
芯晴素材特效 分类:html5教程 发布日期:2018-04-15

这次给大家带来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的库。有两种引入方式,一是,直接下载源码到自己的项目中,此方式一些问题下面进行详细介绍;

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

二是,如果采用了webpack的方式,可以使用npm进行安装依赖,更方便。

1
npm install @novnc/novnc

下面是详细代码部分

HTML

1
2
3
4
5
6
7
<template>
 <p class="page-home" ref="canvas">
 <canvas id="noVNC_canvas" width="800" height="600">
 Canvas not supported.
 </canvas>
 </p>
</template>

Script

1
2
3
4
5
6
7
8
9
10
11
12
13
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,然后才能正确使用。在引入时可以稍微修改一下文件即可。文件中有相应的备注描述。

引入资源完成后接下来就是如何去使用了,其实并不复杂。话不多说,上码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 远程桌面连接成功后的回调函数
 _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);
  
 }

可以在连接成功后设置一些参数信息或者屏幕尺寸等。

做好以上操作之后,就可以在网页上看到一个远程桌面屏幕了哦。

一个简单的远程桌面,是可以操作的哦。有更多其他的参数或者要求的可以参考官网点击打开链接。或者联系我讨论哦

版权信息:本站所有资源仅供学习与参考,请勿用于商业用途,如有侵犯您的版权,请及时联系821794221#qq.com(#换@),我们将尽快处理。

您可能在找这些

  • 内容标签:

热门素材

jQuery+CSS实现图片感应鼠标高亮显示当

2013-01-18   浏览:8666

用层模拟可移动/可隐藏的小窗口

2013-01-09   浏览:8284

jQuery视差插件ImageScroll

2017-03-17   浏览:184

腾讯科技热点推荐图片展示效果

2017-03-12   浏览:473

固定在页面左侧的导航菜单

2013-01-06   浏览:9529

jQuery点击弹出确认或取消删除特效

2017-03-13   浏览:426

WIN 8效果左右全屏滚动幻灯片

2017-02-28   浏览:116

多彩背景色左右滑动导航

2017-02-26   浏览:220

Ajax选项卡、隔行换色、弹出遮罩层

2013-01-09   浏览:8397

一款简洁的TAB滑动门修改

2013-01-16   浏览:8426

HTML5 Canvas点击页面烟花绽放特效

2017-03-22   浏览:297

css3模拟雷达波向外散发动画效果

2017-03-09   浏览:465