guacamole-common-js

import Guacamole from 'guacamole-common-js'; // Assumes a 'display' div exists in your HTML: // <div id="display"></div> // Create a Guacamole HTTP tunnel. Replace '/guacamole/tunnel' with your server's tunnel endpoint. // This is the primary communication mechanism with the Guacamole server. const tunnel = new Guacamole.HTTPTunnel("/guacamole/tunnel"); // Instantiate the Guacamole client, passing the tunnel const client = new Guacamole.Client(tunnel); // Get the display element from the client const displayElement = client.getDisplay().getElement(); // Append the Guacamole display to your designated HTML element document.getElementById("display").appendChild(displayElement); // Handle client state changes (e.g., connection status) client.onstatechange = function(state) { if (state === Guacamole.Client.State.DISCONNECTED) { console.log("Disconnected from Guacamole server."); } else if (state === Guacamole.Client.State.CONNECTED) { console.log("Connected to Guacamole server."); } }; // Handle errors from the Guacamole client client.onerror = function(error) { console.error("Guacamole client error:", error); alert("Connection error: " + error.message); }; // Finally, connect to the Guacamole server client.connect(); // To send user input (keyboard/mouse), you would typically use: // const keyboard = new Guacamole.Keyboard(document); // const mouse = new Guacamole.Mouse(displayElement); // mouse.onmouseup = function(state) { client.sendMouseState(state); }; // keyboard.onkeydown = function(keysym) { client.sendKeyEvent(keysym, true); };