Was sind die Schritte, um den noVNC-Remotedesktop in das Vue-Projekt einzuführen?

Im Folgenden wird eine Methode zur Einführung des noVNC-Remotedesktops in das Vue-Projekt vorgestellt. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich ist.

1. Lassen Sie uns zunächst kurz das Konzept vorstellen.

VNCServer ist ein Dienst, der auf dem Server gestartet wird, um verteilten Benutzern gerecht zu werden, die Serverressourcen teilen. Die entsprechende Client-Software umfasst den grafischen Client VNCViewer, während noVNC ein HTML5-VNC-Client ist, der mithilfe von HTML implementiert wird 5 WebSocket, Canvas und JavaScript.

noVNC wird häufig in großen Cloud-Computing- und Virtual-Machine-Control-Panels verwendet. noVNC wird mithilfe von WebSockets implementiert, die meisten aktuellen VNC-Server unterstützen WebSockets jedoch nicht, sodass noVNC keine direkte Verbindung zum VNC-Server herstellen kann. Stattdessen muss ein Proxy aktiviert werden, um zwischen WebSockets und TCP-Sockets zu konvertieren. Dieser Proxy heißt websockify.

2. Es gibt eine solche Anforderung im Projekt. Es gibt mehrere Funktionsseiten im System, aber die Funktionen umfassen auch die Originalfunktionen auf dem physischen Endgerät (Einschließlich des späteren virtuellen Terminal-Clients auf dem Computer), der noVNC verwendet. Der Vorteil besteht darin, dass Sie andere Funktionssysteme (oder Seiten) in neue Projekte einbetten können und auch die oben genannten Funktionen usw. per Mausklick bedienen können, wodurch einige Probleme vorübergehend gelöst werden können.

3. Da das Projekt-Framework Vue ist, sind die folgenden Front-End-Implementierungsteile

Stellen Sie zunächst die noVNC-Bibliothek vor. Es gibt zwei Möglichkeiten, den Quellcode direkt in Ihr eigenes Projekt herunterzuladen.

Zweitens können Sie bei Verwendung von Webpack npm zum Installieren von Abhängigkeiten verwenden, was bequemer ist.

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

Das Folgende ist der detaillierte Codeteil

HTML

npm install @novnc/novnc

Skript

<template> 
 <p class="page-home" ref="canvas"> 
 <canvas id="noVNC_canvas" width="800" height="600"> 
 Canvas not supported. 
 </canvas> 
 </p> 
</template>

Da es das ist Zuerst gibt es eine Einführungsmethode, daher wird die Importmethode zum Einführen von Ressourcen verwendet. Es ist zu beachten, dass das Projekt bei der Einführung bestimmter Dateien auf der ES6-Syntax basiert, sodass die Art und Weise, externe JS einzuführen, etwas anders ist. Wenn Sie beispielsweise die Datei webutil.js einführen, müssen Sie den Exportstandard hinzufügen, bevor sie korrekt verwendet werden kann. Sie können die Datei beim Importieren leicht ändern. Entsprechende Hinweise und Beschreibungen finden Sie in der Datei.

Nachdem die Ressourcen importiert wurden, besteht der nächste Schritt darin, sie zu verwenden, was eigentlich nicht kompliziert ist. Es gibt nicht viel zu sagen, fangen wir an.

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'

Definieren Sie zunächst eine Methode im Methodenlebenszyklus und schreiben Sie die initialisierungsbezogenen Vorgänge darin. Rufen Sie dann this.connectVnc() im gemounteten Lebenszyklus auf. Es muss innerhalb dieses Lebenszyklus aufgerufen werden, andernfalls kann die DOM-Struktur nicht abgerufen werden, wenn die Leinwand nicht initialisiert ist.

Eine einfache Beschreibung besteht darin, ein Objekt einschließlich einiger verwendeter Methoden oder Attribute zu instanziieren, dann die Verbindungsmethode aufzurufen und die Parameter Host, Port, Passwort und Pfad zu übergeben, um eine Verbindung herzustellen.

Es gibt zwei Methoden: Eine ist callback_.onCompleteHandler nach erfolgreicher Verbindung und die andere ist callback_disconnected

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

Sie Nach erfolgreicher Verbindung können einige Parameterinformationen oder die Bildschirmgröße eingestellt werden.

Nach Abschluss der oben genannten Vorgänge können Sie auf der Webseite einen Remote-Desktop-Bildschirm sehen.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So verwenden Sie JointJS in Vue

Eine kurze Diskussion über die einfache Methode zur Verwendung der Baidu-Karte unter Vue

Beispiel für jQuery, das Scroll- und Fading-Effekte für Nachrichten implementiert

Das obige ist der detaillierte Inhalt vonWas sind die Schritte, um den noVNC-Remotedesktop in das Vue-Projekt einzuführen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!