Como Acessar Desktops Remotos Usando Apache Guacamole

Tutoriais

JavaScript

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.

Shell

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.

JavaScript

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&param2=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.

JavaScript

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.

JavaScript

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

<html>  

  <body id="guacCanvas">

  </body>

</html>

Em seguida, vamos obter o HTMLDivElement, que precisa ser exibido ao usuário a partir do guacClient.

JavaScript

// 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.

JavaScript

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.

JavaScript

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.

JavaScript

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.

JavaScript

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