如何使用 Apache Guacamole 访问远程桌面

教程

JavaScript

Apache Guacamole是什么？

Apache Guacamole是由Apache基金会创建的一个开源框架，它提供了一个HTML5应用程序，作为远程桌面网关，可以通过RDP、SSH和VNC协议访问远程桌面，而无需使用任何其他第三方软件。

Guacamole解决方案包括许多独立组件，例如libguac、guacamole-common和guacamole-ext。虽然这些项目超出了本文的范围，但我们将重点关注Guacamole生态系统中的guacamole-common-js。

什么是guacamole-common-js？

Guacamole项目提供了一个JavaScript API，用于与符合Guacamole规范设计的组件交云。 guacamole-common-js API提供了Guacamole客户端和隧道机制的JavaScript实现，用于将协议数据从JavaScript传输到应用程序的服务器端。服务器端通常运行有guacd或Guacamole守护进程。 guacamole-common-js库提供了鼠标和键盘抽象对象，用于将JavaScript鼠标和键盘事件转换成Guacamole可以轻松处理的数据。

使用guacamole-common-js创建自定义Guacamole客户端

先决条件：通过您选择的任何包管理器安装guacamole-common-js。在这个例子中，我们将使用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：使用隧道对象创建Guacamole客户端

您可以通过将刚刚创建的隧道对象传递给Guacamole.Client构造函数来创建一个Guacamole客户端对象。

JavaScript

let guacClient = new Guacamole.Client(tunnel)

步骤3：调用连接函数建立连接

所以，我们有了Guacamole隧道实例和Guacamole客户端实例。这些都是我们连接到远程机器所需要的。

JavaScript

guacClient.connect()

只需记住一件事：Guacamole.Tunnel对象传递到Guacamole.Client构造函数中时必须尚未连接。这是因为，在内部，guacClient.connect()方法将会调用tunnel.connect()方法，如果隧道已经连接，这个操作将会失败。

现在，细心的人会发现您仍然无法在客户端看到远程机器的内容。这是因为我们仍然缺少一个关键步骤。

步骤4：获取Guacamole显示并将其附加到DOM

一旦通过调用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;

如你所见，我们将触摸事件转换为Guacamole鼠标事件，这个步骤完全是可选的。只有当你打算在触摸屏设备上使用你的自定义客户端时，才需要配置触摸事件。

第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