vue项目中引入noVNC远程桌面的方法


Posted in Javascript onMarch 05, 2018

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
 }
 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项目中引入noVNC远程桌面的方法

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

以上这篇vue项目中引入noVNC远程桌面的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
mysql输出数据赋给js变量报unterminated string literal错误原因
May 22 Javascript
javascript格式化指定日期对象的方法
Apr 21 Javascript
javascript解决IE6下hover问题的方法
Jul 28 Javascript
jQuery插件实现多级联动菜单效果
Dec 01 Javascript
AngularJS入门教程之AngularJS 模板
Aug 18 Javascript
js实现非常棒的弹出div
Oct 06 Javascript
jquery事件与绑定事件
Mar 16 Javascript
vue.js加载新的内容(实例代码)
Jun 01 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
Aug 12 Javascript
从零开始实现Vue简单的Toast插件
Dec 03 Javascript
为什么要使用Vuex的介绍
Jan 19 Javascript
vue 实现LED数字时钟效果(开箱即用)
Dec 08 Javascript
vue项目中使用ueditor的实例讲解
Mar 05 #Javascript
快速处理vue渲染前的显示问题
Mar 05 #Javascript
Node.js爬取豆瓣数据实例分析
Mar 05 #Javascript
基于Vue渲染与插件的加载顺序的问题详解
Mar 05 #Javascript
AjaxUpLoad.js实现文件上传
Mar 05 #Javascript
JsChart组件使用详解
Mar 04 #Javascript
ionic2中使用自动生成器的方法
Mar 04 #Javascript
You might like
动漫定律:眯眯眼都是怪物!这些角色狠话不多~
2020/03/03 日漫
带你了解PHP7 性能翻倍的关键
2015/11/19 PHP
PHP中PDO连接数据库中各种DNS设置方法小结
2016/05/13 PHP
CI框架常用经典操作类总结(路由,伪静态,分页,session,验证码等)
2016/11/21 PHP
Redis构建分布式锁
2017/03/28 PHP
PHP4和PHP5版本下解析XML文档的操作方法实例分析
2017/05/20 PHP
PHP实现微信退款的方法示例
2019/03/26 PHP
laravel请求参数校验方法
2019/10/10 PHP
jQuery 全选效果实现代码
2009/03/23 Javascript
JavaScript中Object和Function的关系小结
2009/09/26 Javascript
javascript小数计算出现近似值的解决办法
2010/02/06 Javascript
JS中数组Array的用法示例介绍
2014/02/20 Javascript
js实现遮罩层弹出框的方法
2015/01/15 Javascript
深入学习AngularJS中数据的双向绑定机制
2016/03/04 Javascript
js实现键盘自动打字效果
2016/12/23 Javascript
原生js FileReader对象实现图片上传本地预览效果
2020/03/27 Javascript
JScript实现表格的简单操作
2017/08/15 Javascript
微信小程序Page中data数据操作和函数调用方法
2019/05/08 Javascript
小程序云开发获取不到数据库记录的解决方法
2019/05/18 Javascript
[01:37]全新的一集《真视界》——TI7总决赛
2017/09/21 DOTA
基于python实现的抓取腾讯视频所有电影的爬虫
2016/04/22 Python
python3+PyQt5使用数据库窗口视图
2018/04/24 Python
selenium+python实现1688网站验证码图片的截取功能
2018/08/14 Python
python hough变换检测直线的实现方法
2019/07/12 Python
Python Celery多队列配置代码实例
2019/11/22 Python
tensorflow没有output结点,存储成pb文件的例子
2020/01/04 Python
Python内置异常类型全面汇总
2020/05/28 Python
快速解释如何使用pandas的inplace参数的使用
2020/07/23 Python
英国假睫毛购买网站:FalseEyelashes.co.uk
2018/05/23 全球购物
新加坡第一大健康与美容零售商:屈臣氏新加坡(Watsons Singapore)
2020/12/11 全球购物
高级护理实习生自荐信
2013/09/28 职场文书
材料化学应届生求职信
2013/10/09 职场文书
《小池塘》教学反思
2014/02/28 职场文书
竞选劳动委员演讲稿
2014/04/28 职场文书
房产协议书范本
2014/10/18 职场文书
世界气象日活动总结
2015/02/27 职场文书