Ionic5(Angular v12.1.1)使用ngx-mqtt连Mosquitto报CONNACK(0,5)如何解决

错误原因说明 #

你遇到的CONNACK返回码5代表连接未授权，这是Mosquitto 2.0及以上版本默认安全策略限制导致的，同时配置还存在路径不匹配的问题，以下是完整修复步骤：

Mosquitto 2.0+默认禁止所有匿名连接，且websocket默认监听根路径，修改你的websockets.conf为以下内容：

port 1883
# 允许普通TCP端口匿名连接
allow_anonymous true

listener 1884
protocol websockets
# 允许websocket端口匿名连接
allow_anonymous true

修改后重启Mosquitto，启动时建议加参数开启详细日志方便排查：
mosquitto -c websockets.conf -v

你当前配置中path: '/mqtt'和Mosquitto默认的websocket根路径不匹配，修改app.module.ts中的MQTT配置：

const MQTT_SERVICE_OPTIONS: IMqttServiceOptions = {
  connectOnCreate: false,
  hostname: 'localhost',
  port: 1884,
  // 路径改为Mosquitto默认的根路径
  path: '/',
  protocol: 'ws'
};

MQTT连接是异步操作，需要等连接成功后再执行订阅操作，修改home.page.ts代码：

/* eslint-disable no-underscore-dangle */
import { Component, OnDestroy, OnInit } from '@angular/core';
import { IMqttMessage, MqttService } from 'ngx-mqtt';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit, OnDestroy {

  subscription: Subscription;
  // 新增连接状态监听
  connectSub: Subscription;

  constructor(private mqttService: MqttService) {}

  ngOnInit() {
    // 监听连接成功事件
    this.connectSub = this.mqttService.onConnect.subscribe(() => {
      console.log('MQTT连接成功');
    });
    // 监听连接错误事件
    this.mqttService.onError.subscribe((err) => {
      console.error('MQTT连接错误', err);
    });
  }

  subscribeToTopic() {
    if (!this.mqttService.isConnected()) {
      console.warn('请先连接MQTT服务');
      return;
    }
    console.log('开始订阅主题');
    this.subscription = this.mqttService.observe('mqtt/demo').subscribe((message: IMqttMessage) => {
      // 将二进制payload转为字符串输出
      console.log('收到消息:', message.payload.toString());
    }, (e)=> {
      console.log('订阅错误', e);
    });
  }

  connect() {
    // 不需要重复传配置，forRoot已经全局注入了
    this.mqttService.connect();
  }

  disconnect() {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
    this.mqttService.disconnect();
  }

  unSubscribe() {
    if (this.subscription) {
      this.subscription.unsubscribe();
      console.log('取消订阅成功');
    }
  }

  ngOnDestroy() {
    // 页面销毁时清理所有订阅避免内存泄漏
    if (this.connectSub) {
      this.connectSub.unsubscribe();
    }
    this.disconnect();
  }
}

1. 确保Mosquitto启动后没有报错，1884端口正常监听
2. 执行ionic serve启动应用，先点击连接按钮，Mosquitto日志会打印新客户端连接成功的记录
3. 点击订阅按钮，之后用任意MQTT客户端向mqtt/demo主题发消息，浏览器控制台会打印收到的消息内容

如果是打包到真机/模拟器运行，需要将hostname改为运行Mosquitto的电脑的局域网IP，确保手机和电脑在同一网段。

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