AmazomMQ and Pub/Sub, MqttOverWSProvider - Error forming connection Error: AMQJS0013E

[Nikola-Milovic]

Before opening, please confirm:

• [X] I have searched for duplicate or closed issues and discussions.
• [X] I have read the guide for submitting bug reports.
• [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React

Amplify APIs

PubSub

Amplify Categories

auth

Describe the bug

When trying to connect with AmazonMQ using the MqttOverWSProvider and Pub/Sub I keep experiencing the same error

[DEBUG] 57:11.670 MqttOverWSProvider - Error forming connection Error: AMQJS0013E Invalid argument wss://b-dxxxxx-70d9-406b-axxc-xxxxxdfa15-1.mq.eu-central-1.amazonaws.com:61619 for host.
    at new Client4 (paho-mqtt.js:2007:12)
    at MqttOverWSProvider2.<anonymous> (MqttOverWSProvider.ts:188:18)
    at step (tslib.es6.js:100:23)
    at Object.next (tslib.es6.js:81:53)
    at tslib.es6.js:74:71
    at new Promise (<anonymous>)
    at __awaiter (tslib.es6.js:70:12)
    at MqttOverWSProvider2.newClient (MqttOverWSProvider.ts:182:3)
    at MqttOverWSProvider2.<anonymous> (MqttOverWSProvider.ts:236:30)
    at step (tslib.es6.js:100:23)

Expected behavior

I would connect and use Pub/Sub as expected

Reproduction steps

Create an ActiveMQ broker on AmazonMQ and try to connect to it

import { CfnOutput, Fn } from 'aws-cdk-lib';
import { Construct } from 'constructs';
import { aws_iam as iam, aws_secretsmanager as secman, aws_amazonmq as amazonmq } from 'aws-cdk-lib';
import { isDev } from './utils';

type ActiveMQConstructProps = {
  authenticatedRole: iam.IRole;
};

export class ActiveMQConstruct extends Construct {
  constructor(scope: Construct, id: string, props: ActiveMQConstructProps) {
    super(scope, id);

    const { authenticatedRole } = props;

    const password = new secman.Secret(this, 'BrokerAdminPassword', {
      generateSecretString: { excludePunctuation: true },
      description: 'Password for the Message Broker User',
    });

    const user: amazonmq.CfnBroker.UserProperty = {
      consoleAccess: true,
      username: 'admin',
      password: password.toString(),
    };

    const mqBroker = new amazonmq.CfnBroker(this, 'ActiveMQ', {
      autoMinorVersionUpgrade: true,
      brokerName: 'MyActiveMQ',
      storageType: 'in-memory', // havent tested this option, you can maybe remove it
      maintenanceWindowStartTime: {
        dayOfWeek: 'WEDNESDAY',
        timeOfDay: '14:00',
        timeZone: 'Europe/London',
      },
      deploymentMode: 'SINGLE_INSTANCE',
      engineType: 'ActiveMQ', // Change engine type to ActiveMQ
      engineVersion: '5.15.10', // Use a compatible ActiveMQ version
      hostInstanceType: 'mq.t3.micro',
      publiclyAccessible: true,
      users: [user],
    });
  }
}

Code Snippet

import { MqttOverWSProvider } from "@aws-amplify/pubsub";
import { Amplify, Analytics, Hub, Logger, PubSub } from "aws-amplify";

Logger.LOG_LEVEL ="DEBUG" 

export const configureAmplify = async () => {
    try {
        Amplify.configure({
            Auth: {
                region: env.AWS_REGION,
                userPoolId: env.AWS_COGNITO_USER_POOL_ID,
                userPoolWebClientId: env.AWS_COGNITO_ADMIN_USER_POOL_CLIENT_ID,
                identityPoolId: env.AWS_COGNITO_IDENTITY_POOL_ID,
                identityPoolRegion: env.AWS_REGION,
                mandatorySignIn: true,
            },
        });

        // https://github.com/aws-amplify/amplify-js/issues/11255#issuecomment-1510430059
        Amplify.register(PubSub);
        Amplify.addPluggable(
            new MqttOverWSProvider({
                aws_pubsub_endpoint: env.AWS_MQTT_ENDPOINT,
                aws_region: env.AWS_REGION,
            }),
        );

    } catch (error) {
        console.error("error occured during amplify setup", error);
    }
}

And in my main.tsx for my Vite website

import {configureAmplify} from "@admin/lib/amplify";

configureAmplify()

ReactDOM.createRoot(document.getElementById("root")!).render(
    <React.StrictMode>
        <BrowserRouter>
            <Main />
        </BrowserRouter>
    </React.StrictMode>,
);

Additional information and screenshots

Not sure which one of these should I use, I tried them all

The broker is publicly available

[cwomack]

@Nikola-Milovic, appreciate your patience on this issue for how it took us to get back. Is this still occurring and do you have a minimal sample repo you can share to reproduce this?

[Nikola-Milovic]

@cwomack i can try recreating it when I get the time, its been a while since I tried using it

[cwomack]

@Nikola-Milovic, understandable. I'll be building one on my side as well using v6 and double checking the documentation and steps at this point. Trying to determine if this is specific to v5, v6, a documentation miss, etc.