npmpackage.info

Gathering detailed insights and metrics for @fordaudiovideo/guacamole-gateway-client

Other packages similar to @fordaudiovideo/guacamole-gateway-client

@fordaudiovideo/guacamole-common-ts

0.2.3

Guacamole TypeScript definitions as a NPM module for use with guacamole-gateway-client

@fordaudiovideo/guacamole-gateway-client

0.2.2

2.83 MB

1,133

Installations

npm install @fordaudiovideo/guacamole-gateway-client

Developer Guide

BETA

Typescript

No

Module System

ESM

Node Version

20.10.0

NPM Version

9.2.0 Releases

Unable to fetch releases

Contributors

validate.email 🚀

Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.

Download Statistics

Total Downloads

1,133

Last Day

Last Week

Last Month

Last Year

1,133

Maintainers

Package Meta Information

Latest Version

0.2.2

Package Id

@fordaudiovideo/guacamole-gateway-client@0.2.2

Unpacked Size

2.83 MB

Size

515.89 kB

File Count

135

NPM Version

9.2.0

Node Version

20.10.0

Published on

Oct 29, 2024

Total Downloads

Cumulative downloads

Total Downloads

1,133

Last Day

Compared to previous day

Last Week

388.9%

Compared to previous week

Last Month

Compared to previous month

Last Year

1,133

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

tslib

Peer Dependencies

screenfull socket.io-client @fordaudiovideo/guacamole-common-ts ngx-drag-drop

#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.

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: Chart

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

No vulnerabilities found.

No security vulnerabilities found.