Wat Is Apache Guacamole?
Apache Guacamole is een open-source framework ontwikkeld door de Apache Foundation dat een HTML5-toepassing biedt die fungeert als een remote desktop gateway om toegang te krijgen tot remote desktops via de RDP, SSH, en VNC-protocollen zonder gebruik te maken van andere third-party software.
De Guacamole-oplossing bestaat uit vele afzonderlijke componenten, zoals libguac, guacamole-common, en guacamole-ext. Hoewel deze projecten buiten het bereik van dit artikel vallen, zullen we ons richten op guacamole-common-js binnen het Guacamole-ecosysteem.
Wat Is guacamole-common-js?
Het Guacamole-project biedt een JavaScript API voor het interfacing met componenten die voldoen aan de Guacamole-specificaties. De guacamole-common-js API biedt een JavaScript-implementatie van een Guacamole Client en tunnelmechanismen om protocolgegevens van JavaScript naar de serverkant van de toepassing over te dragen. De serverkant draait meestal op een machine met guacd of de Guacamole Daemon. De guacamole-common-js bibliotheek biedt muis- en toetsenbordabstraktieobjecten om JavaScript muis- en toetsenbordgebeurtenissen te vertalen naar gegevens die Guacamole gemakkelijk kan verwerken.
Gebruik van guacamole-common-js om een Aangepaste Guacamole Client te Maken
Voorkennis: Installeer guacamole-common-js via een package manager naar keuze. In dit voorbeeld gebruiken we npm.
npm i guacamole-common-js
Stap 1: Maak een Guacamole Tunnel
Het creëren van een Guacamole-tunnel stelt u in staat om gegevens moeiteloos tussen de server en uw client te streamen.
const Guacamole = require('guacamole-common-js')
let tunnel = new Guacamole.Tunnel("path/to/your/tunnel");
U kunt aanvullende parameters naar uw server doorgeven via de tunnel URL met behulp van query-parameters. Bijvoorbeeld, uw tunnel URL kan eruitzien als path/to/your/tunnel?param1=value1¶m2=value2.
Stap 2: Gebruik het Tunnel Object om een Guacamole Client te Creëren
U kunt een Guacamole Client-object creëren door het Tunnel-object dat u net hebt gemaakt door te geven aan de Guacamole.Client-constructor.
let guacClient = new Guacamole.Client(tunnel)
Stap 3: Roep de Connect Functie aan om de Verbinding te Maken
Dus, we hebben de Guacamole Tunnel instantie en de Guacamole Client instantie. Dit is alles wat we nodig hebben om een verbinding te maken met onze remote machine.
guacClient.connect()
Er is nog maar één ding om te onthouden: Het Guacamole.Tunnel-object dat aan de Guacamole.Client-constructor wordt doorgegeven mag nog niet verbonden zijn. Dit komt omdat intern de guacClient.connect()-methode de tunnel.connect()-methode aanroept, en als de tunnel al verbonden is, zal deze operatie mislukken.
Nu zullen de opmerkzame onder jullie merken dat je nog steeds de inhoud van je remote machine niet ziet op je client. Dat komt omdat we nog steeds één cruciale stap missen.
Stap 4: Verkrijg het Guacamole Scherm en Koppel het aan de DOM
Als je de verbinding hebt gevestigd door guacClient.connect() aan te roepen, kun je het display van de remote machine bekijken door de Guacamole display (een HTMLDivElement) aan de DOM te koppelen. Laten we zien hoe we dat kunnen doen.
Stel je voor dat je een HTML-pagina hebt waarop je de weergave van je externe machine wilt tonen.
<html>
<body id="guacCanvas">
</body>
</html>
Daarna gaan we het HTMLDivElement ophalen, dat aan de gebruiker moet worden weergegeven vanuit de 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);
Een kleine greep! Nu zie je de inhoud van je externe machine op je DOM. Maar wacht, er is iets mis. Je toetsenbordinvoer doet niets en ook je muis niet. Hoe lossen we dat op?
Stap 5: Configureer Toetsenbord- en Muisevents
Om toetsenbord- en muisevents te configureren, moet je de invoerhandlers instellen die door guacamole-common-js worden aangeboden.
Laten we eerst kijken hoe we muisevents kunnen configureren.
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;
De configuratie van het toetsenbord is nog eenvoudiger omdat er slechts twee events moeten worden geconfigureerd.
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
};
Stap 6: Configureer Touch Events (Optioneel)
Optioneel kun je je client ook configureren voor touch-invoer, maar dit zal worden vertaald naar Guacamole.Mouse-events.
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;
Je ziet dat we touch events vertalen naar Guacamole muis events, en deze stap is volledig optioneel. Je hoeft touch events alleen te configureren als je van plan bent je aangepaste client op een aanraakschermapparaat te gebruiken.
Stap 7: Verbind met je Externe Machine Verbreken
Tenslotte zijn we aangekomen bij de laatste stap, het verbreken van de verbinding met je externe machine, en dat is zo eenvoudig als het aanroepen van een methode op je client.
guacClient.disconnect();
Conclusie
Samenvattend is Apache Guacamole een krachtig en veelzijdig open-source framework dat een naadloze manier biedt om toegang te krijgen tot remote desktops via de RDP, SSH, of VNC-protocollen. De guacamole-common-js-bibliotheek stelt ontwikkelaars in staat om aangepaste Guacamole-clients te maken die kunnen communiceren met andere Guacamole-componenten zoals guacamole-common, guaclib, en guacamole-ext.
Door de in dit artikel beschreven stappen te volgen, kunt u een basis aangepaste guacamole-client instellen die verbinding kan maken met uw remote servers en toetsenbord-, muis- en aanraakgebeurtenissen kan afhandelen.
Source:
https://dzone.com/articles/access-remote-desktops-using-apache-guacamole-a-ba