这里有什么问题 MQTT-IONIC 5

Question

带有 Angular v12.1.1 的 Ionic 5

在我的 Ionic App 文件 app.module.ts 中，我有 MQTT 服务选项，就像这样。

const MQTT_SERVICE_OPTIONS: IMqttServiceOptions = {

  connectOnCreate: false,

  hostname: 'localhost',

  port: 1884,

  path: '/mqtt',

  protocol: 'ws'

};

然后我在导入时使用此选项。

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,
    MqttModule.forRoot(MQTT_SERVICE_OPTIONS)
  ],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})

export class AppModule { }

在我的“home.page.ts”中，我使用了“ngx-mqtt”，目的是收听某个主题的消息。 代码如下。

/* eslint-disable no-underscore-dangle */
import { Component, OnDestroy, OnInit } from '@angular/core';
import { error } from 'console';
import { IMqttMessage, MQTT_SERVICE_OPTIONS, 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 {

  subscription: Subscription;

  constructor(private mqttService: MqttService) {
    //mqttService.connect(MQTT_SERVICE_OPTIONS);
    /* console.log('Teste 0');
    this.subscribeToTopic();
    console.log('Teste 4'); */
  }

  ngOnInit() { }


  subscribeToTopic() {
    console.log('Teste 2');
    this.subscription = this.mqttService.observe('mqtt/demo').subscribe((message: IMqttMessage) => {
      console.log('Mensagem:', message);
    }, (e)=> {
      console.log(e);
    });
    console.log('Teste 3');
  }

  connect() {
    console.log(this.mqttService.connect(MQTT_SERVICE_OPTIONS));
  }

  disconnect() {
    console.log(this.mqttService.disconnect());
  }

  unSubscribe() {
    console.log(this.subscription.unsubscribe());
  }

}

在我的 home.page.html 中，我有 4 个按钮来激活 home.page.ts 中的 4 个功能。

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Home
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">

  <h2>Mqtt</h2>

  <ion-button (click)="connect()">Connect</ion-button>
  <ion-button (click)="disconnect()">disconnect</ion-button>
  <ion-button (click)="subscribeToTopic()">Subscribe</ion-button>
  <ion-button (click)="unSubscribe()">unSubscribe</ion-button>

</ion-content>

---

蚊子经纪人

代理是来自 Eclipse version 2.0.14 的 mosquitto。 正在运行这样的自定义配置文件。

websockets.conf 内容：

port 1883

listener 1884
protocol websockets

---

问题

当我使用自定义配置运行 mosquitto 代理并通过 'ionic serve' 运行 ionic 应用程序时，此消息出现在运行 mosquitto 的提示符中>。

这出现在 mosquitto 提示符上：

Sending CONNACK to client-hu1m0vg4wxe (0, 5)

Client client-hu1m0vg4wxe closed its connection.

那么，我如何保持连接以订阅主题并向其发送一些消息？

Answer 1

根据您最初发布的图片中的标题栏，您似乎使用以下命令启动了 mosquitto：

mosquitto -p 1884 -v

这将启动 mosquitto 代理并要求它将默认侦听器的端口设置为 1884。如果您想按照 Web 应用程序的要求通过 WebSockets 连接 MQTT，则默认侦听器始终是本机 MQTT （并且可以从您发布的代码中的protocol: 'ws' 看到，那么您需要传递一个适当的配置文件来添加一个单独的侦听器，该侦听器被配置为通过 WebSockets 接受 MQTT。

如果您使用以下内容创建文件

port 1883

listener 1884
protocol websockets

您可以使用-c将配置文件传递给mosquitto

mosquitto -c websockets.conf