#guacamole-gateway-client

This is a remote desktop Angular 15+ component for connecting to nodejs guacamole-gateway-ts gateway

This is based off a previous work of raytecvision with little tweaks to make it work with guacamole-gateway-ts gateway.

##Code scaffolding Run ng generate component component-name --project remote-desktop to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project remote-desktop.

Note: Don't forget to add --project remote-desktop or else it will be added to the default project in your angular.json file.

##Build Run ng build remote-desktop to build the project. The build artifacts will be stored in the dist/ directory.

This diagram describes the architecture of Guacamole and the role of guacamole-gateway-ts in it:

Install

• npm i guacamole-gateway-client

1import { NgModule } from '@angular/core';
2import { CommonModule } from '@angular/common';
3import { RemoteDesktopComponent } from './remote-desktop.component';
4import { GuacamoleRemoteDesktopModule } from 'guacamole-gateway-client';
5
6@NgModule({
7  declarations: [ RemoteDesktopComponent, ],
8  exports: [ RemoteDesktopComponent ],
9  imports: [
10    CommonModule,
11    GuacamoleRemoteDesktopModule,
12  ]
13})
14export class RemoteDesktopModule { }
15

1 <div>
2     <guacamole-gateway-client #remoteDesktop [showFileManager]="fileManagerVisible">
3     <!-- Toolbar items -->
4     <guacamole-gateway-client-toolbar-item *ngIf="rdService.isConnected()" (click)="handleTakeScreenshot()">
5       Take screenshot
6     </guacamole-gateway-client-toolbar-item>
7     <guacamole-gateway-client-toolbar-item *ngIf="rdService.isConnected()" (click)="handleClipboard()">
8       Clipboard
9     </guacamole-gateway-client-toolbar-item>
10     <guacamole-gateway-client-toolbar-item *ngIf="rdService.isConnected()" (click)="toggleFileManager()">
11       File Manager
12     </guacamole-gateway-client-toolbar-item>
13     <guacamole-gateway-client-toolbar-item *ngIf="rdService.isConnected()" (click)="handleDisconnect()">
14       Disconnect
15     </guacamole-gateway-client-toolbar-item>
16     <guacamole-gateway-client-toolbar-item *ngIf="!rdService.isFullScreen() && rdService.isConnected()" (click)="handleEnterFullScreen()">
17       Enter full screen
18     </guacamole-gateway-client-toolbar-item>
19     <guacamole-gateway-client-toolbar-item *ngIf="rdService.isFullScreen() && rdService.isConnected()" (click)="handleExitFullScreen()">
20       Exit full screen
21     </guacamole-gateway-client-toolbar-item>
22 
23
24     <!-- Override connection state messages -->
25     <guacamole-gateway-client-connecting-message>
26       <div class="guacamole-gateway-client-message-title guacamole-gateway-client-message-title-success">
27         CONNECTING TO REMOTE DESKTOP
28       </div>
29       <div class="guacamole-gateway-client-message-body">
30         Attempting to connect to the remote desktop. Waiting for response...
31       </div>
32     </guacamole-gateway-client-connecting-message>
33
34     <!-- Status bar -->
35     <guacamole-gateway-client-status-bar *ngIf="rdService.isConnected()">
36       <guacamole-gateway-client-status-bar-item>
37         You are currently connected to: <strong>Machine 1</strong>
38       </guacamole-gateway-client-status-bar-item>
39       <guacamole-gateway-client-status-bar-item>
40         <span>Need help? Look at our <a href="#">documentation</a></span>
41       </guacamole-gateway-client-status-bar-item>
42     </guacamole-gateway-client-status-bar>
43
44     <!-- File Manager -->
45     <guacamole-gateway-client-file-manager *ngIf="rdService.isConnected()">
46     </guacamole-gateway-client-file-manager>
47   </guacamole-gateway-client>
48 </div>

1
2import { Component, ViewEncapsulation, Input, OnInit, ViewChild, AfterViewInit } from '@angular/core';
3import { Guacamole, GuacamoleRemoteDesktopComponent, RemoteDesktopService, TunnelRestApiService } from 'guacamole-gateway-client';
4
5@Component({
6 selector: 'remote-desktop',
7 templateUrl: './remote-desktop.component.html',
8 encapsulation: ViewEncapsulation.None,
9 styleUrls: ['./remote-desktop.component.scss']
10})
11
12export class RemoteDesktopComponent implements OnInit, AfterViewInit {
13 @ViewChild('remoteDesktop', { static: false }) remoteDesktop: GuacamoleRemoteDesktopComponent;
14
15 public fileManagerVisible: boolean = false;
16
17
18 constructor(
19   public rdService: RemoteDesktopService,
20   public tunnelRestApiService: TunnelRestApiService,
21 ) { }
22
23
24 handleDisconnect(): void {
25   this.rdService.getClient().disconnect();
26 }
27
28 handleEnterFullScreen() {
29   this.rdService.setFullScreen(true);
30 }
31
32 handleExitFullScreen() {
33   this.rdService.setFullScreen(false);
34 }
35
36 toggleFileManager() {
37   this.fileManagerVisible = !this.fileManagerVisible;
38 }
39
40
41
42 ngOnInit() {
43  const socket = new Guacamole.SocketIOTunnel('', {
44       path: "{{your path}}",
45       transports: ['websocket'],
46       secure: true,
47       auth: {{your custom authentication/identification object}})
48       }
49     });
50     this.remoteDesktopService.initialize(socket);
51     this.connect();
52     this.remoteDesktopService.onReconnect.subscribe(reconnect => this.connect());
53 }
54
55 ngAfterViewInit() {
56   if (this.remoteDesktop) {
57     this.remoteDesktop.toolbarVisible = this.rdService.isConnected();
58   }
59 }
60
61
62 connect() {
63   //tell the gatway this is a client trying to connect
64    this.remoteDesktopService.connect({ type: 'client'});
65   if (this.remoteDesktop) {
66     this.remoteDesktop.toolbarVisible = this.remoteDesktopService.isConnected();
67   }
68 }

Associated Components

guacamole-gateway-ts guacamole-common-ts

Apache Guacamole