search
HomeWeb Front-endH5 TutorialHow to reflect noVNC remote desktop in vue project

This time I will show you how to map noVNC remote desktop in the vue project. What are the precautions for mapping noVNC remote desktop in the vue project. The following is a practical case, let's take a look.

1. First, let’s briefly introduce the concept.

VNCServer is a service started on the server in order to satisfy distributed users sharing server resources. The corresponding client software includes the graphical client VNCViewer, while noVNC is HTML5 VNC client, which is implemented using HTML 5 WebSocket, Canvas and JavaScript.

noVNC is widely used in major cloud computing and virtual machine control panels. noVNC is implemented using WebSockets, but most current VNC servers do not support WebSockets, so noVNC cannot directly connect to the VNC server. Instead, a proxy needs to be enabled to convert between WebSockets and TCP sockets. This proxy is called websockify.

2. There is a requirement in the project. There are multiple function pages in the system, but the functions also include the original functions on the physical terminal device( Including the later virtual terminal client on the computer), which uses noVNC. The advantage is that you can embed other functional systems (or pages) into new projects, and you can also click to operate the above functions, etc., which can temporarily solve some problems.

3. Since the project framework is vue, the following are all front-end implementation parts

First, introduce the noVNC library. There are two ways to introduce it. One is to directly download the source code into your own project. Some problems with this method are introduced in detail below;

git clone git://github.com/novnc/noVNC

The second is, if you use webpack, you can use npm to install dependencies. ,more convenient.

npm install @novnc/novnc

The following is the detailed code part

HTML

<template> 
 <p> 
 <canvas> 
 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'

Since the first introduction method is adopted, the import method is used to introduce resources. It should be noted that when introducing certain files, the project is based on es6 syntax, so the way to introduce external js is slightly different. For example, when introducing the webutil.js file, you need to add export default before it can be used correctly. You can slightly modify the file when importing. There are corresponding notes and descriptions in the file.

After the resources are introduced, the next step is how to use them, which is actually not complicated. Not much to say, let’s get started.

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> // 目标</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);
 })
 },

First of all, a method is defined in methodslife cycle, and initialization-related operations are written in it. Then call this.connectVnc() in the mounted life cycle. It must be called within this life cycle, otherwise the DOM structure cannot be obtained if the canvas is not initialized.

A brief description is to instantiate an object, including some used methods or attributes, then call the connect method and pass in the host, port, password, and path parameters to establish a connection.

There are two methods, one is the callback_.onCompleteHandler after the connection is successful, and the other is the callback_disconnected after the connection is successful

// 远程桌面连接成功后的回调函数 
 _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); 
 
 }

You can set some parameter information or screen after the connection is successful. Dimensions etc.

After completing the above operations, you can see a remote desktop screen on the web page.

A simple remote desktop can be operated. If you have more other parameters or requirements, please refer to the official websiteClick to open the link. Or contact me for discussion

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How Canvas makes a 3D dynamic Chart

H5 mobile page zoom

The above is the detailed content of How to reflect noVNC remote desktop in vue project. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
远程桌面无法验证远程计算机的身份远程桌面无法验证远程计算机的身份Feb 29, 2024 pm 12:30 PM

Windows远程桌面服务允许用户远程访问计算机,对于需要远程工作的人来说非常便利。然而,当用户无法连接到远程计算机或远程桌面无法验证计算机身份时,会遇到问题。这可能是由网络连接问题或证书验证失败引起的。在这种情况下,用户可能需要检查网络连接、确保远程计算机是在线的,并尝试重新连接。另外,确保远程计算机的身份验证选项已正确配置也是解决问题的关键。通过仔细检查和调整设置,通常可以解决Windows远程桌面服务中出现的这类问题。由于存在时间或日期差异,远程桌面无法验证远程计算机的身份。请确保您的计算

如何让远程桌面连接显示对方的任务栏如何让远程桌面连接显示对方的任务栏Jan 03, 2024 pm 12:49 PM

远程桌面连接使用的用户非常多,很多用户在使用的时候都会遇到些小问题,比如没有显示对方的任务栏,其实很可能是对方的设置问题,下面就来看看解决方法吧。远程桌面连接怎么显示对方的任务栏:1、首先点击“设置”。2、然后再打开“个性化”。3、随后选择左侧的“任务栏”4、将图中隐藏任务栏选项关闭即可。

