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 相关文章推荐
基于jquery1.4.2的仿flash超炫焦点图播放效果
Apr 20 Javascript
javascript中的遍历for in 以及with的用法
Dec 22 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
Mar 04 Javascript
ES6新特性之Object的变化分析
Mar 31 Javascript
jQuery返回定位插件详解
May 15 jQuery
javascript定时器取消定时器及优化方法
Jul 08 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
Jul 23 Javascript
微信小程序使用swiper组件实现层叠轮播图
Nov 04 Javascript
js canvas实现画图、滤镜效果
Nov 27 Javascript
详解auto-vue-file:一个自动创建vue组件的包
Apr 26 Javascript
Vue.js计算机属性computed和methods方法详解
Oct 12 Javascript
Vue2.0 ES6语法降级ES5的操作
Oct 30 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
ThinkPHP模板判断输出Present标签用法详解
2014/06/30 PHP
PHP基本语法总结
2014/09/06 PHP
php程序员应具有的7种能力小结
2014/11/27 PHP
php多线程并发实现方法
2016/09/30 PHP
Laravel实现autoload方法详解
2017/05/07 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
jQuery+PHP实现图片上传并提交功能
2020/07/27 PHP
jscript之List Excel Color Values
2007/06/13 Javascript
js中的string.format函数代码
2020/08/11 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
2012/04/26 Javascript
js获取时间(本周、本季度、本月..)
2013/11/22 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
不定义JQuery插件 不要说会JQuery
2016/03/07 Javascript
AngularJS中实现动画效果的方法
2016/07/28 Javascript
清除输入框内的空格
2016/12/21 Javascript
js获取地址栏中传递的参数(两种方法)
2017/02/08 Javascript
微信小程序定义和调用全局变量globalData的实现
2019/11/01 Javascript
vue 动态生成拓扑图的示例
2021/01/03 Vue.js
python基于windows平台锁定键盘输入的方法
2015/03/05 Python
Python的dict字典结构操作方法学习笔记
2016/05/07 Python
Unicode和Python的中文处理
2017/03/19 Python
python通过Windows下远程控制Linux系统
2018/06/20 Python
python3中property使用方法详解
2019/04/23 Python
python实现扫雷游戏
2020/03/03 Python
给ubuntu18安装python3.7的详细教程
2020/06/08 Python
html5使用canvas实现跟随光标跳动的火焰效果
2014/01/07 HTML / CSS
AOP的定义以及作用
2013/09/08 面试题
线程同步的方法
2016/11/23 面试题
啤酒销售实习自我鉴定
2013/09/24 职场文书
美德好少年事迹材料
2014/01/19 职场文书
大学生两会学习心得体会
2014/03/10 职场文书
岗位廉政承诺书
2014/03/27 职场文书
企业与个人合作经营协议书
2014/11/01 职场文书
使用qt quick-ListView仿微信好友列表和聊天列表的示例代码
2021/06/13 Python
JS实现刷新网页后之前浏览位置保持不变示例详解
2022/08/14 Javascript