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 相关文章推荐
Jquery知识点二 jquery下对数组的操作
Jan 15 Javascript
面向对象的Javascript之二(接口实现介绍)
Jan 27 Javascript
js实现上传图片预览的方法
Feb 09 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
Oct 15 Javascript
EasyUI Combobox设置默认值 获取text的方法
Nov 28 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
Dec 07 Javascript
javascript实现二叉树遍历的代码
Jun 08 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
May 01 Javascript
JavaScript设计模式之职责链模式应用示例
Aug 07 Javascript
js 实现在2d平面上画8的方法
Oct 10 Javascript
富文本编辑器vue2-editor实现全屏功能
May 26 Javascript
vue-cli3 取消eslint校验代码的解决办法
Jan 16 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
建立动态的WML站点(三)
2006/10/09 PHP
浅析echo(),print(),print_r(),return之间的区别
2013/11/27 PHP
phpmyadmin打开很慢的解决方法
2014/04/21 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
最简单的jQuery程序 入门者学习
2009/07/09 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
2011/10/18 Javascript
js Function类型
2011/12/04 Javascript
如何在node的express中使用socket.io
2014/12/15 Javascript
jquery果冻抖动效果实现方法
2015/01/15 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
2015/05/11 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
2015/08/24 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
2016/01/28 Javascript
分享jQuery封装好的一些常用操作
2016/07/28 Javascript
JavaScript实现翻页功能(附效果图)
2017/02/16 Javascript
详解Angular 4 表单快速入门
2017/06/05 Javascript
Node.Js中实现端口重用原理详解
2018/05/03 Javascript
Koa 中的错误处理解析
2019/04/09 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
2019/09/03 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
2020/07/19 Javascript
[01:53]3.19 DOTA2发布会 现场精彩Coser表演
2014/03/25 DOTA
[58:46]OG vs NAVI 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python 2.7.x 和 3.x 版本的重要区别小结
2014/11/28 Python
go语言计算两个时间的时间差方法
2015/03/13 Python
Python字符串格式化输出方法分析
2016/04/13 Python
python实现外卖信息管理系统
2018/01/11 Python
解决python写入带有中文的字符到文件错误的问题
2019/01/31 Python
pandas删除指定行详解
2019/04/04 Python
Kangol帽子官网:坎戈尔袋鼠
2018/09/26 全球购物
彪马日本官网:PUMA日本
2019/01/31 全球购物
Glamest意大利:女性在线奢侈品零售店
2019/04/28 全球购物
迪卡侬印尼体育用品商店:Decathlon印尼
2020/03/11 全球购物
老师推荐信
2013/10/28 职场文书
给民警的表扬信
2014/01/08 职场文书
中国梦演讲稿教师篇
2014/04/23 职场文书
2015年教学工作总结
2015/04/02 职场文书