Angular 7 с конфигурацией ng2-Stompjs

Я следил за учебником на веб-странице: https://stomp-js.github.io/guide/ng2-stompjs/2018/11/04/ng2-stomp-with-angular7.html.

Все работало отлично, пока я не получил ту часть, где мне нужно экстернализовать всю конфигурацию для приложения, включая URL-адрес веб-сокета. С моим недостаточным знанием Angular мне довольно сложно добиться этого. Проблема в том, что в учебнике это жестко запрограммировано:

export const myRxStompConfig: InjectableRxStompConfig = {
// Which server?
brokerURL: 'ws://127.0.0.1:15674/ws',

и я подготовил этот класс для получения URL-адресов API:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class AppConfig {

  private config: object = null;
  private env: object = null;

  constructor(private http: HttpClient) {}

  public getConfig(key: any) {
    return this.config[key];
  }

  public getEnv(key: any) {
    return this.env[key];
  }

  getConfigs(): Promise<Object> {
    return new Promise((resolve, reject) => {
    this.http.get('assets/config/env.json').subscribe((envResponse: any) 
=> {
    this.env = envResponse;
    let request: any = null;
    switch (envResponse.env) {
      case 'production':
      {
        request = this.http.get(
          'assets/config/api.' + this.getEnv('env') + '.json'
        );
      }
        break;

      case 'development':
      {
        request = this.http.get(
          'assets/config/api.' + this.getEnv('env') + '.json'
        );
      }
        break;

      case 'default':
      {
        console.error('Environment file is not set or invalid');
        resolve(true);
      }
        break;
    }
    if (request) {
      request.subscribe(responseData => {
        this.config = responseData;
        resolve(true);
      });
    } else {
      console.error('Env config file "env.json" is not valid');
      resolve(true);
    }
  });
});
}
}

Я пытался что-то вроде этого:

export class Stomp {

public static brokerURL = null;
public static heartbeatIncoming: 0; // Typical value 0 - disabled
public static heartbeatOutgoing: 0; // Typical value 20000 - every 20 seconds
public static reconnectDelay: 5000;

constructor(private appConfig: AppConfig) {
  Stomp.brokerURL = this.appConfig.getConfig('openbatonWS') + '/websocketRD/websocket';

}

Но не повезло. Можете ли вы указать мне правильное направление. Как я могу добиться экстернализации brokerURL в InjectableRxStompConfig.

Спасибо, Урбан


angular angular7 stomp
person bam123    schedule 21.02.2019    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Думаю, я устал видеть очевидное, поэтому отправлю ответ на свои вопросы. Мне пришлось поместить это в ngModule:

    {
      provide: InjectableRxStompConfig,
      useClass: Stomp,
      deps: [AppConfig]
    },

И используйте класс записи Stomp следующим образом:

import {AppConfig} from "./app.config";

export class Stomp {

  public brokerURL = null;
  public heartbeatIncoming: 0; // Typical value 0 - disabled
  public heartbeatOutgoing: 0; // Typical value 20000 - every 20 seconds
  public reconnectDelay: 5000;

  constructor(private appConfig: AppConfig) {
    this.brokerURL = this.appConfig.getConfig('openbatonWS') + '/websocketRD/websocket';
  }
}
person bam123    schedule 22.02.2019

arrow_upward
1
arrow_downward

Спасибо @ bam123!

Я реализовал это следующим образом:

export class MyRxStompConfig extends InjectableRxStompConfig {
    constructor(private config: ConfigService) {
        super();
        this.brokerURL = this.config.brokerURL;
        this.heartbeatIncoming = 0;
        this.heartbeatOutgoing = 10000;
        this.reconnectDelay = 500;
    }
}

и я поместил следующее в свой app.module

{ provide: InjectableRxStompConfig, useClass: MyRxStompConfig, deps: [ConfigService] }
person Andrea R.    schedule 04.03.2020

arrow_upward
0
arrow_downward

Я написал служебный класс оболочки для RxStompService и определил методы для подключения, уничтожения, отправки и получения сообщения. Так что всякий раз, когда звоните в эту службу. вы можете отправлять детали конфигурации динамически.

export class QueueMessageService implements OnInit, OnDestroy{
  private rxStompConfig: InjectableRxStompConfig
  private rxStompService: RxStompService;
  constructor() { }

  ngOnInit() {}

  fetchConfig(url :string): InjectableRxStompConfig {
    const myRxStompConfig: InjectableRxStompConfig = {
        // Which server?
        brokerURL: url,

        // Headers
        // Typical keys: login, passcode, host
        connectHeaders: {
          login: 'guest',
          passcode: 'guest'
        },

        // How often to heartbeat?
        // Interval in milliseconds, set to 0 to disable
        heartbeatIncoming: 0, // Typical value 0 - disabled
        heartbeatOutgoing: 0, // Typical value 20000 - every 20 seconds

        // Wait in milliseconds before attempting auto reconnect
        // Set to 0 to disable
        // Typical value 5000 (5 seconds)
        reconnectDelay: 200,

        // Will log diagnostics on console
        // It can be quite verbose, not recommended in production
        // Skip this key to stop logging to console
        debug: (msg: string): void => {
          console.log(new Date(), msg);
        }
      };
      return myRxStompConfig;
  }


  public connect(url: string) {
    this.rxStompConfig = this.fetchConfig(url);
    this.rxStompService = rxStompServiceFactory(this.rxStompConfig);
    this.rxStompService.activate;
  }

  public disconnect() {
    this.rxStompService.deactivate;
  }


  receiveMessage(topicName: string) {
    return this.rxStompService.watch(topicName);
  }

  sendMessage(topicName: string, message: string,createdBy: string) {
    var messageJson = {
        'Date': `${new Date}`,
        'Message':message,
        'CreatedBy':createdBy
     }
    return this.rxStompService.publish({destination: topicName, body: JSON.stringify(messageJson)});

  }


  ngOnDestroy() {
    this.rxStompService.deactivate;
  }
}

И вызов службы из компонента, как показано ниже. Я жестко запрограммировал здесь URL и имена тем, но мы можем получить значения из конфигурации или из службы Rest и т. Д.,


@Component({
  selector: 'app-messages',
  templateUrl: './messages.component.html',
  styleUrls: ['./messages.component.css']
})
export class MessagesComponent implements OnInit, OnDestroy {
  public receivedMessages: string[] = [];
  private topicSubscription: Subscription;


  constructor(private queueMessageService: QueueMessageService) { }

  ngOnInit() {
    this.queueMessageService.connect(this.getQueueURL());
    this.topicSubscription = this.queueMessageService.receiveMessage(this.getTopicName()).subscribe((message: Message) => {
      this.receivedMessages.push(message.body);
    });
  }

  ngOnDestroy() {
    this.topicSubscription.unsubscribe();
    this.queueMessageService.disconnect();
  }

   onSendMessage() {
     const message = `Paddy Message generated`;
     this.queueMessageService.sendMessage(this.getTopicName(),message,'user1');
  }

  getQueueURL(): string {
    return 'ws://127.0.0.1:61614//ws';
  }

  getTopicName(): string {
    return '/topic/demo';
  }
}
person Padmanabhan Velu    schedule 09.03.2020