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 é executado em uma máquina com guacd ou o Daemon Guacamole. 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 via 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 Túnel Guacamole permite-lhe transmitir dados facilmente entre o servidor e o seu cliente.
const Guacamole = require('guacamole-common-js')
let tunnel = new Guacamole.Tunnel("path/to/your/tunnel");
Pode passar parâmetros adicionais ao seu servidor através da URL do túnel usando parâmetros de consulta. Por exemplo, a URL do seu túnel pode parecer-se com path/to/your/tunnel?param1=value1¶m2=value2.
Passo 2: Use o Objeto Túnel para Criar um Cliente Guacamole
Pode criar um objeto Cliente Guacamole passando o objeto Túnel que 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 de Túnel Guacamole e a instância de Cliente Guacamole. Estes são todos os que precisamos para estabelecer uma conexão com a nossa máquina remota.
guacClient.connect()
Só há 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 túnel já estiver conectado, essa operação falhará.
Agora, os mais perspicazes entre vocês vão descobrir que ainda não veem o conteúdo da sua máquina remota no cliente. Isso porque ainda estamos faltando um passo crucial.
Passo 4: Obter o Display Guacamole e Atribuí-lo ao DOM
Una vez que estabeleceu a conexão chamando guacClient.connect(), pode ver o display da máquina remota ao atribuir o display Guacamole (um HTMLDivElement) ao DOM. Vamos ver como podemos fazer isso.
Imagine 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 esperem, algo não está certo. A entrada do seu teclado não faz nada, e nem o mouse. Como vamos abordar isso?
Passo 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 primeiro 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 existem 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
};
Passo 6: Configurar Eventos de Toque (Opcional)
Opcionalmente, você também pode configurar seu cliente para entrada de toque, mas isso será traduzido para 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 você pode ver, estamos traduzindo eventos de toque em eventos de mouse do Guacamole, e este passo é entirely opcional. Você só precisa configurar eventos de toque se pretende usar seu cliente personalizado em um dispositivo de tela sensível ao toque.
Passo 7: Desconectar da Sua Máquina Remota
Finalmente, chegamos ao último passo, que é desconectar da sua máquina remota, e é tão simples quanto chamar um método no seu cliente.
guacClient.disconnect();
Conclusão
Resumindo, 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 interfacear 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 lidar com eventos de teclado, mouse e toque.
Source:
https://dzone.com/articles/access-remote-desktops-using-apache-guacamole-a-ba