So spiegeln Sie den NoVNC-Remotedesktop im Vue-Projekt wider

Dieses Mal zeige ich Ihnen, wie Sie den NoVNC-Remote-Desktop im Vue-Projekt zuordnen sehen.

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 für die Konvertierung zwischen WebSockets und TCP-Sockets aktiviert werden. 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 dies tun Verwenden Sie npm. Die Installation von Abhängigkeiten ist bequemer.

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

npm install @novnc/novnc

Das Folgende ist der detaillierte Codeteil

HTML

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

Skript

Da die erste Importmethode verwendet wird, 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.

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'

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

Zuerst wird eine Methode im Methoden

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

Lebenszyklus

definiert und initialisierungsbezogene Vorgänge werden darin geschrieben. 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 nach erfolgreicher Verbindung

Sie können danach einige Parameterinformationen festlegen die Verbindung ist erfolgreich oder Bildschirmgröße usw.

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

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

Ein einfacher Remote-Desktop kann bedient werden. Wenn Sie weitere Parameter oder Anforderungen haben, besuchen Sie bitte die offizielle Website

Klicken Sie hier, um den Link zu öffnen

. Oder kontaktieren Sie mich, um zu besprechen Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So erstellen Sie ein dynamisches 3D-Diagramm mit Canvas

H5-Mobilseitenskalierung

Das obige ist der detaillierte Inhalt vonSo spiegeln Sie den NoVNC-Remotedesktop im Vue-Projekt wider. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!