Блог

Я пытаюсь разрешить пользователю указывать значения подключения для подключения к брокеру mosquitto через модальный диалог с угловым материалом через форму, вместо жесткого кодирования значений в app.module.ts.

До сих пор я могу подключиться к брокеру, жестко закодировав значения в файл app.module.ts. Я могу просматривать все мои темы MQTT без каких-либо проблем.

приложение.модуль.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.

Вот моя попытка:

брокер-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()
}
 

As you can see here I have a seperate Angular component that contains a form group that contains each of the form inputs to connect to a broker.

When the submit button on the form is pressed the connectToBroker() function is invoked.

In this function I’ve attempted to make use of the built in connect() method for the MqttService which, with the very little documentation available for ngx-mqtt I’ve found, should allow you to manually connect to a broker by passing in values that are of the format of a IMqttServiceOptions object, much like I did with the MQTT_SERVICE_OPTIONS constant in app.module.ts.

Однако это, похоже, не работает, так как я никогда не вижу значения сведений о своей теме, и по какой-то причине я получаю сообщения об ошибках, в которых говорится, что я не могу подключиться к локальному хосту, даже если указан номер порта. В моем случае номер порта 9001, который также настроен для работы с веб-сайтами брокера mqtt. Поэтому я не могу понять, почему он пытается подключиться к локальному хосту.

Этого не происходит, когда я жестко вводлю одинаковые значения в константу MQTT_SERVICE_OPTIONS в app.module.ts.

Я также намеренно ввел неправильный IP-адрес брокера (в свою форму), что дает мне ту же ошибку, что и ниже, но в нем говорится, что он не может подключиться к фактическому IP-адресу. Но если я передам правильный IP-адрес брокера, он выдаст мне ошибку localhost, как показано ниже: