Dockerfile

 RUN sed -i 's/index  index.html index.htm;/try_files $uri \/index.html;/' /etc/nginx/conf.d/default.conf
 
 COPY /dist/lot-web-ui /usr/share/nginx/html
+
+#FROM node:18-alpine
+#WORKDIR /app
+#COPY dist/ots-landing-page-ssr .
+#EXPOSE 80
+#CMD node server/server.mjs

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 { 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',
 {
   private map!: L.Map;
   private markers!: L.MarkerClusterGroup;
-  private statusSubscription?: Subscription;
-  private messageSubscription?: Subscription;
   data = alarmData;
   alarmDemo = alarmDemo;
   state1 = false;
   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.statusSubscription = this.socketService$.status$.subscribe(
+    this.mqtt$.status$.pipe(takeUntil(this.unsubscribeAll)).subscribe(
       (isConnected) => {
         if (isConnected) {
-          this.socketService$.sendMessage({ id: '0', type: 'get' });
-          this.messageSubscription = this.socketService$.messages$.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);
+          });
         }
       },
     );
   }
 
   ngOnDestroy(): void {
-    this.statusSubscription?.unsubscribe();
-    this.messageSubscription?.unsubscribe();
-    this.socketService$.close();
     this.alarmSoundService$.stopAlarm();
+    this.unsubscribeAll.next('');
+    this.unsubscribeAll.complete();
   }
 
   initMap(): void {
   }
 
   onMessage(message: any) {
-    if (message.id == '0' && message.type === 'get') {
-      this.state1 = message.state1 === '0'; // 1 OFF // alarm 12h
-      this.status1 = message.status1 === '1'; //  0 not, 1 ready, 2 error, 3 bypass
-      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);
+    if (message.id == '0' && message.type == 'get') {
+      this.state1 = message.state1 == '0'; // 1 OFF // alarm 12h
+      this.status1 = message.status1 == '1'; //  0 not, 1 ready, 2 error, 3 bypass
+      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.alarmSoundService$.startAlarm(this.state5, this.state1, this.status1, this.state2, this.status2);
       this.updateIcons();
     }
 
   }
 
   addMarker(item: any, isDemo: boolean = false): void {
-    console.log(this.state5, this.state1, this.status1)
     const icon = isDemo
       ? this.getIcon(this.state5, this.state1, this.status1, this.state2, this.status2)
       : this.createIcon(item.warning);
         <div><strong>Địa điểm:</strong> ${item.detail.position}</div>
         <div><strong>Tọa độ:</strong> ${item.detail.coordinates.lat}, ${item.detail.coordinates.lng}</div>
         <div><strong>Thời gian:</strong> ${item.detail.time}</div>
-        <a href="/overview/security-system-details" target="_blank">Xem chi tiết</a>
+        <a href="/homepage/security-system-details" target="_blank">Xem chi tiết</a>
       </div>`;
   }
 

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";
 
       (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)).subscribe((message: any) => {
-          console.log(message);
+        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);
           }
 
   emitSetting(type: string, event: any){
     if (this.isConnected) {
-      console.log(event);
       if (type === 'whistle') {
         this.whistle.time = event;
         this.mqtt$.sendPublish({ id: '0', type: 'set', whistletime: event.toString()});

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

   .sensor-on {
     width: 30px;
     height: 30px;
-    position: absolute;
+    position: relative;
     background: linear-gradient(#ff0000, #c70039);
     display: flex !important;
     justify-content: center;

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

 import {Component, OnDestroy, OnInit} from '@angular/core';
-import {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";
 import { ConfirmDialogService } from '../../../shared/services/confirm-dialog.service';
 import { AlarmSoundService } from "../../../shared/services/alarm-sound.service";
 import { MqttClientService } from "../../../shared/services/mqtt-client.service";
+import {takeUntil} from "rxjs/operators";
 
 @Component({
   selector: 'app-security-system-details',
   switchArm = false;
   switchWarning = false;
   isReady = true;
-  private statusSubscription?: Subscription;
-  private messageSubscription?: Subscription;
   private intervalId: any;
-
+  private unsubscribeAll = new Subject();
 
   constructor(
     private socketService$: SocketService,
   ) {}
 
   ngOnInit() {
-  this.statusSubscription = this.mqtt$.status$.subscribe((isConnected) => {
+  this.mqtt$.status$.pipe(takeUntil(this.unsubscribeAll)).subscribe((isConnected) => {
       this.isConnected = isConnected;
       if (isConnected){
         this.mqtt$.getLog();
-        this.messageSubscription = this.mqtt$.messages$.subscribe(message => {
-          console.log('MQTT sup msg: ',message);
+        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);
         });
       }
   }
 
   ngOnDestroy(): void {
-    if (this.statusSubscription) {
-      this.statusSubscription.unsubscribe();
-    }
-    if (this.messageSubscription) {
-      this.messageSubscription.unsubscribe();
-    }
+    this.unsubscribeAll.next('');
+    this.unsubscribeAll.complete();
     if (this.intervalId) {
       clearInterval(this.intervalId);
     }
-    this.socketService$.close();
     this.alarmSoundService$.stopAlarm();
   }
 

src/app/shared/component/slider-range/slider-range.component.ts

   Output,
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import {debounceTime, Subject} from 'rxjs';
 
 @Component({
   selector: 'app-slider-range',
   @Input() icon: string = '';
   @Input() disable: boolean = false;
   @Output() valueChange = new EventEmitter<number>();
-
   onChange = (value: number) => {};
   onTouched = () => {};
+  private valueChangeSubject = new Subject<number>();
 
-  constructor() {}
+  constructor() {
+    this.valueChangeSubject.pipe(debounceTime(500)).subscribe(value => {
+      this.valueChange.emit(value);
+    });
+  }
 
   writeValue(value: number): void {
     this.value = value;
     this.value = event.target.value;
     this.onChange(this.value);
     this.onTouched();
-    this.valueChange.emit(this.value);
+    this.valueChangeSubject.next(this.value);
   }
 
   onSliderChangeBackground() {
       this.value += 10;
       this.onChange(this.value);
       this.onTouched();
-      this.valueChange.emit(this.value);
+      this.valueChangeSubject.next(this.value);
+
     }
   }
 
       this.value -= 10;
       this.onChange(this.value);
       this.onTouched();
-      this.valueChange.emit(this.value);
+      this.valueChangeSubject.next(this.value);
     }
   }
 }

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);
   // 发送消息
   sendPublish(data: any) {
     this.client?.unsafePublish("isoft/node 4/in4", JSON.stringify(data), {qos: 0} as IPublishOptions);
+    // this.client?.publish("isoft/node 4/in4", JSON.stringify(data), {qos: 0} as IPublishOptions).subscribe();
   }
   // 断开连接
   destroyConnection() {