Qu’est-ce qu’Apache Guacamole ?
Apache Guacamole est un framework open-source créé par la Fondation Apache qui fournit une application HTML5 agissant comme une passerelle de bureau à distance, permettant d’accéder à des bureaux distants via les protocoles RDP, SSH et VNC sans l’utilisation d’un autre logiciel tiers.
La solution Guacamole inclut de nombreux composants individuels, tels que libguac, guacamole-common et guacamole-ext. Bien que ces projets soient au-delà de la portée de cet article, nous nous concentrerons sur guacamole-common-js à l’intérieur de l’écosystème Guacamole.
Qu’est-ce que guacamole-common-js ?
Le projet Guacamole fournit une API JavaScript pour interfacer avec des composants conçus pour répondre aux spécifications Guacamole. L’API guacamole-common-js offre une implémentation JavaScript d’un Client Guacamole et de mécanismes de tunneling pour transférer les données de protocole de JavaScript vers le côté serveur de l’application. Le côté serveur fonctionne généralement sur une machine avec guacd ou le Démon Guacamole. La bibliothèque guacamole-common-js fournit des objets d’abstraction souris et clavier pour traduire les événements souris et clavier JavaScript en données que Guacamole peut facilement digérer.
<diy9 Utiliser guacamole-common-js pour Créer un Client Guacamole Personnalisé
Prérequis : Installez guacamole-common-js via n’importe quel gestionnaire de packages de votre choix. Dans cet exemple, nous utiliserons npm.
npm i guacamole-common-js
Étape 1 : Créer un Tunnel Guacamole
Créer un tunnel Guacamole permet de streamer les données sans effort entre le serveur et votre client.
const Guacamole = require('guacamole-common-js')
let tunnel = new Guacamole.Tunnel("path/to/your/tunnel");
Vous pouvez passer des paramètres supplémentaires à votre serveur via l’URL du tunnel en utilisant des paramètres de requête. Par exemple, votre URL de tunnel peut ressembler à path/to/your/tunnel?param1=value1¶m2=value2.
Étape 2 : Utilisez l’objet Tunnel pour Créer un Client Guacamole
Vous pouvez créer un objet Client Guacamole en passant l’objet Tunnel que vous venez de créer au constructeur Guacamole.Client.
let guacClient = new Guacamole.Client(tunnel)
Étape 3 : Appelez la Fonction Connect pour Établir la Connexion
Alors, nous avons l’instance de Tunnel Guacamole et l’instance de Client Guacamole. Ce sont tout ce dont nous avons besoin pour établir une connexion à notre machine distante.
guacClient.connect()
Il y a juste une chose à remember : L’objet Guacamole.Tunnel passé dans le constructeur Guacamole.Client ne doit pas déjà être connecté. C’est parce que, internement, la méthode guacClient.connect() va appeler la méthode tunnel.connect(), et si le tunnel est déjà connecté, cette opération échouera.
Jetzt, les observateurs d’entre vous se rendront compte que vous ne voyez toujours pas le contenu de votre machine distante sur votre client. C’est parce que nous manquons encore une étape cruciale.
Étape 4 : Obtenez l’Affichage Guacamole et Attachez-le au DOM
Une fois que vous avez établi la connexion en appelant guacClient.connect(), vous pouvez voir l’affichage de la machine distante en attachant l’affichage Guacamole (un HTMLDivElement) au DOM. Voyons comment nous pouvons faire cela.
Imaginons que vous ayez une page HTML dans laquelle vous souhaitez montrer l’affichage de votre machine distante.
<html>
<body id="guacCanvas">
</body>
</html>
Puis, récupérons le HTMLDivElement, qui doit être affiché à l’utilisateur depuis le 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);
Et voilà ! Vous voyez maintenant le contenu de votre machine distante sur votre DOM. Mais attendez, quelque chose ne va pas. Votre entrée clavier ne fait rien, et votre souris non plus. Comment y remédier ?
Etape 5 : Configurer les événements clavier et souris
Pour configurer les événements clavier et souris, vous devez mettre en place les gestionnaires d’entrée fournis par guacamole-common-js.
Voyons d’abord comment nous pouvons configurer les événements souris.
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;
La configuration du clavier est encore plus simple car il n’y a que deux événements à configurer.
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
};
Etape 6 : Configuration des événements tactiles (optionnel)
En option, vous pouvez également configurer votre client pour les entrées tactiles, mais elles seront traduites en événements Guacamole.Mouse.
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;
Comme vous pouvez le voir, nous traduisons les événements tactiles en événements souris Guacamole, et cette étape est entièrement optionnelle. Vous ne devez configurer les événements tactiles que si vous avez l’intention d’utiliser votre client personnalisé sur un appareil à écran tactile.
Étape 7 : Déconnexion de votre machine distante
Enfin, nous avons atteint la dernière étape, qui est la déconnexion de votre machine distante, et c’est aussi simple que d’appeler une méthode sur votre client.
guacClient.disconnect();
Conclusion
Pour résumer, Apache Guacamole est un framework puissant et polyvalent open-source qui offre une manière fluide d’accéder à des bureaux distants via les protocoles RDP, SSH ou VNC. La bibliothèque guacamole-common-js permet aux développeurs de créer des clients Guacamole personnalisés qui peuvent interagir avec d’autres composants Guacamole tels que guacamole-common, guaclib et guacamole-ext.
En suivant les étapes décrites dans cet article, vous pouvez configurer un client Guacamole personnalisé de base qui peut se connecter à vos serveurs distants et gérer les événements clavier, souris et tactile.
Source:
https://dzone.com/articles/access-remote-desktops-using-apache-guacamole-a-ba