add socket

src/app/modules/overview/overall-ground/overall-ground.component.html

@@ -20,12 +20,12 @@
       <p class="state"><span id="Connect">{{ isConnected ? 'Online' : 'Offline' }}</span></p>
     </div>
     <div class="card">
-      <p class="state" id="State1">{{ State1 ==  '' ? '%STATE%' : State1}}</p>
-      <p class="state" id="State2">{{ State2 ==  '' ? '%STATE%' : State2}}</p>
-      <p class="state" id="State3">{{ State3 ==  '' ? '%STATE%' : State3}}</p>
-      <p class="state" id="State4">{{ State4 ==  '' ? '%STATE%' : State4}}</p>
-      <p class="state" id="State5">{{ State5 ==  '' ? '%STATE%' : State5}}</p>
-      <p class="state" id="State6">{{ State6 ==  '' ? '%STATE%' : State6}}</p>
+      <p class="state" id="State1">{{ state1 ==  '' ? '%STATE%' : state1}}</p>
+      <p class="state" id="State2">{{ state2 ==  '' ? '%STATE%' : state2}}</p>
+      <p class="state" id="State3">{{ state3 ==  '' ? '%STATE%' : state3}}</p>
+      <p class="state" id="State4">{{ state4 ==  '' ? '%STATE%' : state4}}</p>
+      <p class="state" id="State5">{{ state5 ==  '' ? '%STATE%' : state5}}</p>
+      <p class="state" id="State6">{{ state6 ==  '' ? '%STATE%' : state6}}</p>
       <p><button (click)="toggleState1()" id="SetState1" class="button">Set State 1 On</button></p>
       <p><button (click)="toggleState2()" id="SetState2" class="button">Set State 2 On</button></p>
     </div>

src/app/modules/overview/overall-ground/overall-ground.component.ts

@@ -1,59 +1,87 @@
-import {Component, OnDestroy, OnInit} from '@angular/core';
+import {ChangeDetectorRef, Component, OnChanges, OnDestroy, OnInit, SimpleChanges} from '@angular/core';
 import {SocketService} from "../../../shared/services/socket.service";
