What are the steps to introduce noVNC remote desktop into the vue project?

Below I will share with you a method of introducing noVNC remote desktop into the vue project. It has a good reference value and I hope it will be helpful to everyone.

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

VNCServer is a service started on the server 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 Using webpack, you can use npm to install dependencies, which is 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'

Because the first There is an introduction method, so 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 introduction of resources is completed, the next step is how to use them. In fact, it is 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(&#39;sHost:&#39; + sHost + &#39;--nPort:&#39; + nPort)
  cRfb.connect(sHost, nPort, sPassword, sPath);
 })
 },

First, define a method in the methods life cycle and write the initialization-related operations 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 size after the connection is successful.

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to use jointjs in vue

A brief discussion on the simple method of using Baidu map under Vue

jQuery implementation of news report scrolling and fade-in and fade-out effects examples

The above is the detailed content of What are the steps to introduce noVNC remote desktop into the vue project?. For more information, please follow other related articles on the PHP Chinese website!