Implementacion MQTT

package.json

@@ -20,6 +20,7 @@
     "@angular/platform-browser": "^17.3.0",
     "@angular/platform-browser": "^17.3.0",
     "@angular/platform-browser-dynamic": "^17.3.0",
     "@angular/platform-browser-dynamic": "^17.3.0",
     "@angular/router": "^17.3.0",
     "@angular/router": "^17.3.0",
+    "ngx-mqtt": "^17.0.0",
     "rxjs": "~7.8.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"
     "zone.js": "~0.14.3"
@@ -37,4 +38,4 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
     "typescript": "~5.4.2"
     "typescript": "~5.4.2"
   }
   }
-}
+}
\ No newline at end of file

src/app/app.component.ts

-import { Component } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatDialog } from '@angular/material/dialog';
+import { MqttService, IMqttMessage } from 'ngx-mqtt';
+import { Subscription, interval } from 'rxjs';
+import { startWith, switchMap } from 'rxjs/operators';
 import { CrearPedidoDialogComponent } from './crear-pedido-dialog/crear-pedido-dialog.component';
 import { CrearPedidoDialogComponent } from './crear-pedido-dialog/crear-pedido-dialog.component';
 
 
 @Component({
 @Component({
@@ -7,13 +10,55 @@ import { CrearPedidoDialogComponent } from './crear-pedido-dialog/crear-pedido-d
   templateUrl: './app.component.html',
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
   styleUrl: './app.component.css'
 })
 })
-export class AppComponent {
-  constructor(public dialog: MatDialog) {}
 
 
+export class AppComponent implements OnInit, OnDestroy {
+  private subscription: Subscription = new Subscription(); //Variable para suscribirse a un topic
+  private publishInterval: Subscription = new Subscription(); //Variable para publicar datos cada 10 segundos
+  message: string = ''; //Variable para mostrar el mensaje MQTT
+
+  constructor(public dialog: MatDialog, private mqttService: MqttService) {}
+  ngOnInit() {
+    this.subscribeToTopic(); //Nos suscribimos al inicializar la aplicación
+    this.startPublishing(); //Publicamos datos cada 10 segundos
+  }
+
+  ngOnDestroy() {
+    this.subscription?.unsubscribe(); //Nos desconectamos del topic
+    this.publishInterval?.unsubscribe(); //Nos desconectamos de publicar datos
+  }
+
+/**
+ * Suscribe al topic 'pruebaMQTT' para recibir mensajes.
+ * Al recibir un mensaje, el contenido se convierte a cadena y se almacena en la propiedad `message`,
+ * y además se muestra en la consola.
+ */
+
+subscribeToTopic() {
+  this.subscription = this.mqttService.observe('pruebaMQTT').subscribe((data: IMqttMessage) => {
+    this.message = data.payload.toString(); // Convierte el contenido del mensaje a cadena.
+    console.log('Mensaje MQTT recibido:', this.message); // Muestra el mensaje recibido en la consola.
+  });
+}
+
+/**
+* Inicia la publicación periódica de mensajes en el topic 'pruebaMQTT'.
+* Se configura un intervalo que publica un mensaje cada 10 segundos, el cual incluye
+* la palabra 'Prueba' seguida de la fecha y hora actual.
+*/
+
+startPublishing() {
+  this.publishInterval = interval(10000).pipe(
+    startWith(0), // Inicia la secuencia inmediatamente al suscribirse.
+    switchMap(() => { // Cambia a un nuevo observable cada 10 segundos.
+      const message = `Prueba ${new Date().toLocaleString()}`; // Mensaje a publicar.
+      return this.mqttService.publish('pruebaMQTT', message); // Publica el mensaje en el tópico 'pruebaMQTT'.
+    })
+  ).subscribe();
+}
   abrirPopupCrearPedido(): void {
   abrirPopupCrearPedido(): void {
     const dialogRef = this.dialog.open(CrearPedidoDialogComponent, {
     const dialogRef = this.dialog.open(CrearPedidoDialogComponent, {
-      width: '1100px', 
-      height: '830px', 
+      width: '1100px',
+      height: '830px',
     });
     });
 
 
     dialogRef.afterClosed().subscribe(result => {
     dialogRef.afterClosed().subscribe(result => {

src/app/app.module.ts

@@ -9,6 +9,15 @@ import { ColaPedidosComponent } from './cola-pedidos/cola-pedidos.component';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 import { CrearPedidoDialogComponent } from './crear-pedido-dialog/crear-pedido-dialog.component';
 import { CrearPedidoDialogComponent } from './crear-pedido-dialog/crear-pedido-dialog.component';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatDialogModule } from '@angular/material/dialog';
+import { MqttModule, IMqttServiceOptions } from 'ngx-mqtt';
+
+// Configuración de MQTT
+export const MQTT_SERVICE_OPTIONS: IMqttServiceOptions = {
+  hostname: 'broker.hivemq.com', //Nombre de host o ip
+  port: 8884,  // Puerto de conexión
+  path: '/mqtt',
+  protocol: 'wss'  // Usar 'wss' para conexiones seguras
+};
 
 
 @NgModule({
 @NgModule({
   declarations: [
   declarations: [
@@ -21,8 +30,8 @@ import { MatDialogModule } from '@angular/material/dialog';
   imports: [
   imports: [
     BrowserModule,
     BrowserModule,
     AppRoutingModule,
     AppRoutingModule,
-    MatDialogModule
-    
+    MatDialogModule,
+    MqttModule.forRoot(MQTT_SERVICE_OPTIONS)
   ],
   ],
   providers: [
   providers: [
     provideAnimationsAsync()
     provideAnimationsAsync()