无法通过 Angular8 中的 ngx-mqtt 连接到 MQTT 代理

Question

无论我做什么，我都无法在我的 Angular 应用程序中通过 websocket 连接到 mqtt 代理（在 chrome 和 firefox 中尝试）。 为简单起见，我使用HiveMQ broker，我已经在主题/gat/38/openReservationRequests 上发布了一些数据

我已经关注了这个medium article 如何使用 ngx-mqtt 以角度连接到 mqtt，但对我来说它不起作用。

在我的应用中：

我已经安装了模块

npm install ngx-mqtt --save

我已添加配置并在我的app.module.ts 中设置模块forRoot

...
export const MQTT_SERVICE_OPTIONS: IMqttServiceOptions = {
  connectOnCreate: true,
  hostname: 'broker.hivemq.com',
  port: 8000,
  path: '/gat/38/openReservationRequests',
  protocol: 'ws',
};

...
imports: [
    ...
    MqttModule.forRoot(MQTT_SERVICE_OPTIONS),
    ...
  ],
...

我在app.component.ts 的ngOnInit 中执行这个函数

...
import { IMqttMessage, MqttConnectionState, MqttService } from 'ngx-mqtt';
...

constructor(private mqttService: MqttService) {
    this.mqttService.state.subscribe((s: MqttConnectionState) => {
      const status = s === MqttConnectionState.CONNECTED ? 'CONNECTED' : 'DISCONNECTED';
      this.status.push(`Mqtt client connection status: ${status}`);
    });
  }

ngOnInit() {

    this.subscription = this.mqttService
                            .observe('/gat/38/openReservationRequests')
                            .subscribe((message: IMqttMessage) => {
                              this.msg = message;
                              console.log('msg: ', message);
                              console.log('Message: ' + message.payload.toString() + 'for topic: ' + message.topic);
                              console.log('subscribed to topic: ' + /gat/38/openReservationRequests);
                            });

}

但我总是收到此错误：

core.js:6014 ERROR TypeError: Cannot read property 'resubscribe' of undefined
    at MqttClient.subscribe (mqtt.min.js:1)
    at mqtt.service.js:211
    at Observable._subscribe (using.js:8)
    at Observable._trySubscribe (Observable.js:42)
    at Observable.subscribe (Observable.js:28)
    at FilterOperator.call (filter.js:13)
    at Observable.subscribe (Observable.js:23)
    at Observable.connect (ConnectableObservable.js:30)
    at RefCountOperator.call (refCount.js:17)
    at Observable.subscribe (Observable.js:23)

mqtt.min.js:1 WebSocket connection to 'ws://broker.hivemq.com:8000/gat/38/openReservationRequests' failed: Connection closed before receiving a handshake response

如果我在MQTT_SERVICE_OPTIONS 中指定clientId，我仍然会遇到同样的错误。

如果我将protocol 更改为wss，我会得到一个不同的错误：

core.js:6014 ERROR TypeError: Cannot read property 'resubscribe' of undefined
    at MqttClient.subscribe (mqtt.min.js:1)
    at mqtt.service.js:211
    at Observable._subscribe (using.js:8)
    at Observable._trySubscribe (Observable.js:42)
    at Observable.subscribe (Observable.js:28)
    at FilterOperator.call (filter.js:13)
    at Observable.subscribe (Observable.js:23)
    at Observable.connect (ConnectableObservable.js:30)
    at RefCountOperator.call (refCount.js:17)
    at Observable.subscribe (Observable.js:23)

mqtt.min.js:1 WebSocket connection to 'wss://broker.hivemq.com:8000/gat/38/openReservationRequests' failed: Error in connection establishment: net::ERR_CONNECTION_CLOSED

如果我在观察主题之前尝试在app.component.ts ngOnInit 中手动连接：

this.mqttService.connect({
  hostname: 'broker.hivemq.com',
  port: 8000,
  path: '/gat/38/openReservationRequests',
  clientId: '34er23qwrfq42w3' //those are just random digits
});

我仍然得到上面的错误。 对我来说，连接一些内部组件（用户通过身份验证后可访问）是理想的，因为我将拥有我的私人 mqtt 代理，并且主题将取决于记录的用户信息。

我已经尝试了带有/不带有 cliendId 等的协议的任何组合，但此时我不知道出了什么问题。我已经多次完全重新编译了我的应用程序，我尝试在我的测试服务器上发布它，它有一个 ssl 证书但没有任何改变。

感谢@Anant Lalchandani我设置了正确的路径。

另一个问题是“/mytopic”和“mytopic”确实是两个不同的主题，我也用错了。 这是我的代码，已更新： app.module.ts

export const MQTT_SERVICE_OPTIONS: IMqttServiceOptions = {
  connectOnCreate: false,
  hostname: 'broker.hivemq.com',
  port: 8000,
  path: '/mqtt'
};

appcomponent.ts（暂时在 ngOnInit 中）

 this.mqttService.connect({
      hostname: 'broker.hivemq.com',
      port: 8000,
      path: '/mqtt',
      clientId: '1234e3qer23rf'
    });

 this.mqttService.onConnect
        .subscribe(
          connack=> {
            console.log('CONNECTED');
            console.log(connack);
          }
        );

this.mqttService.observe('gat/38/openReservationRequests')
        .subscribe((message: IMqttMessage) => {
          this.msg = message;
          console.log(new TextDecoder('utf-8').decode(message.payload));
        });

Answer 1

我已经检查了你分享的代码 sn-ps。

在您的 app.module.ts 中，路径值应为“/mqtt”。您已在此处将主题设置为路径的值。该主题只能订阅/发布。由于您在连接到 websocket 时使用主题作为路径值，因此您的应用程序首先将无法连接到 websocket。

我们需要使用 /mqtt 作为路径的原因是它指定您通过 WebSocket 协议发送 MQTT 消息。

HiveMQ 本身的文档在其示例中声明将路径用作“/mqtt”。您可以查看文档here。