update constant

src/app/app.component.ts

@@ -1,15 +1,11 @@
 import {
-  AfterViewInit,
   Component,
-  ElementRef,
   OnInit,
-  ViewChild,
 } from '@angular/core';
-import { SocketService } from './shared/services/socket.service';
-import { AlarmSoundService } from './shared/services/alarm-sound.service';
 import {MqttClientService} from "./shared/services/mqtt-client.service";
 import {takeUntil} from "rxjs/operators";
 import {filter, Subject} from "rxjs";
+import {TOPIC_SETTING} from "./app.constants";
 
 @Component({
   selector: 'app-root',
@@ -20,18 +16,18 @@ export class AppComponent implements OnInit {
   title = 'Iot-web-ui';
   private unsubscribeAll = new Subject();
   isConnected = false;
-  constructor(private socketService$: SocketService, private mqtt$: MqttClientService) {}
+  constructor(private mqtt$: MqttClientService) {}
 
   ngOnInit() {
-    // this.socketService$.connect();
     this.mqtt$.createConnection();
     this.mqtt$.status$.pipe(takeUntil(this.unsubscribeAll)).subscribe(
       (isConnected: boolean) => {
         this.isConnected = isConnected;
+        this.mqtt$.getSetting();
         this.mqtt$.getLog();
-        this.mqtt$.sendPublish({ id: '0', type: 'get', whistletime: ''});
-        this.mqtt$.sendPublish({ id: '0', type: 'get', arlamtime: ''});
-        this.mqtt$.messages$.pipe(takeUntil(this.unsubscribeAll), filter((item) => item !== null)).subscribe((message: any) => {
+        this.mqtt$.sendPublish({ id: '0', type: 'get', whistletime: ''}, TOPIC_SETTING);
+        this.mqtt$.sendPublish({ id: '0', type: 'get', arlamtime: ''}, TOPIC_SETTING);
+        this.mqtt$.setting$.pipe(takeUntil(this.unsubscribeAll), filter((item) => item !== null)).subscribe((message: any) => {
           if (message.id == '0' && message.whistletime) {
             localStorage.setItem('whistletime', message.whistletime);
           }

src/app/app.constants.ts

@@ -0,0 +1,3 @@
+export const TOPIC_SETTING = 'isoft/node 4/setting4';
+export const TOPIC_LOG = 'isoft/node 4/log4';
+export const TOPIC_INFO = 'isoft/node 4/in4';

src/app/modules/homepage/centralized-security-management/centralized-security-management.component.ts

@@ -21,8 +21,7 @@ import {MqttClientService} from "../../../shared/services/mqtt-client.service";
   templateUrl: './centralized-security-management.component.html',
   styleUrls: ['./centralized-security-management.component.scss'],
 })
-export class CentralizedSecurityManagementComponent
-  implements OnInit, AfterViewInit, OnDestroy
+export class CentralizedSecurityManagementComponent implements AfterViewInit, OnDestroy
 {
   private map!: L.Map;
   private markers!: L.MarkerClusterGroup;
@@ -43,21 +42,6 @@ export class CentralizedSecurityManagementComponent
     private mqtt$: MqttClientService
   ) {}
 
-  ngOnInit() {
-    this.mqtt$.status$.pipe(takeUntil(this.unsubscribeAll)).subscribe(
-      (isConnected) => {
-        if (isConnected) {
-          this.mqtt$.getLog();
-          this.mqtt$.sendPublish({ id: '0', type: 'get' });
-          this.mqtt$.messages$.pipe(takeUntil(this.unsubscribeAll), filter((item) => item !== null)).subscribe(message => {
-            console.log('map:',message);
-            this.onMessage(message);
-          });
-        }
-      },
-    );
-  }
-
   openDialog(): void {
     this.dialog.open(CameraDialogComponent, {
       width: '80vw',
@@ -67,6 +51,10 @@ export class CentralizedSecurityManagementComponent
 
   ngAfterViewInit(): void {
     this.initMap();
+    this.mqtt$.messages$.pipe(takeUntil(this.unsubscribeAll), filter((item) => item !== null)).subscribe(message => {
+      console.log('map:',message);
+      this.onMessage(message);
+    });
   }
 
   ngOnDestroy(): void {

src/app/modules/homepage/home-page.routing.ts

@@ -15,5 +15,5 @@ export const homePageRoutes: Routes = [
   {
     path: 'security-system-details',
     component: SecuritySystemDetailsComponent,
-  },
+  }
 ];

src/app/modules/homepage/homepage/home-page.component.ts

@@ -1,15 +1,15 @@
 import {Component, OnDestroy, OnInit} from '@angular/core';
-import {SocketService} from "../../../shared/services/socket.service";
-import {Subscription, Subject, filter, take} from "rxjs";
+import {Subject, filter} from "rxjs";
 import {MqttClientService} from "../../../shared/services/mqtt-client.service";
 import {takeUntil} from "rxjs/operators";
+import {TOPIC_SETTING} from "../../../app.constants";
 
 @Component({
   selector: 'app-homepage',
   templateUrl: './home-page.component.html',
   styleUrls: ['./home-page.component.scss'],
 })
-export class HomePageComponent implements OnInit,OnDestroy{
+export class HomePageComponent implements OnInit, OnDestroy {
   whistle = {
     time: 10,
     sound: 0,
@@ -20,42 +20,36 @@ export class HomePageComponent implements OnInit,OnDestroy{
   };
   isConnected = false;
   private unsubscribeAll = new Subject();
+
   constructor(
-    private socketService$: SocketService,
     private mqtt$: MqttClientService
-    ) {
+  ) {
     this.mqtt$.status$.pipe(takeUntil(this.unsubscribeAll)).subscribe(
       (isConnected: boolean) => {
         this.isConnected = isConnected;
-        this.mqtt$.getLog();
-        setTimeout(() => {
-          this.mqtt$.sendPublish({ id: '0', type: 'get', whistletime: ''});
-        }, 500);
-        setTimeout(() => {
-          this.mqtt$.sendPublish({ id: '0', type: 'get', arlamtime: ''});
-        }, 1000);
-        this.mqtt$.messages$.pipe(takeUntil(this.unsubscribeAll), filter((item) => item !== null)).subscribe((message: any) => {
-          if (message.id == '0' && message.whistletime) {
-            this.whistle.time = Number(message.whistletime);
-          }
-          if (message.id == '0' && message.arlamtime) {
-            this.alarm.time = Number(message.arlamtime);
-          }
-        });
       },
     );
+    this.mqtt$.setting$.pipe(takeUntil(this.unsubscribeAll), filter((item) => item !== null)).subscribe((message: any) => {
+      if (message.id == '0' && message.whistletime) {
+        this.whistle.time = Number(message.whistletime);
+      }
+      if (message.id == '0' && message.arlamtime) {
+        this.alarm.time = Number(message.arlamtime);
+      }
+    });
   }
+
   ngOnInit() {
   }
 
-  emitSetting(type: string, event: any){
+  emitSetting(type: string, event: any) {
     if (this.isConnected) {
       if (type === 'whistle') {
         this.whistle.time = event;
-        this.mqtt$.sendPublish({ id: '0', type: 'set', whistletime: event.toString()});
+        this.mqtt$.sendPublish({id: '0', type: 'set', whistletime: event.toString()}, TOPIC_SETTING);
       } else if (type === 'alarm') {
         this.alarm.time = event;
-        this.mqtt$.sendPublish({ id: '0', type: 'set', arlamtime: event.toString() });
+        this.mqtt$.sendPublish({id: '0', type: 'set', arlamtime: event.toString()}, TOPIC_SETTING);
       }
     }
   }

src/app/modules/homepage/security-system-details/security-system-details.component.ts

@@ -24,9 +24,7 @@ export class SecuritySystemDetailsComponent implements OnInit, OnDestroy {
   state5 = false;
   state6 = false;
   switchArm = false;
-  switchWarning = false;
   isReady = true;
-  private intervalId: any;
   private unsubscribeAll = new Subject();
 
   constructor(
@@ -38,25 +36,18 @@ export class SecuritySystemDetailsComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit() {
-  this.mqtt$.status$.pipe(takeUntil(this.unsubscribeAll)).subscribe((isConnected) => {
+    this.mqtt$.status$.pipe(takeUntil(this.unsubscribeAll)).subscribe((isConnected) => {
       this.isConnected = isConnected;
-      if (isConnected){
-        this.mqtt$.getLog();
-        this.mqtt$.sendPublish({ id: '0', type: 'get'});
-        this.mqtt$.messages$.pipe(takeUntil(this.unsubscribeAll), filter((item) => item !== null)).subscribe(message => {
-          console.log('detail:',message);
-          this.onMessage(message);
-        });
-      }
-    })
+    });
+    this.mqtt$.messages$.pipe(takeUntil(this.unsubscribeAll), filter((item) => item !== null)).subscribe(message => {
+      console.log('detail:',message);
+      this.onMessage(message);
+    });
   }
 
   ngOnDestroy(): void {
     this.unsubscribeAll.next('');
     this.unsubscribeAll.complete();
-    if (this.intervalId) {
-      clearInterval(this.intervalId);
-    }
     this.alarmSoundService$.stopAlarm();
   }
 

src/app/shared/services/mqtt-client.service.ts

@@ -8,6 +8,7 @@ import {
 } from 'ngx-mqtt';
 import { IClientSubscribeOptions } from 'mqtt-browser';
 import {BehaviorSubject, Observable, Subject, Subscription} from 'rxjs';
+import {TOPIC_INFO, TOPIC_LOG, TOPIC_SETTING} from "../../app.constants";
 
 @Injectable({
   providedIn: 'root'
@@ -18,6 +19,7 @@ export class MqttClientService {
     this.client = this._mqttService;
   }
   private curSubscription: Subscription | undefined;
+  private settingSubscription: Subscription | undefined;
   connection = {
     hostname: 'broker.hivemq.com',
     clean: true,
@@ -32,6 +34,8 @@ export class MqttClientService {
   public status$ = this.statusSubject.asObservable();
   private messagesSubject$ = new BehaviorSubject(null);
   public messages$ = this.messagesSubject$.asObservable();
+  private settingSubject$ = new Subject();
+  public setting$ = this.settingSubject$.asObservable();
 
   // 创建连接
   createConnection() {
@@ -48,22 +52,24 @@ export class MqttClientService {
     this.client?.onError.subscribe((error: any) => {
       this.isConnection = false;
       this.statusSubject.next(this.isConnection);
+      this.clearLog();
       console.log('Connection failed', error);
     });
-    // this.client?.onMessage.subscribe((packet: any) => {
-    //   this.receiveNews = this.receiveNews.concat(packet.payload.toString())
-    //   console.log(`Received message ${packet.payload.toString()} from topic ${packet.topic}`);
-    //   this.messagesSubject$.next(packet);
-    // })
+    this.client?.onClose.subscribe((error: any) => {
+      this.isConnection = false;
+      this.statusSubject.next(this.isConnection);
+      this.clearLog();
+      console.log('Connection close', error);
+    });
   }
 
   // 订阅主题
   getLog() {
     const { topic, qos } = {
-      topic: 'isoft/node 4/log4',
+      topic: TOPIC_LOG,
       qos: 0,
     };
-    this.client?.observe(topic, { qos, dup: false } as IClientSubscribeOptions).subscribe((message: IMqttMessage) => {
+    this.curSubscription = this.client?.observe(topic, { qos, dup: false } as IClientSubscribeOptions).subscribe((message: IMqttMessage) => {
       try {
         let plainMessage = "";
         for (var i = 0; i < message.payload.length; i++) {
@@ -77,17 +83,40 @@ export class MqttClientService {
     });
   }
 
+
+  // 订阅主题
+  getSetting() {
+    const { topic, qos } = {
+      topic: TOPIC_SETTING,
+      qos: 0,
+    };
+    this.settingSubscription = this.client?.observe(topic, { qos, dup: false } as IClientSubscribeOptions).subscribe((message: IMqttMessage) => {
+      try {
+        let plainMessage = "";
+        for (var i = 0; i < message.payload.length; i++) {
+          plainMessage += String.fromCharCode(parseInt(String(message.payload[i])));
+        }
+        console.log(JSON.parse(plainMessage));
+        this.settingSubject$.next(JSON.parse(plainMessage));
+      }catch (e) {
+        console.log(e);
+      }
+    });
+  }
+
   // 取消订阅
   clearLog() {
     this.curSubscription?.unsubscribe()
+    this.settingSubscription?.unsubscribe();
   }
+
   // 发送消息
   doPublish(data: any) {
-    this.client?.unsafePublish("isoft/node 4/in4", JSON.stringify(data), {qos: 0} as IPublishOptions);
+    this.client?.unsafePublish(TOPIC_INFO, JSON.stringify(data), {qos: 0} as IPublishOptions);
   }
   // 发送消息
-  sendPublish(data: any) {
-    this.client?.unsafePublish("isoft/node 4/in4", JSON.stringify(data), {qos: 0} as IPublishOptions);
+  sendPublish(data: any, topic = TOPIC_INFO) {
+    this.client?.unsafePublish(topic, JSON.stringify(data), {qos: 0} as IPublishOptions);
     // this.client?.publish("isoft/node 4/in4", JSON.stringify(data), {qos: 0} as IPublishOptions).subscribe();
   }
   // 断开连接