Angular 14用ngx-mqtt连EMQX Cloud wss失败，ws可正常连接

环境与可用配置 #

使用Angular 14框架结合ngx-mqtt前端库，以下是可正常工作的WebSocket（ws）连接配置：

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,
    };
}

EMQX Cloud Broker控制台显示的可用端口：

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

问题现象 #

已在EMQX控制台上传PEM格式的SSL证书与密钥，但将连接配置修改为port: 8084和protocol: 'wss'后，无法建立连接。官方文档中的客户端工具截图均显示端口为1883，存在误导性。Chrome浏览器网络标签页确认ws连接正常，但wss连接始终失败。

解决方法 #

将EMQX Cloud的IP地址绑定到自定义域名（例如emqx.my-domain.com），修改连接配置中的hostname为该域名，保持port: 8084和protocol: 'wss'，即可成功建立WSS连接。

内容的提问来源于stack exchange，提问作者bob.mazzo