六款常用远程连接工具,你最中意哪一款?六款常用远程连接工具,你最中意哪一款?Feb 22, 2024 pm 06:28 PM

Xshell“Xshell”是一款功能强大的安全终端模拟软件,支持SSH1、SSH2协议以及Windows平台的TELNET协议。通过在Windows界面下使用Xshell,用户可以方便地访问远程服务器,实现远程控制终端的操作。此外,Xshell还提供了各种外观配色方案和样式选择,使用户能够根据个人喜好进行定制,提升使用体验。Xshell的特点和优势如下:会话管理:使用会话管理器和可继承的会话配置可以轻松创建、编辑和启动会话。综合支持:支持多种验证方法、协议或算法,能够处理各种情况。本地Shel

学习并使用远程连接命令的方法学习并使用远程连接命令的方法Jan 12, 2024 pm 07:57 PM

对于很多从事运维工作的工程师来说,windows远程连接是非常重要的,熟练的使用远程命令可以大大的提高工作效率,今天小编就来说说远程连接命令怎么使用。微软windows操作系统中是自带有远程连接功能的,您可以通过远程连接命令来连接远程计算机,很多朋友不知道远程连接命令怎么使用,下面就来看看小编是怎么操作的吧!远程连接命令怎么用1.按键盘上的windows+R组合键键,打开运行对话框,在运行框中输入远程连接命令mstsc并回车。远程连接图-12.接着会出现远程桌面连接对话框,输入计算机名称或IP地

贝锐向日葵远程系统遇到故障,官方急修中,称为“数据库异常”贝锐向日葵远程系统遇到故障,官方急修中,称为“数据库异常”Jan 26, 2024 pm 09:24 PM

本站1月26日消息,今天下午,本站小伙伴反馈向日葵远程突然无法连接,登录显示503服务器错误。本站查询贝锐向日葵官网发现,该公司已发布故障公告:由于数据库异常,导致部分用户出现设备列表加载异常,发起远程异常情况,工程师已在紧急修复中,请将设备保持在线状态,届时会自动恢复。贝锐向日葵是一款远程控制软件,广泛应用于IT运维和远程办公。据称,它连接的远控设备数量超过5亿,服务的企业客户数量超过70万。

Java远程代码执行漏洞的威胁Java远程代码执行漏洞的威胁Aug 08, 2023 pm 03:21 PM

Java远程代码执行漏洞的威胁Java是一门强大而广泛应用的编程语言,被众多企业和开发者用于构建安全和可靠的应用程序。然而,即使是Java也存在一些安全漏洞,其中之一就是远程代码执行漏洞。本文将介绍Java远程代码执行漏洞的威胁,并提供一个代码示例来说明。远程代码执行漏洞是指攻击者可以通过输入恶意代码,使目标应用程序执行该代码的漏洞。这种漏洞通常由于应用程序

深度探讨Linux远程管理协议:技术实践全面指南深度探讨Linux远程管理协议:技术实践全面指南Feb 24, 2024 pm 02:18 PM

《Linux远程管理协议全面解读:技术实践全攻略,需要具体代码示例》随着互联网的快速发展,远程管理服务器成为了一种高效管理服务器的方法,Linux系统下的远程管理协议更是备受关注。本文将全面解读Linux远程管理协议,提供详细的技术实践攻略,并附带具体的代码示例,帮助读者深入了解并实践远程管理服务器的方法。一、SSH协议SSH(SecureShell)是一

揭秘Linux远程管理协议:了解技术应用的方方面面揭秘Linux远程管理协议:了解技术应用的方方面面Feb 24, 2024 am 09:21 AM

Linux远程管理协议一直以来都是网络管理中的重要组成部分,它的应用范围广泛,涉及到服务器管理、远程维护、监控等多个方面。在Linux系统中,有很多种远程管理协议,其中比较常见的包括SSH、Telnet、VNC等。本文将围绕这些协议展开探讨,深入探秘Linux远程管理协议的技术应用,并提供具体的代码示例。1.SSH协议SSH(SecureShell)是一

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft