Angular+Ionic连接CloudMQTT时WebSocket握手失败问题

嘿，遇到Error during Websocket handshake: net::ERR_CONNECTION_RESET这个错误，大多是连接配置、网络或者代码逻辑层面的问题，咱们一步步来排查解决：

1. 先核对CloudMQTT的基础配置 #

• 端口与协议必须匹配：你用的端口是34804，得先去CloudMQTT控制台确认这个端口对应的协议是ws（明文）还是wss（加密）。如果是加密连接，要在配置里加上protocol: 'wss'，而且确保端口对应正确——CloudMQTT的wss端口一般和ws端口不同，别搞混了。
• 验证凭据准确性：确认username和password是你CloudMQTT实例的专属凭据，不是你的CloudMQTT账号密码！去控制台的「Credentials」页面就能看到正确的用户名和密码，输错的话直接连不上。

2. 修复代码里的小问题 #

看你的组件代码，有几个细节需要调整：

• 条件判断逻辑错误：
  原代码里的if ( this.sensorName === 'Humidity' || 'Temperature' )写法不对，'Temperature'本身是真值，这个条件永远为true，应该改成：

  if ( this.sensorName === 'Humidity' || this.sensorName === 'Temperature' )
  

• 初始化数组避免报错：
  values数组没有初始化，直接调用push会抛出错误，给它一个初始值：

  public values: any[] = [];
  

• 显式触发连接（可选）：
  如果你用的是ngx-mqtt库，默认会自动连接，但有时候配置加载慢或者有问题，建议在ngOnInit里手动触发连接：

  ngOnInit() {
    this.sensorName = this.actRoute.snapshot.paramMap.get('sensorName');
    console.log('I am trying to connect!');
    // 手动触发连接
    this.mqttService.connect(MQTT_SERVICE_OPTIONS);
    this.subscription = this.mqttService.observe('sensors/' + this.sensorName).subscribe((message: IMqttMessage) => {
      // ... 你的解析逻辑
    });
  }
  

3. 排查网络与跨域问题 #

• 配置CORS允许列表：
  浏览器环境下WebSocket连接受CORS限制，去CloudMQTT控制台的「Security」页面，把你的应用域名（比如本地开发的http://localhost:8100，或者生产环境域名）添加到CORS允许列表里，不然浏览器会直接拦截连接。
• 排除防火墙/代理干扰：
  本地开发时，试试切换到手机热点或者其他网络，排除公司防火墙、路由器代理拦截WebSocket请求的可能。
• 检查SSL证书（如果用wss）：
  如果用加密的wss协议，确保CloudMQTT的SSL证书是可信的——CloudMQTT用的是正规CA签发的证书，一般没问题，但如果是自定义证书，Ionic的Webview可能会拒绝连接。

4. 调试技巧 #

• 打开浏览器开发者工具的「Network」标签，过滤「WS」请求，查看握手请求的详细信息（比如请求头、响应状态），能帮你快速定位是配置错误还是网络问题。
• 给MQTT服务添加错误监听，获取更详细的错误信息：

  this.mqttService.onError.subscribe(error => {
    console.error('MQTT连接错误详情:', error);
  });
  

内容的提问来源于stack exchange，提问作者Nutella123