¿Qué es Apache Guacamole?
Apache Guacamole es un framework de código abierto creado por la Fundación Apache que proporciona una aplicación HTML5 que actúa como una puerta de enlace de escritorio remoto para permitir el acceso a escritorios remotos a través de los protocolos RDP, SSH y VNC sin la necesidad de utilizar ningún otro software de tercera parte.
La solución Guacamole incluye muchos componentes individuales, como libguac, guacamole-common y guacamole-ext. Mientras que estos proyectos están más allá del alcance de este artículo, nos centraremos en guacamole-common-js dentro del ecosistema Guacamole.
¿Qué es guacamole-common-js?
El proyecto Guacamole proporciona una API de JavaScript para interactuar con componentes diseñados para cumplir con las especificaciones de Guacamole. La API guacamole-common-js ofrece una implementación de JavaScript de un Cliente Guacamole y mecanismos de túnel para transferir datos de protocolo desde JavaScript al lado del servidor de la aplicación. El lado del servidor generalmente ejecuta una máquina con guacd o el Demonio Guacamole. La biblioteca guacamole-common-js proporciona objetos de abstracción de ratón y teclado para traducir eventos de ratón y teclado de JavaScript en datos que Guacamole puede digerir fácilmente.
Usar guacamole-common-js para Crear un Cliente Guacamole Personalizado
Prerrequisitos: Instalar guacamole-common-js a través de cualquier administrador de paquetes de su elección. En este ejemplo, utilizaremos npm.
npm i guacamole-common-js
Paso 1: Crear un Túnel Guacamole
Crear un túnel de Guacamole permite transmitir datos sin esfuerzo entre el servidor y su cliente.
const Guacamole = require('guacamole-common-js')
let tunnel = new Guacamole.Tunnel("path/to/your/tunnel");
Puede pasar parámetros adicionales a su servidor a través de la URL del túnel utilizando parámetros de consulta. Por ejemplo, su URL de túnel puede verse así path/to/your/tunnel?param1=value1¶m2=value2.
Paso 2: Usar el Objeto Tunnel para Crear un Cliente Guacamole
Puede crear un objeto Cliente Guacamole pasando el objeto Tunnel que acaba de crear al constructor Guacamole.Client.
let guacClient = new Guacamole.Client(tunnel)
Paso 3: Llamar a la Función Connect para Establecer la Conexión
Así que, tenemos la instancia de Guacamole Tunnel y la instancia de Guacamole Client. Estas son todas las que necesitamos para establecer una conexión a nuestra máquina remota.
guacClient.connect()
Sólo una cosa para recordar: El objeto Guacamole.Tunnel pasado al constructor Guacamole.Client no debe estar ya conectado. Esto se debe a que, internamente, el método guacClient.connect() llamará al método tunnel.connect(), y si el túnel ya está conectado, esta operación fallará.
Ahora, los más observadores entre ustedes se darán cuenta de que aún no ven el contenido de su máquina remota en su cliente. Eso se debe a que aún nos falta un paso crucial.
Paso 4: Obtener la Pantalla de Guacamole y Adjuntarla al DOM
Una vez que ha establecido la conexión llamando a guacClient.connect(), puede ver la pantalla de la máquina remota adjuntando la pantalla de Guacamole (un HTMLDivElement) al DOM. Vamos a ver cómo podemos hacer eso.
Imagina que tienes una página HTML donde deseas mostrar la pantalla de tu máquina remota.
<html>
<body id="guacCanvas">
</body>
</html>
Luego, obtengamos el HTMLDivElement, que se debe mostrar al usuario desde el 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);
¡Y voilà! Ahora puedes ver el contenido de tu máquina remota en tu DOM. Pero espera, algo no está bien. La entrada de tu teclado no hace nada, ni siquiera el mouse. ¿Cómo abordamos esto?
Paso 5: Configurar Eventos de Teclado y Ratón
Para configurar eventos de teclado y ratón, necesitas configurar los manejadores de entrada proporcionados por guacamole-common-js.
Veamos primero cómo podemos configurar los eventos de ratón.
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 configuración del teclado es aún más sencilla porque solo hay dos eventos que necesitan ser configurados.
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
};
Paso 6: Configurar Eventos de Tacto (Opcional)
Opcionalmente, también puedes configurar tu cliente para entradas táctiles, pero se traducirán a eventos de 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;
Como puedes ver, estamos traduciendo eventos táctiles a eventos de ratón de Guacamole, y este paso es completamente opcional. Solo necesitas configurar eventos táctiles si planeas usar tu cliente personalizado en un dispositivo táctil.
Paso 7: Desconectar de tu Máquina Remota
Finalmente, hemos llegado al último paso, que es desconectar de tu máquina remota, y es tan simple como llamar un método en tu cliente.
guacClient.disconnect();
Conclusión
Para resumir, Apache Guacamole es un potente y versátil framework de código abierto que ofrece una forma sin problemas de acceder a escritorios remotos a través de los protocolos RDP, SSH o VNC. La biblioteca guacamole-common-js permite a los desarrolladores crear clientes personalizados de Guacamole que pueden interactuar con otros componentes de Guacamole como guacamole-common, guaclib y guacamole-ext.
Siguiendo los pasos detallados en este artículo, puedes configurar un cliente de guacamole básico personalizado que puede conectarse a tus servidores remotos y manejar eventos de teclado, ratón y táctil.
Source:
https://dzone.com/articles/access-remote-desktops-using-apache-guacamole-a-ba