1

He creado un patrón observador que tiene por finalidad simular una estación del clima y dispositivos que se actualizan con la información, la información de la temperatura, presión y viento se generan randómicamente. Dentro del Controlador, he creado un timer que se ejecuta cada 5 segundos llamando al método Notify de la estación, a fin que la información de la estación del clima sea actualizada.

Lo que no logro conseguir es que esa información sea actualizada en la vista, no sé como hacerlo. Qué debo utilizar, si hay algún ejemplo que me pueda ayudar.

Se tiene las siguientes clases:

  • IObserverSubject
  • IObserverObserver
  • IDisplay
  • ObserverConcreteObservable
  • ObserverConcreteObserver_PhoneDisplay
  • ObserverConcreteObserver_WindowDisplay
  • Modelo y ViewModel
  • ObserverModel
  • ObserverModelViewModel

Quedando su diagrama UML de la siguiente forma:

UML observer Pattron

El código fuente de cada clase / interfase es el siguiente:

IDisplay

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace WebApplication1.Areas.DesignPatterns.Models.Observer.ObserPattern
{
    public interface IDisplay
    {
        public ObserverModel Display();
    }
}

IObserverSubject

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace WebApplication1.Areas.DesignPatterns.Models.Observer.ObserPattern
{
    public interface IObserverSubject
    {
        public void Add(IObserverObserver ob);
        public void Remove(IObserverObserver ob);
        public void Notify();
    }
}

IObserverObserver

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace WebApplication1.Areas.DesignPatterns.Models.Observer.ObserPattern
{
    public interface IObserverObserver
    {
        public void Update();
    }
}

ObserverConcreteObservable

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace WebApplication1.Areas.DesignPatterns.Models.Observer.ObserPattern
{
    public class ObserverConcreteObservable : IObserverSubject
    {
        private readonly List<IObserverObserver> observers = new List<IObserverObserver>();
        private  int param_temp = 0;
        private  int param_presure = 0;
        private  int param_wind = 0;
        private readonly Random _random = new Random();
        public void Add(IObserverObserver observer)
        {
            observers.Add(observer);
        }

        public void Notify()
        {
            foreach(IObserverObserver observer in observers)
            {
                observer.Update();
            }
        }

        public void Remove(IObserverObserver observer)
        {
            observers.Remove(observer);
        }

        public int GetTemperatureState()
        {
            this.param_temp = _random.Next(-90, 90);
            return this.param_temp;
        }

        public int GetPresureState()
        {
            this.param_presure = _random.Next(0, 1500);
            return this.param_presure;
        }

        public int GetWindState()
        {
            this.param_wind = _random.Next(0, 600);
            return this.param_wind;
        }
    }
}

ObserverConcreteObserver_PhoneDisplay

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace WebApplication1.Areas.DesignPatterns.Models.Observer.ObserPattern
{
    public class ObserverConcreteObserver_PhoneDisplay : IObserverObserver, IDisplay
    {
        ObserverConcreteObservable observerSubject;
        ObserverModel observerModel = new ObserverModel();
        public ObserverConcreteObserver_PhoneDisplay(ObserverConcreteObservable observerSubject)
        {
            this.observerSubject = observerSubject;
        }
        public ObserverModel Display()
        {
            return this.observerModel;
        }

        public void Update()
        {
            observerModel.Temperature= this.observerSubject.GetTemperatureState();
            observerModel.Presure= this.observerSubject.GetPresureState();
            observerModel.Wind =this.observerSubject.GetWindState();
            observerModel.Name = "Phone Display";
        }
    }
}

ObserverConcreteObserver_WindowDisplay

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace WebApplication1.Areas.DesignPatterns.Models.Observer.ObserPattern
{
    public class ObserverConcreteObserver_WindowDisplay : IObserverObserver, IDisplay
    {
        ObserverConcreteObservable observerSubject;
        ObserverModel observerModel = new ObserverModel();
        public ObserverConcreteObserver_WindowDisplay(ObserverConcreteObservable observerSubject)
        {
            this.observerSubject = observerSubject;
        }
        public ObserverModel Display()
        {
            return this.observerModel;
        }

        public void Update()
        {
            observerModel.Temperature = this.observerSubject.GetTemperatureState();
            observerModel.Presure = this.observerSubject.GetPresureState();
            observerModel.Wind = this.observerSubject.GetWindState();
            observerModel.Name = "Window Display";
        }
    }
}

ObserverModel

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace WebApplication1.Areas.DesignPatterns.Models.Observer.ObserPattern
{
    public class ObserverModel
    {
        public int Temperature { get; set; }
        public int Presure { get; set; }
        public int Wind { get; set; }
        public string Name { get; set; }

    }
}

