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);
- }
可以在连接成功后设置一些参数信息或者屏幕尺寸等
做好以上操作之后, 就可以在网页上看到一个远程桌面屏幕了哦
一个简单的远程桌面, 是可以操作的哦有更多其他的参数或者要求的可以参考官网点击打开链接或者联系我讨论哦
来源: http://www.jb51.net/article/135880.htm