mqtt - 无法通过 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

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

...
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),
    ...
  ],
...

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

...
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

如果我指定 clientId内 MQTT_SERVICE_OPTIONS我仍然遇到同样的错误。

如果我更改 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
});

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

我已经尝试过使用/不使用 cliendId 等协议(protocol)的任何组合，但此时我不知道出了什么问题。我已经多次完全重新编译我的应用程序，我尝试将它发布到我的测试服务器上，它有一个 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

我已经检查了您分享的相关代码片段。

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

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

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