ObserverModelViewModel

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace WebApplication1.Areas.DesignPatterns.Models.Observer.ObserPattern
{
    public class ObserverModelViewModel
    {
        public ObserverModelViewModel()
        {
            ObserverDisplays = new List<ObserverModel>();
        }
        public List<ObserverModel> ObserverDisplays { get; set; }
    }
}

El controlador: ObserverController

using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using WebApplication1.Areas.DesignPatterns.Models.ObserPattern.ObserverLocation;
using WebApplication1.Areas.DesignPatterns.Models.ObserPattern.ObserverReactive_Extensions;
using WebApplication1.Areas.DesignPatterns.Models.Observer.ObserPattern;
using WebApplication1.Areas.DesignPatterns.Models.StrategyPattern.Strategy;
using WebApplication1.Areas.DesignPatterns.Models.StrategyPattern.StrategyLog;
using WebApplication1.Areas.DesignPatterns.Models.StrategyPattern.StrategyOperation;
using WebApplication1.Areas.DesignPatterns.Models.StrategyPattern.StrategySort;
using static WebApplication1.Areas.DesignPatterns.Models.ObserPattern.ObserverLocation.ParaLocation;

namespace WebApplication1.Areas.DesignPatterns.Controllers
{
    public class ObserverController : Controller
    {
        public IActionResult ObserPattern()
        {
            ObserverConcreteObservable weatherStation = new ObserverConcreteObservable();
            ObserverConcreteObserver_PhoneDisplay phoneDisplay = new ObserverConcreteObserver_PhoneDisplay(weatherStation);
            ObserverConcreteObserver_WindowDisplay windowDisplay = new ObserverConcreteObserver_WindowDisplay(weatherStation);

            weatherStation.Add(phoneDisplay);
            weatherStation.Add(windowDisplay);

            var timer = new System.Timers.Timer(TimeSpan.FromSeconds(5).TotalMilliseconds); // se ejecutara cada x segundos
            timer.Elapsed += async (sender, e) => {
                weatherStation.Notify();
            };
            timer.Start(); // indicamos que unicie
            //Console.ReadKey();

            

            ObserverModelViewModel observerModelViewModel = new ObserverModelViewModel();

            observerModelViewModel.ObserverDisplays.Add(phoneDisplay.Display());
            observerModelViewModel.ObserverDisplays.Add(windowDisplay.Display());

            return View(observerModelViewModel);

        }
    }
}

La vista: ObserPattern

@using WebApplication1.Areas.DesignPatterns.Models.Observer.ObserPattern
@model ObserverModelViewModel
@{
    ViewData["Title"] = "ObserPattern";
}

<h1>ObserPattern</h1>

@foreach (var element in Model.ObserverDisplays)
{
    <h2> @element.Name</h2>
    <h2>Temperature: @element.Temperature</h2>
    <h2>Presure: @element.Presure</h2>
    <h2>Wind: @element.Wind</h2>
    <br />
}
<div>
    <a class="btn btn-primary" href="@Url.Action("Index","Home", new { area = "" })">Retornar1</a>
</div>
8
  • Brother... No copies todo tu proyecto, solo donde tienes problemas o necesitar ayuda
    – Alfa Rojo
    Commented el 29 sept. 2021 a las 0:18
  • El principal problema que tienes es no entender como funciona .NET MVC. La vista se procesa en el servidor y se entrega al cliente, a partir de ahí la vista vive en el navegador totalmente desconectada del servidor que es donde se ejecuta el proceso del observador.
    – Lobos
    Commented el 29 sept. 2021 a las 0:33
  • @Lobos, todo eso lo sé, el Observable no va al navegador, al navegador solo va el resultado de la primera lectura de clima, luego esta lectura se actualiza, como es patrón observador, el observable necesita avisar al observado para de esta forma indicarle que se actualice, cómo esto se hace?
    – Byron2017
    Commented el 29 sept. 2021 a las 0:46
  • 2
    Lo más cercano que veo para mantenerlo en tiempo real y usando ese patrón sería conectar la vista al servidor con un Web Socket. No te puedo decir como hacerlo porque es muy extenso de explicar y no es el objetivo aquí.
    – Lobos
    Commented el 29 sept. 2021 a las 3:39
  • 1
    Aqui donde trabajo usamos para actualizar contadores en el frontend o para notificaciones, creo que podria servirte
    – Cmbuffa
    Commented el 29 sept. 2021 a las 14:42

1 respuesta 1

0

Usando signalR pude conseguir lo preguntado. Dejo acá lo realizado por alguien a quien podría servir la solución. 1.- Instalar en el proyecto SignalR 2.- Registrar SignalR en el Startup.cs método ConfigureServices, agregar la siguiente línea.

