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> <p class=page-home ref=canvas> <canvas id=noVNC_canvas width=800 height=600> Canvas not supported. </canvas> </p> </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); }
可以在连接成功后设置一些参数信息或者屏幕尺寸等。
做好以上操作之后,就可以在网页上看到一个远程桌面屏幕了哦。
一个简单的远程桌面,是可以操作的哦。有更多其他的参数或者要求的可以参考官网点击打开链接。或者联系我讨论哦
相信看了本文案例你已经掌握了方法,更多精彩请关注编程之家网其它相关文章!
推荐阅读:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。