Wildcard topics not working when using MQTT.js over websockets from inside an Angular app

[abdullahgulraiz]

Hi,
I'm using the following code to consume messages from AWS IoT Core message broker in my angular app:

import { Injectable } from '@angular/core';
import mqtt from 'mqtt';
import { Observable, Subject, map } from 'rxjs';
import { environment } from 'src/environments/environment';
import { buildQueryParams } from '...';
import { ToastService } from '...';

@Injectable({
  providedIn: 'root',
})
export class WebSocketsService {
  private client: mqtt.MqttClient | null = null;
  private topicObservables: { [topic: string]: Subject<string> } = {};
  private readonly maxRetries = 3;
  private retryCount = 0;
  private readonly clientId: string;

  constructor(private readonly toastService: ToastService) {
    this.clientId = this.getClientId();
    this.initializeClient();
  }

  private getClientId(): string {
    try {
      const idTokenClaims = JSON.parse(localStorage.getItem('id_token_claims_obj')!);
      return idTokenClaims.sub;
    } catch (error) {
      console.error('Error while generating client Id for AWS IoT Core connection', error);
    }
    const randomResultMultiplier = 100000;
    return `${Math.floor(Math.random() * randomResultMultiplier)}`;
  }

  private getAccessToken(): string {
    return localStorage.getItem('access_token') ?? '';
  }

  private initializeClient() {
    const connectUrlQueryString = buildQueryParams({
      'x-amz-customauthorizer-name': environment.iotCoreAuthorizerName,
    });
    const connectTimeoutValue = 30000;
    const options: mqtt.IClientOptions = {
      clientId: this.clientId,
      keepalive: 60,
      port: 443,
      protocol: 'wss',
      protocolVersion: 5,
      clean: true,
      reconnectPeriod: 1000,
      connectTimeout: connectTimeoutValue,
      host: environment.iotCoreEndpoint,
      path: `/mqtt?${connectUrlQueryString}`,
      manualConnect: true,
      transformWsUrl: (
        url: string,
        options: mqtt.IClientOptions,
        client: mqtt.MqttClient
      ): string => {
        // provide updated access token on refresh
        client.options.username = this.getAccessToken();
        return url;
      },
    };
    this.client = mqtt.connect(options);

    // handle incoming messages
    this.client.on('message', (topic, payload) => {
      const topicName = topic.toString();
      const payloadString = payload.toString();
      if (this.topicObservables[topicName]) {
        this.topicObservables[topicName].next(payloadString);
      }
    });

    // handle connect
    this.client.on('connect', () => {
      this.retryCount = 0;
    });

    // handle errors
    this.client.on('error', error => {
      console.error('MQTT error:', error);
    });

    // handle disconnection
    this.client.on('disconnect', () => {
      this.cleanUpTopicObservables();
    });

    // handle connection close
    this.client.on('close', () => {
      if (this.retryCount >= this.maxRetries) {
        console.error('Retry count exceeded max retries, stopping re-connection attempts');
        this.client?.end();
        this.toastService.createErrorToast(
          $localize`Failed to connect to backend for fetching live updates`
        );
      }
      this.cleanUpTopicObservables();
    });

    // handle reconnection
    this.client.on('reconnect', () => {
      this.retryCount++;
    });
  }

  private subscribeToTopic(topic: string): Subject<string> {
    if (!this.client?.connected) {
      this.client?.connect();
    }
    this.client?.subscribe(topic);
    if (!this.topicObservables[topic]) {
      this.topicObservables[topic] = new Subject<string>();
    }
    return this.topicObservables[topic];
  }

  subscribeToJsonTopic<T>(topic: string): Observable<T> {
    return this.subscribeToTopic(topic)
      .asObservable()
      .pipe(map(jsonString => JSON.parse(jsonString) as T));
  }

  unsubscribeFromTopic(topic: string): void {
    this.client?.unsubscribe(topic);
    if (this.topicObservables[topic]) {
      this.topicObservables[topic].complete();
      delete this.topicObservables[topic];
    }
    if (Object.keys(this.topicObservables).length === 0) {
      this.client?.end();
    }
  }

  private cleanUpTopicObservables() {
    Object.keys(this.topicObservables).forEach(topic => {
      this.topicObservables[topic].complete();
      delete this.topicObservables[topic];
    });
  }
}

I'm able to subscribe to regular topics and receive updates. However, wildcard topics don't work with this configuration. Is it supported? If yes, am I configuring something wrongly?