كيفية الوصول إلى الأجهزة عن بُعد باستخدام Apache Guacamole

JavaScript

ما هو Apache Guacamole؟

Apache Guacamole هو إطار عمل مفتوح المصدر أنشأته مؤسسة Apache يقدم تطبيقًا HTML5 يعمل ك بوابة سطح مكتب بعيد via RDP، SSH، و VNC بروتوكولات للوصول إلى الأسطح البعيدة دون استخدام أي برامج طرف ثالث أخرى.

حل Guacamole يتضمن العديد من المكونات الفردية، مثل libguac، guacamole-common، و guacamole-ext. بينما تتجاوز هذه المشاريع نطاق هذا المقال، سنركز على guacamole-common-js داخل بيئة Guacamole.

ما هو guacamole-common-js؟

يقدم مشروع Guacamole واجهة برمجة تطبيقات JavaScript للتواصل مع المكونات المصممة لتحقيق مواصفات Guacamole. توفر واجهة guacamole-common-js تنفيذ JavaScript لclient Guacamole وآليات النفق لتحويل بيانات البروتوكول من JavaScript إلى الجانب الخادم التطبيق. الجانب الخادم عادة ما يشتغل على جهاز مع guacd أو Guacamole Demon. تقدم مكتبة guacamole-common-js كائنات الت.abstract للفأرة واللوحة المفاتيح لتحويل أحداث الفأرة واللوحة المفاتيح في 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.

الخطوة الثانية: استخدم كائن النفق لإنشاء عميل Guacamole

يمكنك إنشاء كائن Guacamole Client عن طريق تمرير كائن النفق الذي أنشأته للتو إلى مسstructor Guacamole.Client.

JavaScript

let guacClient = new Guacamole.Client(tunnel)

الخطوة الثالثة: استدعاء دالة الاتصال لإنشاء الاتصال

إذن، لدينا مثيل Guacamole Tunnel ومثيل Guacamole Client. هذه هي كل ما نحتاجه لإنشاء اتصال بجهازنا البعيد.

JavaScript

guacClient.connect()

هناك شيء واحد يجب تذكره: يجب أن يكون كائن Guacamole.Tunnel الممرر إلى مسstructor Guacamole.Client غير متصل مسبقًا.这是因为، داخليًا، دالة guacClient.connect() ستعمل على استدعاء دالة tunnel.connect()، وإن كان النفق متصلاً مسبقًا، ستفشل هذه العملية.

الآن، سيلاحظ الفطن منكم أنكم لا تزالون لا ترون محتويات جهازكم البعيد على العميل.这是因为 نحن ما زلنا نفتقد خطوة حاسمة.

الخطوة الرابعة: الحصول على شاشة 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