+import {Subscription} from "rxjs";
 
 @Component({
-  selector: 'app-overall-ground',
-  templateUrl: './overall-ground.component.html',
-  styleUrls: ['./overall-ground.component.scss']
+    selector: 'app-overall-ground',
+    templateUrl: './overall-ground.component.html',
+    styleUrls: ['./overall-ground.component.scss']
 })
 export class OverallGroundComponent implements OnInit, OnDestroy{
-  isClicked = false;
-  isConnected: boolean = false;
-  State1: string = '';
-  State2: string = '';
-  State3: string = '';
-  State4: string = '';
-  State5: string = '';
-  State6: string = '';
-
-  constructor(private socketService$: SocketService) {
-  }
-
-  ngOnInit() {
-    this.socketService$.connect();
-    this.isConnected = this.socketService$.getStatus();
-    if(this.isConnected){
-      this.socketService$.messages$.subscribe(message => {
-        this.onMessage(message);
-      });
-    }
-
-  }
-
-  toggleColor(): void {
-    this.isClicked = !this.isClicked;
-  }
-
-
-  ngOnDestroy(): void {
-    this.socketService$.close();
-  }
-  toggleState1() {
-    this.socketService$.sendMessage({ id: '0', type: 'cmd', state1: !this.State1 });
-  }
-
-  toggleState2() {
-    this.socketService$.sendMessage({ id: '0', type: 'cmd', state2: !this.State2 });
-  }
-
-  onMessage(message: any) {
-    if (message.id === '0' && message.type === 'get') {
-      this.State1 = message.state1 === '1' ? 'ON' : 'OFF';
-      this.State2 = message.state2 === '1' ? 'ON' : 'OFF';
-      this.State3 = message.state3 === '1' ? 'ON' : 'OFF';
-      this.State4 = message.state4 === '1' ? 'ON' : 'OFF';
-      this.State5 = message.state5 === '1' ? 'ON' : 'OFF';
-      this.State6 = message.state6 === '1' ? 'ON' : 'OFF';
-    }
-  }
+    isClicked = false;
+    isConnected = false;
+    state1 = '';
+    state2 = '';
+    state3 = '';
+    state4 = '';
+    state5 = '';
+    state6 = '';
+    Sstate1 = false;
+    Sstate2 = false;
+    private statusSubscription?: Subscription;
+    private messageSubscription?: Subscription;
+    private intervalId: any;
+
+
+    constructor(private socketService$: SocketService) {
+    }
+
+    ngOnInit() {
+        this.socketService$.connect();
+      this.statusSubscription = this.socketService$.status$.subscribe(isConnected => {
+          this.isConnected = isConnected;
+          if (this.isConnected) {
+            this.intervalId = setInterval(() => this.getReadings(), 2000);
+            this.messageSubscription =  this.socketService$.messages$.subscribe(message => {
+              this.onMessage(message);
+            });
+          }
+        });
+    }
+
+    toggleColor(): void {
+        this.isClicked = !this.isClicked;
+    }
+
+    ngOnDestroy(): void {
+      if (this.statusSubscription) {
+        this.statusSubscription.unsubscribe();
+      }
+      if (this.messageSubscription) {
+        this.messageSubscription.unsubscribe();
+      }
+      if (this.intervalId) {
+        clearInterval(this.intervalId);
+      }
+        this.socketService$.close();
+    }
+
+    getReadings(){
+      let str = { id: '0', type: 'get' };
+        this.socketService$.sendMessage(str);
+    }
+    toggleState1() {
+      this.Sstate1 = !this.Sstate1;
+      let str = { id: '0', type: 'cmd', state1: this.Sstate1.toString() };
+      this.socketService$.sendMessage(str);
+    }
+
+    toggleState2() {
+      this.Sstate2 = !this.Sstate2;
+      let str = { id: '0', type: 'cmd', state2: this.Sstate2.toString() };
+        this.socketService$.sendMessage(str);
+    }
+
+    onMessage(message: any) {
+        if (message.id == '0' && message.type === 'get') {
+            this.state1 = message.state1 === '1' ? 'ON' : 'OFF';
+            this.state2 = message.state2 === '1' ? 'ON' : 'OFF';
+            this.state3 = message.state3 === '1' ? 'ON' : 'OFF';
+            this.state4 = message.state4 === '1' ? 'ON' : 'OFF';
+            this.state5 = message.state5 === '1' ? 'ON' : 'OFF';
+            this.state6 = message.state6 === '1' ? 'ON' : 'OFF';
+
+        }
+
+    }
 }

src/app/shared/services/socket.service.ts

@@ -1,16 +1,19 @@
 import { Injectable } from '@angular/core';
 import { webSocket, WebSocketSubject } from 'rxjs/webSocket';
-import {catchError, delayWhen, Observable, retryWhen, Subject, tap, timer} from "rxjs";
+import {BehaviorSubject, catchError, delayWhen, Observable, retryWhen, Subject, tap, timer} from "rxjs";
 
 @Injectable({
   providedIn: 'root'
 })
 export class SocketService {
-  gateway = 'ws://192.168.2.45/ws';
+  gateway = 'ws:/socket.aztrace.vn/ws';
   websocket$!: WebSocketSubject<any> ;
   private isConnected: boolean = false;
   private messagesSubject$ = new Subject();
   public messages$ = this.messagesSubject$.asObservable();
+  private statusSubject = new BehaviorSubject<boolean>(this.isConnected);
+  public status$ = this.statusSubject.asObservable();
+
   constructor() {
   }
 
@@ -24,10 +27,6 @@ export class SocketService {
     }
   }
 
-  getStatus(): boolean {
-    return this.isConnected;
-  }
-
   close() {
     this.websocket$.complete();
   }
@@ -43,6 +42,7 @@ export class SocketService {
         next: () => {
           console.log('Connection ok');
           this.isConnected = true;
+          this.statusSubject.next(this.isConnected);
         }
       },
       closeObserver: {
@@ -50,6 +50,7 @@ export class SocketService {
           console.log('Connection closed');
           this.isConnected = false;
           this.connect({reconnect: true});
+          this.statusSubject.next(this.isConnected);
         }
       },
     });