Cannot to EMQX Cloud Broker via unsecure Web Sockets - secure ws works

I'm using Angular 14 and the ngx-mqtt front-end lib.

Here's my connection string which works fine:

getEmqxCloudConnection(): IMqttServiceOptions {       
    return {
        hostname: 'xx.xx.xx.182',
        port: 8083,
        path: '/mqtt',
        clean: true, // retain
        connectTimeout: 4000,
        reconnectPeriod: 4000,
        clientId: 'HarBrowserTest1',
        username: 'myUser',
        password: 'myPass',
        protocol: 'ws',
        connectOnCreate: false,
    };
}

As per their Broker dashboard the available ports are:

Ports: 1883(mqtt), 8883(mqtts), 8083(ws), 8084(wss)

I have already imported our SSL Certificate into the EMQX Dashboard, yet when I change my conn string to port: 8084 and protocol: 'wss' - IT DOESN'T CONNECT !

They have some screenshots here showing their Client Tool, but for reason every one shows port=1883 (a mistake maybe). https://docs.emqx.com/en/cloud/latest/connect_to_deployments/mqttx.html#connection-configuration

In my Chrome browser network tab, here's what I see for the std insecure ws - A successful ws conn to the Mqtt Broker.

Here is the certificate UI which I used to imported the PEM-Encoded cert body and key:

*********** UPDATE **************

As per comment down below, binding the IP to your domain was the final solution which allowed us to connect over wss`. (e.g. emqx.my-domain.com)

This will most likely be down to the certificate you have used for the broker.

First unless you have created the certificate just right (using the correct SAN entries) that include the IP address as the principal for the certificate, then the connection will get rejected because the certificate doesn't match the hostname/IP address the broker is using to connect.

Second, if it is a self signed certificate then the browser will just reject it, unless you have manually imported the CA (or if it really is self signed the cert it's self) into the browsers trust store and marked it as trusted. The browser will NOT show you a warning and ask to accept for a WebSocket connection like it does with a webpage, it will just fail with an error in the console and nothing else.

P.S. - You should not hard code the client id in web apps, this is because client ids must be unique across ALL clients, so hardcoding it means that everybody that visits the page will use the same client id and each new connection will kick off the last one (and probably end up in a reconnect fight)

If you check the logs of EMQX, maybe you can get more helpful information.

The following are possible reasons for common TLS connection failures.

First of all, as mentioned in the previous answer, your certificate may have a domain name or IP address set as CN or SAN when it is issued, but the address you specified when connecting does not match the values of the CN and SAN fields.

In this case, the TLS client will think that the server you are connecting to may not be what you really expect, so it will refuse the connection.

We have three ways to solve it:

1. Turn off the verification of the peer certificate, if your client has this option. However, we do not recommend this as it increases the security risk.
2. Reissue a certificate that matches your server address
3. Set the SNI field (full name Server Name Indication) when the client connects, so that TLS will check whether the SNI matches the CN and SAN fields of the certificate, instead of your actual connection address.

The second possible reason is that your certificate path is incomplete, such as the lack of intermediate certificates, or the client does not specify a trusted root certificate, its keyword in the EMQX log is unknown_ca.

For more TLS error reasons, you can refer to SSL Connection Error.

In a browser environment, you should use a server certificate issued by a CA Signed than a self-signed certificate.

Self-Signed SSL Vs Trusted CA Signed SSL Certificate， see the https://cheapsslsecurity.com/blog/self-signed-ssl-versus-trusted-ca-signed-ssl-certificate/