O que é Apache Guacamole?
O Apache Guacamole é um framework de código aberto criado pela Apache Foundation que fornece um aplicativo HTML5 que age como um gateway de desktop remoto, permitindo o acesso a desktops remotos através dos protocolos RDP, SSH e VNC sem a necessidade de qualquer outro software de terceiros.
A solução Guacamole inclui muitos componentes individuais, como libguac, guacamole-common e guacamole-ext. Embora esses projetos estejam além do escopo deste artigo, vamos nos concentrar em guacamole-common-js dentro do ecossistema Guacamole.
O que é guacamole-common-js?
O projeto Guacamole fornece uma API JavaScript para interfacear com componentes projetados para atender às especificações Guacamole. A API guacamole-common-js oferece uma implementação JavaScript de um Cliente Guacamole e mecanismos de túnel para transferir dados de protocolo do JavaScript para o lado do servidor da aplicação. O lado do servidor geralmente roda em uma máquina com guacd ou o Guacamole Daemon. A biblioteca guacamole-common-js fornece objetos de abstração de mouse e teclado para traduzir eventos de mouse e teclado JavaScript em dados que o Guacamole pode facilmente processar.
Usando guacamole-common-js para Criar um Cliente Guacamole Personalizado
Pré-requisitos: Instale guacamole-common-js através de qualquer gerenciador de pacotes da sua escolha. Neste exemplo, usaremos npm.
npm i guacamole-common-js
Passo 1: Crie um Túnel Guacamole
Criar um Tunel Guacamole permite que você faça o streaming de dados sem esforço entre o servidor e seu cliente.
const Guacamole = require('guacamole-common-js')
let tunnel = new Guacamole.Tunnel("path/to/your/tunnel");
Você pode passar parâmetros adicionais para o seu servidor através da URL do tunel usando parâmetros de consulta. Por exemplo, sua URL do tunel pode se parecer com path/to/your/tunnel?param1=value1¶m2=value2.
Passo 2: Use o Objeto Tunel para Criar um Cliente Guacamole
Você pode criar um objeto Guacamole Client passando o objeto Tunel que você acabou de criar para o construtor Guacamole.Client.
let guacClient = new Guacamole.Client(tunnel)
Passo 3: Chame a Função Conectar para Estabelecer a Conexão
Então, temos a instância Guacamole Tunnel e a instância Guacamole Client. Esses são todos que precisamos para estabelecer uma conexão com nossa máquina remota.
guacClient.connect()
Só uma coisa para lembrar: O objeto Guacamole.Tunnel passado para o construtor Guacamole.Client não deve já estar conectado. Isso porque, internamente, o método guacClient.connect() chamará o método tunnel.connect(), e se o tunel já estiver conectado, essa operação falhará.
Agora, os observadores entre vocês vão perceber que ainda não veem o conteúdo da sua máquina remota no seu cliente. Isso porque ainda estamos faltando um passo crucial.
Passo 4: Obtenha o Guacamole Display e Ate-o ao DOM
Depois de estabelecer a conexão chamando guacClient.connect(), você pode ver o display da máquina remota ao anexar o display Guacamole (um HTMLDivElement) ao DOM. Vamos ver como podemos fazer isso.
Imagina que você tem uma página HTML onde deseja exibir a tela da sua máquina remota.
<html>
<body id="guacCanvas">
</body>
</html>
Em seguida, vamos obter o HTMLDivElement, que precisa ser exibido ao usuário a partir do 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à! Agora você vê o conteúdo da sua máquina remota no seu DOM. Mas espera, algo não está certo. A entrada do seu teclado não faz nada, e nem o mouse. Como vamos resolver isso?
Etapa 5: Configurar Eventos de Teclado e Mouse
Para configurar eventos de teclado e mouse, você precisa configurar os manipuladores de entrada fornecidos pelo guacamole-common-js.
Vamos primeiramente ver como podemos configurar eventos de mouse.
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;
A configuração do teclado é ainda mais simples porque há apenas dois eventos que precisam 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
};
Etapa 6: Configurar Eventos de Toque (Opcional)
Opcionalmente, você também pode configurar seu cliente para entradas de toque, mas elas serão traduzidas para eventos 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 você pode ver, estamos traduzindo eventos de toque em eventos de mouse do Guacamole, e essa etapa é inteiramente opcional. Você precisa configurar eventos de toque apenas se pretende usar seu cliente personalizado em um dispositivo de tela sensível ao toque.
Etapa 7: Desconectar da Sua Máquina Remota
Finalmente, chegamos à última etapa, que é desconectar da sua máquina remota, e é tão simples quanto chamar um método no seu cliente.
guacClient.disconnect();
Conclusão
Para resumir, Apache Guacamole é um framework poderoso e versátil de código aberto que oferece uma forma integrada de acessar desktops remotos através dos protocolos RDP, SSH ou VNC. A biblioteca guacamole-common-js permite que desenvolvedores criem clientes Guacamole personalizados que podem interfaces com outros componentes Guacamole, como guacamole-common, guaclib e guacamole-ext.
Seguindo os passos descritos neste artigo, você pode configurar um cliente Guacamole básico personalizado que pode se conectar aos seus servidores remotos e gerenciar eventos de teclado, mouse e toque.
Source:
https://dzone.com/articles/access-remote-desktops-using-apache-guacamole-a-ba