Apache Guacamoleを使用してリモートデスクトップにアクセスする方法

JavaScript

Apache Guacamoleとは何か？

Apache GuacamoleはApache Foundationによって作成されたオープンソースのフレームワークで、HTML5アプリケーションとしてリモートデスクトップゲートウェイを提供し、RDP、SSH、VNCプロトコルを通じてリモートデスクトップにアクセスするための第三者のソフトウェア無しに機能します。

Guacamoleソリューションには、libguac、guacamole-common、guacamole-extなど多くの個別コンポーネントが含まれています。これらのプロジェクトはこの記事の範囲を超えますが、Guacamoleエコシステム内のguacamole-common-jsに焦点を当てます。

guacamole-common-jsとは何か？

Guacamoleプロジェクトは、Guacamole仕様に基づいたコンポーネントと対話するためのJavaScript APIを提供しています。guacamole-common-js APIは、Guacamoleクライアントとタunnelingメカニズムの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タunnelを作成する

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: 接続を確立するためにconnect関数を呼ぶ

そして、GuacamoleトンネルインスタンスとGuacamoleクライアントインスタンスがあります。これらがリモートマシンに接続するために必要なすべてです。

JavaScript

guacClient.connect()

ただし、忘れてはならないことがあります：Guacamole.Clientコンストラクタに渡されるGuacamole.Tunnelオブジェクトは、すでに接続されていない必要があります。なぜなら、内部的にはguacClient.connect()メソッドがtunnel.connect()メソッドを呼び出し、トンネルがすでに接続されているとこの操作が失敗するからです。

さて、鋭い方々はまだクライアント上にリモートマシンの内容が表示されていないことに気づかれているでしょう。それは、まだ一つの重要なステップが欠けているからです。

ステップ4: Guacamoleディスプレイを取得し、DOMにアタッチする

guacClient.connect()を呼んで接続を確立した後、Guacamoleディスプレイ（HTMLDivElement）をDOMにアタッチすることで、リモートマシンのディスプレイを表示できます。それをどうやるか見てみましょう。

HTMLページでリモートマシンの表示をしたいと imagine してください。

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;

キーボードの設定はさらにシンプルで、設定する必要があるイベントがたった2つだけです。

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;

Touchイベントを 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