vue项目中引入noVNC远程桌面的方法_novnc - CSDN文库

2星 46 浏览量更新于2023-03-16 1 收藏 108KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

vue项目中引入项目中引入noVNC远程桌面的方法远程桌面的方法

下面小编就为大家分享一篇vue项目中引入noVNC远程桌面的方法，具有很好的参考价值，希望对大家有所帮助。

一起跟随小编过来看看吧

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"));

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

weixin_38748580

粉丝: 6
资源: 941

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