无法通过angular8中的ngx MQTT连接到MQTT代理

无法通过angular8中的ngx MQTT连接到MQTT代理,mqtt,angular8,Mqtt,Angular8,无论我做什么,我都无法通过angular应用程序中的websocket连接到mqtt代理(在chrome和firefox中尝试)。 为了简单起见,我在主题/gat/38/openReservationRequests上发布了一些数据 关于如何使用ngx mqtt在angular中连接到mqtt,我遵循了这一点,但对我来说它不起作用 在我的应用程序中: 我已经安装了模块 npm install ngx-mqtt --save 我已经添加了配置,并在我的app.module.ts ... expo

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

关于如何使用ngx mqtt在angular中连接到mqtt,我遵循了这一点,但对我来说它不起作用

在我的应用程序中:

我已经安装了模块

npm install ngx-mqtt --save
我已经添加了配置,并在我的
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),
    ...
  ],
...
我正在
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\u服务\u选项中指定
clientId
,我仍然会得到相同的错误

如果我将
协议
更改为
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证书,但没有任何更改

由于我设置了正确的路径,问题得以解决。

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

export const MQTT_SERVICE_OPTIONS: IMqttServiceOptions = {
  connectOnCreate: false,
  hostname: 'broker.hivemq.com',
  port: 8000,
  path: '/mqtt'
};
appcomponent.ts(目前位于ngOnInit内部)


我已经检查了您共享的有问题的代码片段

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

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

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

 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));
        });