Was ist Apache Guacamole?
Apache Guacamole ist ein Open-Source-Framework, das von der Apache Foundation erstellt wurde und eine HTML5-Anwendung bereitstellt, die als Remote-Desktop-Gateway dient, um den Zugriff auf Remote-Desktops über die Protokolle RDP, SSH und VNC ohne die Verwendung anderer Drittanbieter-Software zu ermöglichen.
Die Guacamole-Lösung umfasst viele individuelle Komponenten, wie libguac, guacamole-common und guacamole-ext. Während diese Projekte über den Umfang dieses Artikels hinausgehen, werden wir uns auf guacamole-common-js innerhalb des Guacamole-Ökosystems konzentrieren.
Was ist guacamole-common-js?
Das Guacamole-Projekt bietet eine JavaScript-API zur Schnittstelle mit Komponenten, die den Guacamole-Spezifikationen entsprechen. Die guacamole-common-js-API bietet eine JavaScript-Implementierung eines Guacamole-Clients und Tunnelmechanismen zur Übertragung von Protokoll-Daten vom JavaScript zur Serverseite der Anwendung. Die Serverseite läuft typischerweise auf einem Rechner mit guacd oder dem Guacamole-Daemon. Die guacamole-common-js-Bibliothek bietet Maus- und Tastatur-Abstraktionsobjekte, um JavaScript-Maus- und Tastaturereignisse in Daten zu übersetzen, die Guacamole leicht verarbeiten kann.
Verwendung von guacamole-common-js zur Erstellung eines benutzerdefinierten Guacamole-Clients
Voraussetzungen: Installieren Sie guacamole-common-js über einen beliebigen Paketmanager Ihrer Wahl. In diesem Beispiel verwenden wir npm.
npm i guacamole-common-js
Schritt 1: Erstellen eines Guacamole-Tunnels
Ein Guacamole-Tunnel ermöglicht es Ihnen, Daten mühelos zwischen dem Server und Ihrem Client zu übertragen.
const Guacamole = require('guacamole-common-js')
let tunnel = new Guacamole.Tunnel("path/to/your/tunnel");
Sie können zusätzliche Parameter an Ihren Server über die Tunnel-URL mit Abfragemparametern übermitteln. Zum Beispiel kann Ihre Tunnel-URL wie folgt aussehen: path/to/your/tunnel?param1=value1¶m2=value2.
Șchritt 2: Verwenden Sie das Tunnel-Objekt, um einen Guacamole-Client zu erstellen
Sie können ein Guacamole-Client-Objekt erstellen, indem Sie das gerade erstellte Tunnel-Objekt dem Konstruktor Guacamole.Client übergeben.
let guacClient = new Guacamole.Client(tunnel)
Șchritt 3: Rufen Sie die Connect-Funktion auf, um die Verbindung herzustellen
Jetzt haben wir die Instanz von Guacamole Tunnel und die Instanz von Guacamole Client. Das sind alles, was wir benötigen, um eine Verbindung zu unserem remoten Rechner herzustellen.
guacClient.connect()
Nur eine Sache zum Vermerken: Das Guacamole.Tunnel-Objekt, das in den Konstruktor Guacamole.Client übergeben wird, darf nicht bereits verbunden sein. Das liegt daran, dass intern die Methode guacClient.connect() die Methode tunnel.connect() aufruft, und wenn der Tunnel bereits verbunden ist, wird dieser Vorgang fehlschlagen.
Nun werden die aufmerksamen unter Ihnen feststellen, dass Sie immer noch nicht die Inhalte Ihres remoten Rechners auf Ihrem Client sehen. Das liegt daran, dass uns immer noch ein entscheidender Schritt fehlt.
Șchritt 4: Holen Sie sich die Guacamole-Anzeige und verbinden Sie sie mit dem DOM
Sobald Sie die Verbindung hergestellt haben, indem Sie guacClient.connect() aufgerufen haben, können Sie die Anzeige des remoten Rechners anzeigen, indem Sie die Guacamole-Anzeige (ein HTMLDivElement) mit dem DOM verbinden. Lassen Sie uns sehen, wie wir das machen können.
Stellen Sie sich vor, Sie haben eine HTML-Seite, auf der Sie die Anzeige Ihres entfernten Rechners anzeigen möchten.
<html>
<body id="guacCanvas">
</body>
</html>
Als nächstes holen wir uns das HTMLDivElement, das dem Benutzer angezeigt werden muss, vom guacClient.
// Get the display element from the guacClient
let displayElement = guacClient.getDisplay().getElement();
// Get the element from the DOM and attach the displayElement to it
let guacCanvas = document.getElementById('guacCanvas');
// Attach the displayElement to the canvas
guacCanvas.appendChild(displayElement);
Und siehe da! Sie sehen jetzt den Inhalt Ihres entfernten Rechners in Ihrem DOM. Aber Moment, etwas ist nicht in Ordnung. Ihre Tastatureingaben tun nichts und auch Ihre Maus nicht. Wie gehen wir das an?
Șchritt 5: Konfiguration von Tastatur- und Mausereignissen
Um Tastatur- und Mausereignisse zu konfigurieren, müssen Sie die Eingabehandler einrichten, die von guacamole-common-js bereitgestellt werden.
Lassen Sie uns zuerst darauf schauen, wie wir Mausereignisse konfigurieren können.
let mouse = new Guacamole.Mouse(guacElement)
// Primarily you need to handle 3 events. onmousedown, onmouseup, onmousemove.
// The high level idea is to send the current state of the mouse to guacamole
// whenever the mouse moves, the mouse gets clicked or unclicked.
const sendMouseState = (mouseState) => {
guacClient.sendMouseState(mouseState);
}
// Essentially sending mouse state for all the individual events
mouse.onmousedown = mouse.onmouseup = mouse.onmousemove = sendMouseState;
Die Tastaturkonfiguration ist sogar einfacher, weil nur zwei Ereignisse konfiguriert werden müssen.
let keyboard = new Guacamole.Keyboard(guacElement);
// you need to pass in the HTMLElement here where you want the keyboard events to
// be passed into Guacamole. For example, if you pass in the document object instead
// of guacElement, you'll send all the events in the entire DOM to Guacamole, which may
// or may not be something you want. If you don't have any other UI elements in your
// DOM, you should be fine sending document, but if you have other UI elements in addition
// to your guacCanvas, you'd be better off passing just the guacCanvas.
// You need to configure 2 events. onkeyup and onkeydown
keyboard.onkeydown = (keysym: number) => {
guacClient.sendKeyEvent(1, keysym); // Send keydown event to the remote server
};
keyboard.onkeyup = (keysym: number) => {
guacClient.sendKeyEvent(0, keysym); // Send keyup event to the remote server
};
Șchritt 6: Konfiguration von Berührungsevents (Optional)
Optional können Sie Ihren Client auch für Berührungseingaben konfigurieren, aber sie werden in Guacamole.Mouse-Ereignisse übersetzt.
let touch = new Guacamole.Touch(guacCanvas);
// You need to configure 3 events here ontouchstart, ontouchend, ontouchmove
touch.onmousedown = touch.onmouseup = touch.onmousemove =
(touchState) => guacClient.sendMouseState(touchState);
const handleTouchEvent = (event) => {
event.preventDefault();
let touchState = touch.getMouseState(event);
guacClient.sendMouseState(touchState);
}
touch.ontouchstart = touch.ontouchend = touch.ontouchmove = handleTouchEvent;
Wie Sie sehen, übersetzen wir Berührungsevents in Guacamole-Mausevents, und dieser Schritt ist完全 optional. Sie müssen Berührungsevents nur dann konfigurieren, wenn Sie beabsichtigen, Ihren benutzerdefinierten Client auf einem berührungsempfindlichen Gerät zu verwenden.
Șchritt 7: Trennen von Ihrem entfernten Rechner
Schließlich haben wir das letzte Stadium erreicht, das ist das Trennen von Ihrem entfernten Rechner, und es ist so einfach wie der Aufruf einer Methode auf Ihrem Client.
guacClient.disconnect();
Schlussfolgerung
Zusammengefasst ist Apache Guacamole ein leistungsstarkes und vielseitiges Open-Source-Framework, das eine nahtlose Möglichkeit bietet, auf Remote-Desktops über die Protokolle RDP, SSH oder VNC zuzugreifen. Die Bibliothek guacamole-common-js ermöglicht es Entwicklern, benutzerdefinierte Guacamole-Clients zu erstellen, die mit anderen Guacamole-Komponenten wie guacamole-common, guaclib und guacamole-ext kommunizieren können.
Durch die Schritte, die in diesem Artikel beschrieben sind, können Sie einen grundlegenden benutzerdefinierten Guacamole-Client einrichten, der sich mit Ihren Remote-Servern verbinden und Tastatur-, Maus- und Touchereignisse verarbeiten kann.
Source:
https://dzone.com/articles/access-remote-desktops-using-apache-guacamole-a-ba