איך לגשת לשולחנות מרחוק באמצעות Apache Guacamole

JavaScript

מהו Apache Guacamole?

Apache Guacamole הוא מסגרת קוד פתוח שנוצרה על ידי הארגון Apache, שמספקת אפליקציה HTML5 שמשמשת כשער מסך מרחוק לאפשרות גישה למסכי מחשב מרחוק דרך פרוטוקולי RDP, SSH ו-VNC, ללא שימוש בתוכנות שלישיות אחרות.

הפתרון Guacamole כולל מספר רב של רכיבים בודדים, כגון libguac, guacamole-common ו-guacamole-ext. בעוד שפרויקטים אלה הם מעבר לטווח זמן של מאמר זה, נתמקד ב- guacamole-common-js בתוך המערכת Guacamole.

מהו guacamole-common-js?

פרויקט Guacamole מספק API ב-JavaScript לתיקשור עם רכיבים שתוכננו להתאים לספציפיקציות Guacamole. API guacamole-common-js מציע השתלשלות של JavaScript ללקוח Guacamole ומכנים להעברת נתוני פרוטוקול מ-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");

אתה יכול להעביר פרמטרים נוספים לשרת שלך דרך כתובת המנהרה באמצעות פרמטרים של שאלה. לדוגמה, כתובת המנהרה שלך יכולה להיראות כמו path/to/your/tunnel?param1=value1&param2=value2.

שלב 2: השתמש באובייקט המנהרה ליצירת לקוח Guacamole

אתה יכול ליצור אובייקט Guacamole Client על ידי העברת האובייקט המנהרה שיצרת לאחרונה למבנה Guacamole.Client.

JavaScript

let guacClient = new Guacamole.Client(tunnel)

שלב 3: קרא לפונקציה Connect כדי להקים קשר

אז, יש לנו את אינסטנס של Guacamole Tunnel ואת אינסטנס של Guacamole Client. אלה כל מה שצריך כדי להקים קשר למכונה המרוחקת שלנו.

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