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 30, 2025 · d3a1d2d · d3a1d2d
1 parent 3195914
commit d3a1d2d
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 36 deletions.
diff --git a/apps/solace-message-client-testing-app/src/app/app.config.ts b/apps/solace-message-client-testing-app/src/app/app.config.ts
@@ -1,8 +1,6 @@
 import {ApplicationConfig, EnvironmentProviders, makeEnvironmentProviders} from '@angular/core';
 import {provideRouter, withHashLocation} from '@angular/router';
 import {routes} from './app.routes';
-import {provideSolaceMessageClient} from '@solace-community/angular-solace-message-client';
-import {SessionConfigStore} from './session-config-store';
 import {MAT_FORM_FIELD_DEFAULT_OPTIONS} from '@angular/material/form-field';
 import {provideAnimations} from '@angular/platform-browser/animations';
 
@@ -13,7 +11,6 @@ export const appConfig: ApplicationConfig = {
   providers: [
     provideRouter(routes, withHashLocation()),
     provideAnimations(),
-    provideSolaceMessageClient(SessionConfigStore.load()),
     provideMaterialDefaults(),
   ],
 };

diff --git a/apps/solace-message-client-testing-app/src/app/app.routes.ts b/apps/solace-message-client-testing-app/src/app/app.routes.ts
@@ -3,12 +3,14 @@ import {LoginComponent} from './login/login.component';
 import {TryMeComponent} from './try-me/try-me.component';
 import {SessionConfigStore} from './session-config-store';
 import {inject} from '@angular/core';
+import {provideSolaceMessageClient} from '@solace-community/angular-solace-message-client';
 
 export const routes: Routes = [
   {
     path: '',
     canActivate: [requireLogin],
     component: TryMeComponent,
+    providers: [provideSolaceMessageClient(SessionConfigStore.load())],
   },
   {
     path: 'login',

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
@@ -44,17 +44,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,