Как получить доступ к удаленным рабочим столам с использованием Apache Guacamole

JavaScript

Что такое Apache Guacamole?

Apache Guacamole — это open-source фреймворк, созданный Фондом Apache, который предоставляет HTML5 приложение, действующее в качестве шлюза для удаленного рабочего стола, позволяющего доступ к удаленным рабочим столам через протоколы RDP, SSH и VNC без использования какого-либо другого стороннего программного обеспечения.

Решение Guacamole включает множество отдельных компонентов, таких как libguac, guacamole-common и guacamole-ext. Хотя эти проекты выходят за рамки этой статьи, мы сосредоточимся на guacamole-common-js в экосистеме Guacamole.

Что такое guacamole-common-js?

Проект Guacamole предоставляет JavaScript API для взаимодействия с компонентами, разработанными в соответствии со спецификациями Guacamole. API guacamole-common-js предлагает JavaScript реализацию клиента Guacamole и механизмов туннелирования для передачи protocol данных из JavaScript на серверную сторону приложения. Серверная сторона обычно работает на машине с guacd или Дémonом Guacamole. Библиотека guacamole-common-js предоставляет объекты абстракции мыши и клавиатуры для перевода событий мыши и клавиатуры JavaScript в данные, которые Guacamole может легко переварить.

Использование guacamole-common-js для создания пользовательского клиента Guacamole

Предварительные условия: Установите guacamole-common-js через любой Package Manager по вашему выбору. В этом примере мы будем использовать npm.

Shell

npm i guacamole-common-js

Шаг 1: Создайте туннель Guacamole

Создание туннеля Guacamole позволяет вам без труда передавать данные между сервером и вашим клиентом.

JavaScript

const Guacamole = require('guacamole-common-js')

​

let tunnel = new Guacamole.Tunnel("path/to/your/tunnel");

Вы можете передать дополнительные параметры вашему серверу через URL туннеля, используя параметры запроса. Например, ваш URL туннеля может выглядеть так path/to/your/tunnel?param1=value1&param2=value2.

Шаг 2: Используйте объект Tunnel для создания клиента Guacamole

Вы можете создать объект Guacamole Client, передав только что созданный объект Tunnel в конструктор Guacamole.Client.

JavaScript

let guacClient = new Guacamole.Client(tunnel)

Шаг 3: Вызовите функцию Connect для установления соединения

Итак, у нас есть экземпляр Guacamole Tunnel и экземпляр Guacamole Client. Это все, что нам нужно для установления соединения с是我们的 удаленной машиной.

JavaScript

guacClient.connect()

Just one thing to remember: The Guacamole.Tunnel object passed into the Guacamole.Client constructor must not already be connected. This is because, internally, the guacClient.connect() method will call the tunnel.connect() method, and if the tunnel is already connected, this operation will fail.

Теперь, внимательные из вас заметят, что вы все еще не видите содержимое вашей удаленной машины на вашем клиенте. Это потому, что мы все еще упускаем один важный шаг.

Шаг 4: Получите дисплей Guacamole и прикрепите его к DOM

Как только вы установили соединение, gọi guacClient.connect(), вы можете увидеть дисплей удаленной машины, прикрепив дисплей Guacamole (объект HTMLDivElement) к DOM. Давайте посмотрим, как мы можем это сделать.

Представьте, что у вас есть HTML-страница, на которой вы хотите показать отображение вашего удаленного компьютера.

HTML

<html>  

  <body id="guacCanvas">

  </body>

</html>

Далее,��取 HTMLDivElement, который нужно отображать пользователю из 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);

И вуаля! Теперь вы видите содержимое вашего удаленного компьютера на вашем DOM. Но подождите, что-то не так. Ваша клавиатурная ввод не работает, и мышка также. Как мы это решаем?

Шаг 5: Настройка событий клавиатуры и мыши

Для настройки событий клавиатуры и мыши вам нужно настроить обработчики ввода, предоставляемые guacamole-common-js.

Давайте сначала посмотрим, как мы можем настроить события мыши.

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;

Настройка клавиатуры еще проще, потому что есть только два события, которые нужно настроить.

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

  };

Шаг 6: Настройка событий触摸а (Опционально)

Опционально, вы также можете настроить вашего клиента для ввода сенсорного экрана, но это будет переведено в события 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;

Как вы видите, мы.translate события触摸а в события мыши Guacamole, и этот шаг完全是 optional. Вам нужно настроить события触摸а только если вы планируете использовать ваш пользовательский клиент на устройстве с сенсорным экраном.

Шаг 7: Отключение от вашего удаленного компьютера

Наконец, мы достигли последнего шага, который заключается в отключении от вашего удаленного компьютера, и это так же просто, как вызов метода на вашем клиенте.

JavaScript

guacClient.disconnect();

Заключение

Итогом является то, что Apache Guacamole — это мощный и гибкий开源-фреймворк, который предлагает без缝的方式通过 RDP, SSH или VNC протоколы для доступа к удаленным десктопам. Библиотека guacamole-common-js позволяет разработчикам создавать пользовательские клиенты Guacamole, которые могут взаимодействовать с другими компонентами Guacamole, такими как guacamole-common, guaclib и guacamole-ext.

Следуя шагам, изложенным в этой статье, вы можете настроить базовый пользовательский клиент guacamole, который может подключаться к вашим удаленным серверам и обрабатывать события клавиатуры, мыши и触摸а.

Source:
https://dzone.com/articles/access-remote-desktops-using-apache-guacamole-a-ba