Dashboard software real-time in html senza backend pesante

di il
26 risposte

Dashboard software real-time in html senza backend pesante

Ciao a tutti,

vorrei dotare il mio software per elaborazione di messaggi midi di una dashboard html che possa essere visualizzata su uno Smartphone o Tablet.

Il backend, che dovrebbe essere inserito nel corpo del programma che elabora in tempo reale i messaggi midi, non dovrebbe però sottrarre troppe risorse al thread principale.

Quali suggerimenti mi potete dare per iniziare a selezionare le varie strade da percorrere?

Esistono delle librerie molto semplici da incorporare nella soluzione C# per poter inviare un semplice frontend al client e che mi permettano di gestire le richieste del javascript?

La Dashboard dovrebbe visualizzare lo stato del software mediante pulsanti e label ed eventualmente ricevere pochi comandi operativi.
Il tutto deve essere molto semplice e veloce.

Grazie

26 Risposte

  • Re: Dashboard software real-time in html senza backend pesante

    09/07/2024 - zorban62 ha scritto:


    Esistono delle librerie molto semplici da incorporare nella soluzione C# per poter inviare un semplice frontend al client e che mi permettano di gestire le richieste del javascript?

    Puoi usare direttamente l'hosting di ASP.NET Core incorporandolo all'interno dell'applicazione (se stai usando .NET Core o successivi); in alternativa, devi cercare altre librerie che ti consentano di restituire una pagina Web (nella quale inserirai tutto ciò che vuoi) all'interno di un programma tradizionale (es. desktop oppure console). Leggi ad esempio questo articolo per un approfondimento.

    Parlando di “elaborazione MIDI”, questa scelta va ponderata tenendo conto del fatto che il “real time” non è facilmente ottenibile dall'applicazione Web, che non ha le stesse performance dell'applicazione desktop e deve tenere conto dei tempi di rendering e colloquio HTTP con l'eventuale API o backend lato server.

    Magari definisci meglio quale è lo scopo di questa applicazione e qual è lo scenario in cui ti trovi: al netto di “semplice e veloce” non è chiara la natura dell'applicazione di cui parliamo (desktop? servizio? altro?) e cosa deve fare quella lato client, tenendo conto di quanto detto sopra e anche del fatto che non è dato sapere quali siano le tue competenze nello sviluppo Web frontend con JavaScript e affini.

  • Re: Dashboard software real-time in html senza backend pesante

    Grazie per il suggerimento, spiego meglio la mia situazione.
    Sono un progettista elettronico e di solito sviluppo applicazioni embedded in ambito MIDI su microcontrollori Microchip.
    Poichè questa applicazione MIDI non richiedeva la progettazione di un hardware dedicato ma aveva bisogno di parecchia memoria per contenere i dati, ho pensato di svilupparla interamente in C#. Tramite un'interfaccia MIDI con 1 ingresso e 7 uscite il software riceve i codici MIDI in ingresso, li elabora secondo un algoritmo specifico (engine) e li distribuisce alle 7 uscite.
    Tale applicazione è adesso nella sua forma embrionale ma funzionante.

    Di solito nelle applicazioni con microcontrollore ero solito dotare il sistema hardware di una dashboard su PC collegata tramite una connessione seriale (USB emulata).

    In questo caso avrei invece bisogno di poter disporre di una dashboard su tablet o smartphone collegati tramite WiFi (oppure bluethoot).

    Senza la complicazione di sviluppare una app apposita da installare sul client, vorrei utilizzare un comunissimo browser sul tablet e inviare dal PC codice html (java script).

    Personalmente non ho nessuna esperienza nello sviluppo frontend/backend ma mia figlia, che si sta laureando in informatica, ha già realizzato siti web in Java utilizzando spring boot. Però un sito web lo vedo troppo ridondante per la ma esigenza perchè si appoggia ad un data base ed ha un'implementazione eccessiva per realizzare una piccola dashboard che adesso vado a descrivere.

    La dashboard non dovrà trattare codici MIDI, questi vengono elaborati dall'engine in un thread separato ad alta priorità.
    Questa dovrà visualizzare solo lo stato dell'engine ed eventualmente modificarlo inviando informazioni che agiscono sulla base dati.

    La base dati su cui si appoggia l'engine è costituita da una serie di classi che contengono i parametri dell'elaborazione. In pratica la dashboard deve solo visualizzare questi parametri (classi) ed eventualmente modificare qualche parametro su comando dell'utente. (per esempio passare da un brano all'altro dell'esecuzione musicale). 

    Pertanto tenendo separati l'engine e il server http non ci dovrebbero essere problemi di latenza sull'elaborazione del codice MIDI.

    Vi chiedo quindi se è possibile integrare nel sistema engine, già funzionante e scritto in C# Desktop .NET Framework 4.8, un piccolo server http, non impattante sulle prestazioni dell'engine, che possa visualizzare una dashboard come descritto sopra su un tablet o smartphone.  

    Spero di aver spiegato esaurientemente il progetto.

    Grazie per tutti i suggerimenti vogliate darmi.

    Andrea

  • Re: Dashboard software real-time in html senza backend pesante

    10/07/2024 - zorban62 ha scritto:


    Vi chiedo quindi se è possibile integrare nel sistema engine, già funzionante e scritto in C# Desktop .NET Framework 4.8, un piccolo server http, non impattante sulle prestazioni dell'engine, che possa visualizzare una dashboard come descritto sopra su un tablet o smartphone.  

    Tecnicamente sì. Ad esempio, nell'articolo che ti avevo indicato c'è un approfondimento.

    In generale puoi cercare informazioni su Kestrel, che il nome in codice del server Web di Microsoft in ambito .NET, ma che utilizza le versioni più aggiornate di .NET (dalla Core in poi).

    Per .NET 4.8 puoi ricorrere ad altre soluzioni, tipo OWIN: ad esempio, prova a leggere questo articolo.

  • Re: Dashboard software real-time in html senza backend pesante

    10/07/2024 - Alka ha scritto:


    1. vorrei utilizzare un comunissimo browser sul tablet e inviare dal PC codice html (java script).
    2. mia figlia, che si sta laureando in informatica, ha già realizzato siti web in Java utilizzando spring boot
    1. quello che ti server e' PROPRIO UN SITO WEB.
      MA un sito Web non deve essere una cosa complicata, puo' essere composto anche semplicemente da una paginetta Web,
    2. Per essere precisi, se vogliamo, ti basta la realizzazione di una SPA (Single Page Application), che accede ad un RESTFul Server (tu figla sa sicuramente di che si tratta, e se non lo sa, frustala ;-) ) il cui compito e' fornire le informazioni necessarie alla DashBoard.

    A sua vola, la DashBoard e' una pagina HTML con un po' di grafica e JavaScript necessario per interrogare il serverino e realizzare i pupazzetti.

    Diciamo che non c'e' niente di “particolarmente” complicato. Solo “bibbioso” ;-)

  • Re: Dashboard software real-time in html senza backend pesante

    Sto leggendo gli articoli consigliati da Alka:

    1) nel primo ho letto che potrebbe fare al caso mio Gethttp WebServer https://genhttp.org/ 

    2) Nel secondo invece si fa riferimento al Web API NuGet Package

    https://learn.microsoft.com/en-us/aspnet/web-api/overview/advanced/calling-a-web-api-from-a-net-client

    https://learn.microsoft.com/en-us/aspnet/web-api/overview/getting-started-with-aspnet-web-api/tutorial-your-first-web-api

    Qual è la differenza fra i due approcci?

    Quale mi consigliate di approfondire per il mio progetto?

    Grazie.

    Andrea

  • Re: Dashboard software real-time in html senza backend pesante

    10/07/2024 - zorban62 ha scritto:


    Qual è la differenza fra i due approcci?

    Quale mi consigliate di approfondire per il mio progetto?

    Non conosco GenHTTP, ma vale la pena provare.

    Per capire quale ti garba di più, basta metterli alla prova e vedere quale incontra i tuoi gusti. :)

  • Re: Dashboard software real-time in html senza backend pesante

    10/07/2024 - zorban62 ha scritto:

    1. Qual è la differenza fra i due approcci?
    2. Quale mi consigliate di approfondire per il mio progetto?
    1. nessuna: l'approccio e' lo stesso, cioe' 
      1. creazione di un RESTFul server
      2. creazione di pagine HTML che mediante Ajax chiamano il server.
      3. Ajax e' giusto il nome della funzioncina che, da Javascript/lato client, chiama il servizio REST sul server, gli invia le informazioni (se necessario) ed ottiene i dati in risposta
    2. il secondo, per il banale motivo che NON DEVI installare software di terze parti ma hai gia' tutto disponibile in .NET standard, (quindi di mamma Microsoft). E visto che da qualche parte bisogna cominciare, tanto vale iniziare con il triciclo ;-)

    .

    Se tuo figlia ha implementato siti web, sa ESATTAMENTE di che cosa si parla.

  • Re: Dashboard software real-time in html senza backend pesante

    Per quanto riguarda l'approccio ASP.NET inside of another Application leggo che occorre attivare insieme al runtime environment .NET, della mia applicazione in C#, anche l'ASP.NET runtime:

    Specifically you need make sure the the ASP.NET Runtime is available. ASP.NET is a .NET Core framework and as such is not part of the core .NET Runtime so like the Desktop Runtime, there's a separate framework reference and runtime that's required in order to use the ASP.NET related libraries needed for Web hosting and most other ASP.NET features.

    Questo aspetto penso pregiudichi le prestazioni globali, pertanto penso che partirò con il secondo approccio in cui si utilizzano solo librerie standard .NET.

    Grazie per tutti i suggerimenti che mi avete fornito.

    Andrea

  • Re: Dashboard software real-time in html senza backend pesante

    @zorban62 attento a NON INVENTARTI rispose su argomenti che non conosci.

    ASP.NET e' solo il modulo/libreria aggiuntiva a .NET standard per la gestione del serverino web. 
    Ti SERVE in ENTRAMBI i casi.
    La sua NON presenza di default e' banale: nel 90% (o 75%, non so) dei casi chi usa .NET lo usa per applicazioni desktop NON per applicazioni WEB, QUINDI il modulino aggiuntivo NON VIENE installato di default.

    Ed evita anche le “elucubrazioni mentali” relative alle “performace”: la potenza di calcolo che hai sottomano, a meno che non sia un Rasberri PI o una calcolatrice programmabile, e' decinaia di volte superiore a quello che serve per far funzionare un serverino stupidino che non fa altro che attendere che qualcuno lo chiami nel 99.99999% del tempo. E quando risponde deve giusto generare un filettino minuscolo con le informazioni di servizio.
    NON HAI carico elaborativo NEMMENO quando vuoi visualizzare la dashbord, perche' questa e TUTTA a carico del client.

    Da qualche parte avevo letto che hanno implementato un serverino RESTful in 40 ricghe di codice o giu' di li.

    SE PROPRIO PRIOPRIO vuoi assicurarti di MINIMIZZARE in ASSOLUTO il carico di lavoro, allora si implementat tutto in C/C++ NON in C#/.NET!

  • Re: Dashboard software real-time in html senza backend pesante

    Ma allora che cos'è l'ASP.NET Runtime citato nell'articolo?
    https://weblog.west-wind.com/posts/2023/Nov/27/Embed-a-minimal-ASPNET-Web-Server-into-a-Desktop-Application

    Va beh, da qualche parte comincerò .. poi si vedrà

    Grazie comunque

    Andrea

  • Re: Dashboard software real-time in html senza backend pesante

    11/07/2024 - zorban62 ha scritto:


    Ma allora che cos'è l'ASP.NET Runtime citato nell'articolo?

    Si tratta del set di package che servono a far funzionare la parte di .NET che è preposta a servire le applicazioni Web in generale.

    Il tuo problema sta nel fatto che sono tutte implementazioni per .NET Core e successivi, mentre a te serve qualcosa che giri su .NET Framework.

    Non conosco molti package che fanno quanto chiedi, ma potresti dare un'occhiata a Nancy: si tratta di un framework ispirato a Sinatra (un tool del tutto equivalente), molto semplice da usare, e per quanto ne so supporta anche il “self hosting”, ovvero l'hosting ricavato in una applicazione, che è quello che stai chiedendo.

    Vedi la documentazione a riguardo per capire come creare il “Web Host”, in pratica il server Web da integrare nell'applicazione, e come strutturare le classi che rispondono agli endpoint desiderati (la documentazione è molto ampia e ben fatta).

  • Re: Dashboard software real-time in html senza backend pesante

    Sono riuscito a fare qualcosa di molto grezzo ma funzionante scrivendo un piccolo server http in .NET framework.
    Sul device remoto viene visualizzato lo stato degli switch premuti e numero tre bottoni per selezionare un nuovo switch.

    Al limite potrebbe già funzionare così ma spero di poter migliorare l'estetica e sarebbe bello non inviare ogni volta una nuova pagina html, ma credo che per fare questo ci sia molto da studiare ………

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net;
    using System.Runtime.Remoting.Contexts;
    using System.Text;
    using System.Threading;
    using System.Threading.Tasks;
    
    namespace AndreaD8
    {
        public class HttpServer : IDisposable
        {
            public static HttpListener listener;
            public static string url = "http://+:8400/";
            public static int pageViews = 0;
            public static int requestCount = 0;
            public static string pageData =
                "<!DOCTYPE>" +
                "<html>" +
                "  <head>" +
                "    <title>HttpListener Example</title>" +
                "  </head>" +
                "  <body>" +
                "    <p>Switch attivo: {0}</p>" +
                "    <form method=\"post\" action=\"switch1\">" +
                "      <input type=\"submit\" value=\"Switch1\">" +
                "    </form>" +
                "    <form method=\"post\" action=\"switch2\">" +
                "      <input type=\"submit\" value=\"Switch2\">" +
                "    </form>" +
                "    <form method=\"post\" action=\"switch3\">" +
                "      <input type=\"submit\" value=\"Switch3\">" +
                "    </form>" +
                "  </body>" +
                "</html>";
    
            public HttpServer()
            {
                //------------------------- ASCOLTO SULLA PORTA HTTP -----------------------------------
                //
                // ---> IMPORTANTE
                //Prenotazione url per gli utenti non amministratori
                //Comando Per inserire la prenotazione:  netsh http add urlacl url=http://+:8400/ user=everyone
                //Comando per verificare la prenotazione: netsh http show urlacl http://+:8400/
                //Altrimenti ritorna errore se non si avvia in modalità amministratore
    
                // Create a Http server and start listening for incoming connections
                listener = new HttpListener();
                listener.Prefixes.Add(url);
                listener.Start();
                Console.WriteLine("Listening for connections on {0}", url);
    
                // Handle requests
                Task listenTask = HandleIncomingConnections();
    
                // listenTask.GetAwaiter().GetResult();  //questo funziona in progetti console ???
                // Close the listener
                //listener.Close();
            }
    
            public static async Task HandleIncomingConnections()
            {
                bool runServer = true;
                int sw = 0;
    
                // While a user hasn't visited the `shutdown` url, keep on handling requests
                while (runServer)
                {
                    // Will wait here until we hear from a connection
                    HttpListenerContext ctx = await listener.GetContextAsync();
    
                    // Peel out the requests and response objects
                    HttpListenerRequest req = ctx.Request;
                    HttpListenerResponse resp = ctx.Response;
    
                    // Print out some info about the request
                    Console.WriteLine("Request #: {0}", ++requestCount);
                    Console.WriteLine(req.Url.ToString());
                    Console.WriteLine(req.HttpMethod);
                    Console.WriteLine(req.UserHostName);
                    Console.WriteLine(req.UserAgent);
                    Console.WriteLine();
    
                    // If `shutdown` url requested w/ POST, then shutdown the server after serving the page
                    if ((req.HttpMethod == "POST"))
                    {
                        sw = 0;
                        switch (req.Url.AbsolutePath)
                        {
                            case "/switch1":
                                sw= 1;
                                break;
                            case "/switch2":
                                sw= 2;
                                break;
                            case "/switch3":
                                sw= 3;
                                break;
                        }
                        if (sw != 0)
                        {
                            Console.WriteLine("Selezionato switch {0}", sw);
                            sngEngine.Instance.context.Post(delegate (object dummy)
                            {
                                sngEngine.Instance.SelectSwitch(sw);
                            }, null);
                        }
                    }
    
                    // Make sure we don't increment the page views counter if `favicon.ico` is requested
                    if (req.Url.AbsolutePath != "/favicon.ico")
                        pageViews += 1;
    
                    // Write the response info
                    byte[] data;
    
                    if (sw == 0 )
                    {
                        data = Encoding.UTF8.GetBytes(String.Format(pageData, sngBrano.Instance.SwitchAttivo));
                    }
                    else
                    {
                        data = Encoding.UTF8.GetBytes(String.Format(pageData, sw));
                    }
                    resp.ContentType = "text/html";
                    resp.ContentEncoding = Encoding.UTF8;
                    resp.ContentLength64 = data.LongLength;
                    // Write out to the response stream (asynchronously), then close it
                    await resp.OutputStream.WriteAsync(data, 0, data.Length);
                    resp.Close();
                }
            }
    
            public void Dispose()
            {
                listener.Close();
            }
        }
    }
     

    Saluti

    Andrea

  • Re: Dashboard software real-time in html senza backend pesante

    Come posso fare per inviare al client una pagina HTML senza che quest'ultimo la richieda al server HTTP che vi ho postato sopra?

    Non vorrei usare un tipo di timer sul client che ad intervalli regolari richieda al server http l'aggiornamento della pagina perchè penso che vada a sovraccaricare il PC che ha il compito principale di elaborare in real time i codici midi. 

    Leggendo in rete si dovrebbe utilizzare la tecnica push, ma come implementarla?

    Esistono delle soluzioni semplici da applicare all'approccio che ho adottato?

    Grazie per i preziosi suggerimenti.

    Andrea

  • Re: Dashboard software real-time in html senza backend pesante

    Il server NON INVIA pagine HTML di SUA iniziativa. 

    E' il CLIENT che richiede le pagine! È il server RISPONDE. stop. 

    Esiste una tecnicnologia che si chiama websocket, MA che va usata in modo ‘intelligente’. Ed ha un sacco di controindicazioni. 

    A te non serve una cosa così sofisticata! 

    Ma non avevi una figlia che creava siti web con springboot? O era una ‘favoletta’? 

Devi accedere o registrarti per scrivere nel forum
26 risposte