The vue project introduces the method of noVNC remote desktop, and the vue project introduces novnc

The vue project introduces the method of noVNC remote desktop, and the vue project introduces novnc

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

VNCServer is a service enabled on the server to satisfy distributed users to share server resources. The corresponding client software has a graphical client VNCViewer, while noVNC is the HTML5 VNC client, it uses HTML 5 WebSocket, Canvas, and JavaScript.

NoVNC is widely used in various cloud computing and virtual machine control panels. NoVNC uses WebSockets. However, most VNC servers currently do not support WebSocket. Therefore, noVNC cannot directly connect to the VNC server. Instead, it needs to enable a proxy for conversion between WebSockets and TCP sockets. This proxy is called websockify.

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

3. Because the project framework is vue, the following are front-end implementations.

First, introduce the noVNC library. There are two ways to introduce it. One is to directly download the source code to your project. The following describes some problems in this method;

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

Second, if webpack is used, you can use npm to install dependencies, which is more convenient.

npm install @novnc/novnc 

Below is the detailed code section

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' 

Because the first import method is used, the import method is used for resource introduction. Note that the project is based on es6 syntax when some files are introduced, so the external js introduction method is slightly different. For example, to introduce the webutil. js file, you need to add export default before you can use it correctly. You can modify the file a little during import. The file has corresponding remarks.

After the introduction of resources, the next step is how to use them, which is not complicated. Let's not talk much about it. The above code.

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; "> // target </span>" focusContainer ": top.doc ument, // mouse focus positioning" 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, // callback function "onDisconnected": that. _ disconnected // disconnect}); // console. log ('shost: '+ sHost +' -- nPort: '+ nPort) cRfb. connect (sHost, nPort, sPassword, sPath );})},

First, define a method in the life cycle of methods and write initialization-related operations in it. Then, call this. connectVnc () in the mounted lifecycle (). It must be called within this lifecycle; otherwise, the dom structure cannot be obtained without canvas initialization.

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

There are two methods: callback _. onCompleteHandler after the connection is successful, and callback _ disconnected

// Callback function _ onCompleteHandler (rfb, fbu) {// clear the onComplete callback after the Remote Desktop Connection is successful. 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; // set the current and actual proportions. ODisplay. setScale (nWidth/nViewWidth, nHeight/nViewHeight );}

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

After completing the preceding operations, you can see a remote desktop screen on the webpage.

A simple Remote Desktop can be operated. For more parameters or requirements, refer to the official website.Click Open Link. Or contact me for a discussion.

The method used to introduce noVNC Remote Desktop in the above vue project is all the content shared with you by xiaobian. I hope you can give us a reference and support for the help house.