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

问题描述

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

我已经关注了这篇关于如何使用 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),
    ...
  ],
...

我在ngOnInitof 中执行这个函数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
});

我仍然收到上面的错误。对我来说，连接一些内部组件（用户通过身份验证后可访问）是理想的，因为我将拥有我的私人 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));
        });

标签： mqttangular8

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

问题描述

解决方案

推荐阅读