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 相关文章推荐
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
Jan 12 Javascript
jQuery中判断一个元素是否为另一个元素的子元素(或者其本身)
Mar 21 Javascript
固定表格行列(expression)在IE下适用
Jul 25 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
Apr 29 Javascript
正则表达式(语法篇推荐)
Jun 24 Javascript
AngularJS递归指令实现Tree View效果示例
Nov 07 Javascript
jquery 判断div show的状态实例
Dec 03 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
Mar 25 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
Jul 07 Javascript
微信小程序基于本地缓存实现点赞功能的方法
Dec 18 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
Dec 20 Javascript
在vue项目中使用md5加密的方法
Sep 14 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
信用卡效验程序
2006/10/09 PHP
解析PayPal支付接口的PHP开发方式
2010/11/28 PHP
PHP中让curl支持sock5的代码实例
2015/01/21 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
基于jquery的关于动态创建DOM元素的问题
2010/12/24 Javascript
批量修改标签css样式以input标签为例
2014/07/31 Javascript
在JavaScript中重写jQuery对象的方法实例教程
2014/08/25 Javascript
你有必要知道的25个JavaScript面试题
2015/12/29 Javascript
详解javascript的变量与标识符
2016/01/04 Javascript
JavaScript的设计模式经典之代理模式
2016/02/24 Javascript
jquery+ajax实现直接提交表单实例分析
2016/06/17 Javascript
jQuery根据name属性进行查找的用法分析
2016/06/23 Javascript
jQuery获取同级元素的简单代码
2016/07/09 Javascript
基于js对象,操作属性、方法详解
2016/08/11 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
2017/08/15 Javascript
JS中touchstart事件与click事件冲突的解决方法
2018/03/12 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
2018/04/27 Javascript
Javascript Promise用法详解
2018/05/10 Javascript
微信小程序中使用自定义图标(阿里icon)的方法
2018/08/20 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
2019/01/15 Javascript
Vue与React的区别和优势对比
2020/12/18 Vue.js
Node.js中的异步生成器与异步迭代详解
2021/01/31 Javascript
Python的ORM框架中SQLAlchemy库的查询操作的教程
2015/04/25 Python
python如何为被装饰的函数保留元数据
2018/03/21 Python
如何使用Flask-Migrate拓展数据库表结构
2019/07/24 Python
Python大数据之使用lxml库解析html网页文件示例
2019/11/16 Python
python读取xml文件方法解析
2020/08/04 Python
Python高阶函数与装饰器函数的深入讲解
2020/11/10 Python
温泉秘密:Onsen Secret
2020/07/06 全球购物
师范毕业生自我鉴定
2014/01/15 职场文书
《傅雷家书》教学反思
2014/04/20 职场文书
英语自我介绍演讲稿
2014/09/01 职场文书
反对四风问题自我剖析材料
2014/09/29 职场文书
拯救大兵瑞恩观后感
2015/06/09 职场文书
幼儿园安全教育随笔
2015/08/14 职场文书
如何用threejs实现实时多边形折射
2021/05/07 Javascript