How 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 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'

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

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!