(F) Test signalR on front-end

Clinics.Frontend/package.json

@@ -19,6 +19,7 @@
     "@angular/platform-browser-dynamic": "^18.1.0",
     "@angular/router": "^18.1.0",
     "@fortawesome/fontawesome-free": "^6.6.0",
+    "@microsoft/signalr": "^8.0.7",
     "@ng-bootstrap/ng-bootstrap": "^17.0.0",
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.2",

Clinics.Frontend/src/app/app-routing.module.ts

@@ -5,6 +5,7 @@ import { RoleGuard } from './services/authentication/guards/role-guard';
 import { Roles } from './classes/Authentication/roles';
 import { ForbiddenComponent } from './components/errors/forbidden/forbidden.component';
 import { NotFoundComponent } from './components/errors/not-found/not-found.component';
+import { TestSignalRComponent } from './test-signal-r/test-signal-r.component';
 
 const routes: Routes = [
   {
@@ -25,6 +26,16 @@ const routes: Routes = [
     canActivate: [RoleGuard],
     data: { role: Roles.NotRegistered }
   },
+  
+  // #region Testing SignalR
+  {
+    path: 'testing',
+    component: TestSignalRComponent,
+    canActivate: [RoleGuard],
+    data: { role: Roles.NotRegistered }
+  },
+  // #endregion
+  
   // Everything else
   {
     path: '**',

Clinics.Frontend/src/app/app.module.ts

@@ -18,6 +18,8 @@ import { AuthenticationService } from './services/authentication/authentication.
 import { AuthenticationInterceptor } from './services/authentication/interceptor/authentication.interceptor';
 import { ForbiddenComponent } from './components/errors/forbidden/forbidden.component';
 import { NotFoundComponent } from './components/errors/not-found/not-found.component';
+import { TestSignalRComponent } from './test-signal-r/test-signal-r.component';
+import { SignalRService } from './notifications/signal-r.service';
 
 
 @NgModule({
@@ -39,6 +41,7 @@ import { NotFoundComponent } from './components/errors/not-found/not-found.compo
   providers: [
     AuthenticationService,
     { provide: HTTP_INTERCEPTORS, useClass: AuthenticationInterceptor, multi: true},
+    SignalRService
   ],
 
   // components and directives that belong to this module
@@ -52,7 +55,8 @@ import { NotFoundComponent } from './components/errors/not-found/not-found.compo
     HomeComponent,
     LoginFormComponent,
     ForbiddenComponent,
-    NotFoundComponent
+    NotFoundComponent,
+    TestSignalRComponent
   ],
   
   // identifies the root component that Angular should

Clinics.Frontend/src/app/notifications/signal-r.service.ts

+import { Injectable } from '@angular/core';
+import { HubConnectionBuilder } from '@microsoft/signalr';
+import * as config from '../../../config'
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SignalRService {
+
+  constructor() { }
+
+  private readonly NOTIFICATIONS_ENDPOINT: string = `${config.apiUrl}/Notifications`
+  hubConnection: signalR.HubConnection;
+
+  startConnection(): void {
+    this.hubConnection = new HubConnectionBuilder()
+      .withUrl(this.NOTIFICATIONS_ENDPOINT)
+      .build();
+
+    this.hubConnection
+      .start()
+      .then(() => {
+        console.log('Connected to signalR!')
+      })
+      .catch(err => console.error('Error while starting connection: ' + err))
+  }
+
+  endConnection(): void {
+    if (this.hubConnection) {
+      this.hubConnection
+        .stop()
+        .then(() => {
+          console.log('disonnected from signalR!');
+        })
+        .catch(err => console.error('Error while stopping connection: ' + err));
+    } else {
+      console.log('No active connection to stop.');
+    }
+  
+  }
+}
\ No newline at end of file

Clinics.Frontend/src/app/test-signal-r/test-signal-r.component.html

+<div>
+    <div class="text-center">
+        <h2>Notifications:</h2>
+        <h3>{{notification}}</h3>
+        <button (click)="onClick()" class="btn btn-outline-danger">Stop</button>
+
+    </div>
+</div>
\ No newline at end of file

Clinics.Frontend/src/app/test-signal-r/test-signal-r.component.ts

+import { Component, OnInit } from '@angular/core';
+import { SignalRService } from '../notifications/signal-r.service';
+
+@Component({
+  selector: 'app-test-signal-r',
+  templateUrl: './test-signal-r.component.html',
+  styleUrls: ['./test-signal-r.component.css']
+})
+export class TestSignalRComponent implements OnInit {
+
+  notification: string = '';
+
+  constructor(private signalR: SignalRService){}
+
+  ngOnInit(): void {
+    this.signalR.startConnection();
+    this.signalR.hubConnection.on('ReceiveNotification', (message) => {
+      this.notification = message;
+    })
+  }
+
+  onClick(): void {
+    this.signalR.endConnection();
+  }
+
+}
\ No newline at end of file