介绍
guacamole-js 是一个用于实现 Web 远程桌面连接的 JavaScript 客户端库。 它提供了一个客户端/服务器协议（Guacamole 协议），可以在浏览器中发送和接收框图。使用 guacamole-js，你可以在你的 Web 应用程序中加入远程桌面连接的功能。
安装
guacamole-js 可以通过 npm 安装:
$ npm install guacamole-js
要在你的应用程序中使用 guacamole-js，可以在你的 HTML 文件中导入它:
<script src="node_modules/guacamole-js/guacamole.min.js"></script>
使用
连接到远程桌面
要连接到远程桌面，你需要首先创建一个 Guacamole.Client 对象，并提供一个 Guacamole.Tunnel。 Guacamole.Tunnel 是一个在客户端和服务器之间传递 Guacamole 协议的载体。在此示例中，我们将使用 WebSocketTunnel 创建一个 WebSocket 连接：
// 创建一个 WebSocket 连接
var tunnel = new Guacamole.WebSocketTunnel("ws://example.com:8080");
// 创建一个 guacamole 客户端
var client = new Guacamole.Client(tunnel);
// 连接到远程桌面
client.connect();在上面的示例中，我们将 WebSocketTunnel 初始化为使用 ws://example.com:8080 作为端口的 WebSocket，然后将它提供给 Guacamole.Client 对象。 最后一行调用 connect() 方法以触发连接。
发送键和鼠标事件
一旦连接到远程桌面，我们可以发送按键和鼠标事件。键和鼠标事件都被表示为 Guacamole.INSTRUCTION.SYNC。
键盘事件可以像这样发送:
// 按下并释放 A 键 client.sendKeyEvent(65, true); client.sendKeyEvent(65, false);
此代码将发送带有数字 65 的 Guacamole.INSTRUCTION.SYNC 消息，该数字代表键码，以向远程桌面发送按下和释放 A 键的事件。目前支持的键码可以在 JavaScript API 参考中找到：
类似地，可以使用以下内容发送鼠标事件：
// 在 (10, 10) 点按下鼠标左键 client.sendMouseState(10, 10, true, false, false); // 将鼠标移动到 (20, 20) 点 client.sendMouseState(20, 20, false, false, false); // 释放鼠标左键 client.sendMouseState(20, 20, false, false, true);
sendMouseState() 方法接受当前指针位置和按下的鼠标按钮状态作为参数，用于发送鼠标事件。
接收屏幕
要接收屏幕输出，请附加一个 Guacamole.Display 对象，并使用 receive() 方法自动更新该对象：
// 创建一个 guacamole 显示对象
var display = new Guacamole.Display(document.getElementById("display"));
// 连接到显示对象
client.getDisplay().pipe(display);
// 接收远程桌面画面
display.receive();在上面的示例中，我们首先 create a Guacamole.Display，然后通过将其提供给 client.getDisplay().pipe() 将其连接到 Guacamole.Client。然后使用 display.receive() 接受和显示来自远程桌面的屏幕输出。
组合
在连接到远程桌面并处理键和鼠标时，将 guacamole-js 与其他库和框架一起使用非常方便。例如，您可以使用 React.js 来管理 GUI，并使用 guacamole-js 连接到远程桌面：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ --------- ---- ---------------
----- ------------- ------- --------- -
------------------ -
-------------
---------- - -
------- -----
-------- -----
--
-
-------------------- -
----- ------ - --- ------------------------------------------
----- ------ - --- -------------------------
----- ------- - --- ----------------------------------
----------------------------------
------------------
---------------
------- -------
-------- --------
---
-
----------------------- -------- -
--------------------------------------- ---------
-
------------------- -- -------- -------- -------- -
----------------------------------- -- -------- -------- ---------
-
-------- -
------ -
----
---------------- -- - -------------- - ---------- --
-------------- -- - ------------------------------ ------ --
------------ -- - ------------------------------ ------- --
---------------- -- - -------------------------------------------- ---------------------- -------------------- --- -- -------------------- --- -- -------------------- --- --- --
-------------- -- - -------------------------------------------- ---------------------- -------------------- --- -- -------------------- --- -- -------------------- --- --- --
------------------ -- - ------------------- --
--
--
-
-
------ ------- --------------上面的示例将 Guacamole 代码包装在 React.js 组件中，并处理键和鼠标事件以便适应 React.js 流。此示例还使用 ref 来存储对实际 DOM 元素的引用，并使用 offsetX 和 offsetY 属性而不是 clientX 和 clientY 属性。
结论
在本篇文章中，我们详细学习了如何使用 npm 包 guacamole-js，以在 Web 应用程序中实现远程桌面连接的功能。我们看到了如何创建 Guacamole.Client 和 Guacamole.Tunnel，如何发送键和鼠标事件，并演示了如何接收远程桌面画面。最后，我们展示了如何使用 guacamole-js 与其他库和框架一起使用。希望本文能够对正在学习使用 guacamole-js 的开发人员有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005568e81e8991b448d3569