services.AddSignalR();

3.- Crear la ruta por la que SignalR mantendrá la comunicación cliente - servidor para ello en el Startup.cs método Configure, agregar la siguiente línea.

app.UseEndpoints(endpoints =>
{
  endpoints.MapControllerRoute(
    endpoints.MapHub<ObserverHub>("/observerhub");
  )
});

4.- Agregar una clase que herede de la clase de SignalR Hub.

using Microsoft.AspNetCore.SignalR;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using WebApplication1.Areas.DesignPatterns.Models.Observer.ObserPattern;

namespace WebApplication1.Areas.DesignPatterns.Models.ObserPattern.Observer
{
    public class ObserverHub : Hub
    {
        public async Task Enviar(ObserverModelViewModel observerModelViewModel)
        {
            await Clients.All.SendAsync("Receive", observerModelViewModel);
        }
    }
}

5.- Modificar el controlar El controlador: ObserverController

[HttpGet]
public IActionResult ObserPattern()
{
    ObserverConcreteObservable weatherStation = new ObserverConcreteObservable();
    ObserverConcreteObserver_PhoneDisplay phoneDisplay = new ObserverConcreteObserver_PhoneDisplay(weatherStation);
    ObserverConcreteObserver_WindowDisplay windowDisplay = new ObserverConcreteObserver_WindowDisplay(weatherStation);
    weatherStation.Add(phoneDisplay);
    weatherStation.Add(windowDisplay);
    ObserverModelViewModel observerModelViewModel = new ObserverModelViewModel();
    weatherStation.Notify();
    observerModelViewModel.ObserverDisplays.Add(phoneDisplay.Display());
    observerModelViewModel.ObserverDisplays.Add(windowDisplay.Display());
    var timer = new System.Timers.Timer(TimeSpan.FromSeconds(5).TotalMilliseconds); // se ejecutara cada x segundos
    timer.Elapsed += async (sender, e) =>
    {
        ObserverModelViewModel observerModelViewModelSignarR = new ObserverModelViewModel();
        weatherStation.Notify();
        observerModelViewModelSignarR.ObserverDisplays.Add(phoneDisplay.Display());
        observerModelViewModelSignarR.ObserverDisplays.Add(windowDisplay.Display());
        observerModelViewModelSignarR.Hour = DateTime.Now.ToString("HH:mm:ss");

        await _hubContext.Clients.All.SendAsync("Receive", observerModelViewModelSignarR);
    };
    timer.Start(); // indicamos que unicie
    return View(observerModelViewModel);
}

6.- En la vista colocar el siguiente código.

@using WebApplication1.Areas.DesignPatterns.Models.Observer.ObserPattern
@model ObserverModelViewModel
@{
    Layout = "_Layout";
    ViewData["Title"] = "ObserPattern";
}
<h1>ObserPattern</h1>
<div class="row">
    <div class="col-md-6">
        <h2>Lectura base</h2>
        @foreach (var element in Model.ObserverDisplays)
        {
            <h4> @element.Name</h4>
            <h4>Temperature: @element.Temperature</h4>
            <h4>Presure: @element.Presure</h4>
            <h4>Wind: @element.Wind</h4>
            <br />
        }
    </div>
    <div class="col-md-6">
        <div id="divWeathers" style="background-color:aqua;"></div>
    </div>
</div>
@section Scripts {
    <script src="~/lib/microsoft/signalr/dist/browser/signalr.min.js"></script>
    <script type="text/javascript">
        const connection = new signalR.HubConnectionBuilder()
            .withUrl("/observerhub")
            .withAutomaticReconnect()
            .build();

        connection.start().then(function () {
            console.log("Conexión exitosa");
        }).catch(function (err) {
            console.log(err);
            alert(err);
        });

        //Funcionalidad para que haga algo cada que HUB reciba información.
        connection.on("Receive", function (observerModelViewModel) {
            let divWeather = document.createElement("div");
            let divDestino = document.getElementById("divWeathers")
            if (1 == 1) {
                let contenido = observerModelViewModel.hour;
                divWeather.textContent = contenido;
                divDestino.appendChild(divWeather);

                for (let element of observerModelViewModel.observerDisplays) {
                    contenido = contenido + "Nombre: " + element.name + "  ";
                    contenido = contenido + " Temperature " + element.temperature + "  ";
                    contenido = contenido + " Presure " + element.presure + "  ";
                    contenido = contenido + " Wind " + element.wind + "  ";
                    contenido = contenido + " </br> "
                }
                divWeather.textContent = contenido;
                divDestino.appendChild(divWeather);
            }
        });
    </script>
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.