Angular ngx-mqtt – 使用用户在表单上输入的值而不是 app.module.ts 中的硬编码值连接到 mqtt 代理

Question

我试图允许用户指定连接值，通过 Angular Material Dialogue Modal 通过表单连接到 mosquitto 代理，而不是将值硬编码到 app.module.ts。

到目前为止，我可以通过将值硬编码到 app.module.ts 文件中来连接到代理。我可以毫无问题地查看所有 MQTT 主题。

app.module.ts

 import { NgModule, Input } from '@angular/core';
    import { MqttModule, IMqttServiceOptions, IMqttMessage } from "ngx-mqtt";
    import { MqttStatusClientService } from './services/mqtt-status-client.service';
    
    export const MQTT_SERVICE_OPTIONS: IMqttServiceOptions = 
    {
      hostname: '<IP ADDRESS>', 
      username: 'username', 
      password: 'password', 
      port: 9001
    };
    
    @NgModule({
    declarations: [
    AppComponent,
    HeaderComponent,
    ],
    
    imports: [
    BrowserModule,
    MqttModule.forRoot(MQTT_SERVICE_OPTIONS),
    ],
    providers: [MqttStatusClientService],
    bootstrap: [AppComponent]
    })
    export class AppModule { }

但是，我想删除这种方式的硬编码值以连接到代理，而是允许用户填写表单以输入值，然后用于连接到代理。所有这些都在它自己的独立组件中，远离 app.module.ts。

这是我的尝试：

broker-connect.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { FormBuilder } from '@angular/forms';
import { MqttService} from "ngx-mqtt";
import { MatDialog, MatDialogRef } from '@angular/material/dialog';

@Component({
selector: 'app-broker-connect',
templateUrl: './broker-connect.component.html',
styleUrls: ['./broker-connect.component.css']
})
export class BrokerConnectComponent implements OnInit 
{
  constructor(private Form: FormBuilder, private mqtt: MqttService, private    dialogRef: MatDialogRef<BrokerConnectComponent>) { }

BrokerConnectForm = this.Form.group({
brokerName: [''],
brokerUsername: [''],
brokerPassword: [''],
brokerAddress: [''],
brokerPort: ['']
});

brokerName = this.BrokerConnectForm.get('brokerName')?.value
ngOnInit(): void {}

connectToBroker() 
{
  this.mqtt.connect({username: this.BrokerConnectForm.get('brokerUsername')?.value,
  password: this.BrokerConnectForm.get('brokerPassword')?.value,
  hostname: this.BrokerConnectForm.get('brokerAddress')?.value,
  port: this.BrokerConnectForm.get('brokerPort')?.value})

  this.dialogRef.close()
}

正如您在这里看到的，我有一个单独的 Angular 组件，其中包含一个表单组，其中包含连接到代理的每个表单输入。

按下表单上的提交按钮时，将调用 connectToBroker() 函数。

在此函数中，我尝试使用 MqttService 的内置 connect() 方法，由于我发现可用于 ngx-mqtt 的文档很少，应该允许您手动连接到通过传入 IMqttServiceOptions 对象格式的值来创建代理，就像我对 app.module.ts 中的 MQTT_SERVICE_OPTIONS 常量所做的那样。

但是，这似乎不起作用，因为我从未看到我的主题详细值，并且由于某种原因，我收到错误消息，提示我无法连接到本地主机，即使指定了端口号。在我的例子中，端口号是9001，它也配置为通过 mqtt 代理上的 websocket 运行。所以我不明白为什么它试图连接到本地主机。

当我将完全相同的值硬编码到app.module.ts中的MQTT_SERVICE_OPTIONS常量时，不会发生这种情况。

我还故意输入了错误的代理 IP 地址（在我的表单中），这给了我与下面相同的错误，但它说它无法连接到实际的 IP 地址。但如果我传入正确的代理 IP 地址，它会给我如下所示的本地主机错误：

我不确定如何才能实现这一目标，我能找到的有关 ngx-mqtt 的文档非常少。我确实尝试简单地将用户输入的值直接传递到 app.module.ts 中的 MQTT_SERVICE_OPTIONS 常量，但是将值从模式对话框传递到角度应用程序的其他部分似乎很困难，我还没有这样做成功做到了这一点。

简而言之，我试图在提交表单按钮时通过用户输入连接到远离 app.module.ts 的单独组件中的 mqtt 代理，而不是对 app 中的值进行硬编码。模块.ts.

这里是 ngx-mqtt 文档的链接。

Answer 1

我认为使用该库的正确方法是最初为根配置 MQTT

MqttModule.forRoot({...})

配置非常重要

connectOnCreate: false

之后就可以注射了

mqttService: MqttService

在任何组件/服务中并通过

与自定义选项连接

this.mqttService.connect({...});

然后与初始配置合并。

只是偶然发现了这个，所以不能保证它真的有效，但到目前为止对我来说确实有效