update config

src/app/app.component.ts

 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";
 
 @Component({
   selector: 'app-root',
 })
 export class AppComponent implements OnInit {
   title = 'Iot-web-ui';
-
+  private unsubscribeAll = new Subject();
+  isConnected = false;
   constructor(private socketService$: SocketService, 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$.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) => {
+          if (message.id == '0' && message.whistletime) {
+            localStorage.setItem('whistletime', message.whistletime);
+          }
+          if (message.id == '0' && message.arlamtime) {
+            localStorage.setItem('alarmtime', message.arlamtime);
+          }
+        });
+      },
+    );
   }
 }

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

 } from '@angular/core';
 import * as L from 'leaflet';
 import 'leaflet.markercluster';
-import {Subject, Subscription, take} from 'rxjs';
+import {filter, Subject, Subscription, take} from 'rxjs';
 import { SocketService } from '../../../shared/services/socket.service';
 import { MatDialog } from '@angular/material/dialog';
 import { AlarmSoundService } from '../../../shared/services/alarm-sound.service';
 import { CameraDialogComponent } from '../../../shared/component/camera-dialog/camera-dialog.component';
 import { alarmData, alarmDemo } from '../data/fake-data';
 import {takeUntil} from "rxjs/operators";
+import {MqttClientService} from "../../../shared/services/mqtt-client.service";
 
 @Component({
   selector: 'app-centralized-security-management',
   status2 = false;
   state5 = false;
   state6 = false;
-  isReady = true;
   private unsubscribeAll = new Subject();
   constructor(
     private socketService$: SocketService,
     private dialog: MatDialog,
     private renderer: Renderer2,
     private alarmSoundService$: AlarmSoundService,
+    private mqtt$: MqttClientService
   ) {}
 
   ngOnInit() {
-    this.socketService$.status$.pipe(takeUntil(this.unsubscribeAll)).subscribe(
+    this.mqtt$.status$.pipe(takeUntil(this.unsubscribeAll)).subscribe(
       (isConnected) => {
         if (isConnected) {
-          this.socketService$.sendMessage({ id: '0', type: 'get' });
-          this.socketService$.messages$.pipe(takeUntil(this.unsubscribeAll)).subscribe(
-            (message) => {
-              this.onMessage(message);
-            },
-          );
+          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);
+          });
         }
       },
     );
       this.state2 = message.state2 == '0'; // 1 OFF // alarm 1h
       this.status2 = message.status2 == '1'; //  0 not, 1 ready, 2 error, 3 bypass
       this.state5 = message.state5 == '1'; // 1 ON, 0 OFF
-      this.isReady = message.ready == '1';
-      this.alarmSoundService$.startAlarm(this.state5, this.state1,this.status1, this.state2, this.status2);
+      this.alarmSoundService$.startAlarm(this.state5, this.state1, this.status1, this.state2, this.status2);
       this.updateIcons();
     }
 

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

 import {Component, OnDestroy, OnInit} from '@angular/core';
 import {SocketService} from "../../../shared/services/socket.service";
-import {Subscription, Subject} from "rxjs";
+import {Subscription, Subject, filter, take} from "rxjs";
 import {MqttClientService} from "../../../shared/services/mqtt-client.service";
 import {takeUntil} from "rxjs/operators";
 
           this.mqtt$.sendPublish({ id: '0', type: 'get', arlamtime: ''});
         }, 1000);
         this.mqtt$.messages$.pipe(takeUntil(this.unsubscribeAll)).subscribe((message: any) => {
-          console.log(message);
           if (message.id == '0' && message.whistletime) {
             this.whistle.time = Number(message.whistletime);
           }

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

 import {Component, OnDestroy, OnInit} from '@angular/core';
-import {debounceTime, Subject, Subscription} from "rxjs";
+import {debounceTime, filter, Subject, Subscription} from "rxjs";
 import {SocketService} from "../../../shared/services/socket.service";
 import {CameraDialogComponent} from "../../../shared/component/camera-dialog/camera-dialog.component";
 import {MatDialog} from "@angular/material/dialog";
       if (isConnected){
         this.mqtt$.getLog();
         this.mqtt$.sendPublish({ id: '0', type: 'get'});
-        this.mqtt$.messages$.pipe(takeUntil(this.unsubscribeAll)).subscribe(message => {
-          console.log('MQTT sup msg: ',message);
+        this.mqtt$.messages$.pipe(takeUntil(this.unsubscribeAll), filter((item) => item !== null)).subscribe(message => {
+          console.log('detail:',message);
           this.onMessage(message);
         });
       }

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

   isConnection = false;
   private statusSubject = new BehaviorSubject<boolean>(this.isConnection);
   public status$ = this.statusSubject.asObservable();
-  private messagesSubject$ = new Subject();
+  private messagesSubject$ = new BehaviorSubject(null);
   public messages$ = this.messagesSubject$.asObservable();
 
   // 创建连接
       topic: 'isoft/node 4/log4',
       qos: 0,
     };
-    this.client?.observe(topic, { qos } as IClientSubscribeOptions).subscribe((message: IMqttMessage) => {
+    this.client?.observe(topic, { qos, dup: false } as IClientSubscribeOptions).subscribe((message: IMqttMessage) => {
       try {
-        console.log('Subscribe to topics res', message.payload.toString());
-        var plainMessage = "";
+        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.messagesSubject$.next(JSON.parse(plainMessage));
       }catch (e) {
         console.log(e);