如何使用 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.Client 构造函数的 Guacamole.Tunnel 对象不能已经处于连接状态。这是因为，在内部，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);

Et voila！你現在可以在你的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