chore(tryme): configure Solace Message Client using `provideSolaceMes…

…sageClient` Try Me application now uses `provideSolaceMessageClient` instead of the deprecated `connect` and `disconnect` methods of `SolaceMessageClient`. The default test user `angular` has been replaced with `public`.
solacecommunity · Jan 27, 2025 · 5d81bb5 · 5d81bb5
1 parent bcb6245
commit 5d81bb5
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 34 deletions.
diff --git a/apps/solace-message-client-testing-app/src/app/login/login.component.ts b/apps/solace-message-client-testing-app/src/app/login/login.component.ts
@@ -53,7 +53,7 @@ export class LoginComponent {
     [URL]: this._formBuilder.control('wss://public.messaging.solace.cloud:443', {validators: Validators.required, nonNullable: true}),
     [VPN_NAME]: this._formBuilder.control('public', {validators: Validators.required, nonNullable: true}),
     [AUTHENTICATION_SCHEME]: this._formBuilder.control(AuthenticationScheme.BASIC),
-    [USER_NAME]: this._formBuilder.control('angular'),
+    [USER_NAME]: this._formBuilder.control('public'),
     [PASSWORD]: this._formBuilder.control('public'),
     [REAPPLY_SUBSCRIPTIONS]: this._formBuilder.control(true),
     [RECONNECT_RETRIES]: this._formBuilder.control(-1),

diff --git a/apps/solace-message-client-testing-app/src/app/try-me/try-me.component.html b/apps/solace-message-client-testing-app/src/app/try-me/try-me.component.html
@@ -6,23 +6,11 @@
           title="Click to see session properties">
     @if (solaceMessageClient.connected$ | async) {
       Connected to {{sessionConfig.url}} / {{sessionConfig.vpnName}}
-    }
-    @else {
+    } @else {
       Disconnected from the Solace Message Broker
     }
   </button>
 
-  @if (solaceMessageClient.connected$ | async) {
-    <button mat-stroked-button (click)="onDisconnect()" matTooltip="Disconnect">
-      <mat-icon>wifi</mat-icon>
-    </button>
-  }
-  @else {
-    <button mat-stroked-button (click)="onConnect()" matTooltip="Connect">
-      <mat-icon>wifi_off</mat-icon>
-    </button>
-  }
-
   @if (sessionConfig.authenticationScheme === AuthenticationScheme.OAUTH2) {
     <button mat-stroked-button (click)="onUpdateAccessToken()">
       <mat-icon matTooltip="Provide OAuth 2.0 access token" class="material-icons-outlined">pin</mat-icon>
@@ -33,12 +21,14 @@
   </button>
 </header>
 
-<sci-sashbox>
-  <ng-template sciSash>
-    <app-publisher/>
-  </ng-template>
+@if (solaceMessageClient.connected$ | async) {
+  <sci-sashbox>
+    <ng-template sciSash>
+      <app-publisher/>
+    </ng-template>
 
-  <ng-template sciSash>
-    <app-subscribers/>
-  </ng-template>
-</sci-sashbox>
+    <ng-template sciSash>
+      <app-subscribers/>
+    </ng-template>
+  </sci-sashbox>
+}
diff --git a/apps/solace-message-client-testing-app/src/app/try-me/try-me.component.ts b/apps/solace-message-client-testing-app/src/app/try-me/try-me.component.ts
@@ -1,4 +1,4 @@
-import {Component, inject} from '@angular/core';
+import {Component, createEnvironmentInjector, EnvironmentInjector, inject} from '@angular/core';
 import {SolaceMessageClient, SolaceMessageClientConfig} from '@solace-community/angular-solace-message-client';
 import {MatSnackBar} from '@angular/material/snack-bar';
 import {SessionPropertiesComponent} from '../session-properties/session-properties.component';
@@ -14,6 +14,7 @@ import {PublisherComponent} from '../publisher/publisher.component';
 import {SubscribersComponent} from '../subscribers/subscribers.component';
 import {MatButtonModule} from '@angular/material/button';
 import {MatTooltipModule} from '@angular/material/tooltip';
+import {provideSolaceMessageClient} from '../../../../../projects/solace-message-client/src/lib/solace-message-client.provider';
 
 @Component({
   selector: 'app-try-me',
@@ -29,6 +30,14 @@ import {MatTooltipModule} from '@angular/material/tooltip';
     PublisherComponent,
     SubscribersComponent,
   ],
+  providers: [
+    {
+      provide: SolaceMessageClient, useFactory: () => {
+        const environment = createEnvironmentInjector([provideSolaceMessageClient(SessionConfigStore.load())], inject(EnvironmentInjector));
+        return environment.get(SolaceMessageClient);
+      },
+    },
+  ],
 })
 export class TryMeComponent {
 
@@ -44,17 +53,6 @@ export class TryMeComponent {
     this._locationService.navigateToAppRoot({clearConnectProperties: true});
   }
 
-  public onDisconnect(): void {
-    void this.solaceMessageClient.disconnect();
-  }
-
-  public onConnect(): void {
-    this.solaceMessageClient.connect(this.sessionConfig).then(
-      () => console.log('Connected to Solace message broker'),
-      (error: unknown) => console.error('Failed to connect to Solace message broker', error),
-    );
-  }
-
   public onSessionPropertiesOpen(): void {
     this._snackBar.openFromComponent(SessionPropertiesComponent, {
       data: this.sessionConfig,