{"id":3471,"date":"2021-07-19T08:05:45","date_gmt":"2021-07-19T08:05:45","guid":{"rendered":"https:\/\/cloudsurfers.it\/?p=3471"},"modified":"2021-07-23T07:34:29","modified_gmt":"2021-07-23T07:34:29","slug":"applicazioni-in-tempo-reale-utilizzando-blazor-webassemby-signalr-e-c9","status":"publish","type":"post","link":"https:\/\/cloudsurfers.it\/index.php\/applicazioni-in-tempo-reale-utilizzando-blazor-webassemby-signalr-e-c9\/","title":{"rendered":"Applicazioni in tempo reale utilizzando Blazor WebAssemby, SignalR e C#9"},"content":{"rendered":"\n

Cos\u2019\u00e8 Blazor<\/h3>\n\n\n\n

Blazor \u00e8 visto come un\u2019importante libreria per sviluppare applicazioni full stack usando .Net.<\/p>\n\n\n\n

Con l\u2019avvento delle Single Page Application, dove l\u2019interfaccia viene creata dinamicamente all\u2019interno della pagina HTML senza la necessit\u00e0 di ri-caricare la pagina stessa, \u00a0ha cominciato a diffondersi l\u2019utilizzo da parte degli sviluppatori di librerie o, addirittura framework, come React, Angular e Vue.<\/p>\n\n\n\n

Con Blazor, Microsoft \u00e8 intenzionata a fornire allo sviluppatore un unico mezzo con il quale sviluppare a 360\u00b0 sfruttando l\u2019esperienza accumulata nell\u2019ambiente .NET. Utilizzando codice .NET \u00e8 infatti possibile usufruire delle caratteristiche dei linguaggi pensati per le SPA come, ad esempio, ri-caricare solo parti della pagina che devono essere aggiornate, riducendo il carico sul server e rendendolo pi\u00f9 immediato all\u2019utente finale .<\/p>\n\n\n\n

Blazor utilizza le Razor Pages con le quali rappresentare l\u2019interfaccia utente e che possono essere annidate e anche ri-condivise in progetti differenti.<\/p>\n\n\n\n

Differenza tra Blazor Server e Blazor WebAssembly<\/strong><\/h6>\n\n\n\n

Con Blazor Server (rilasciato con .NET Core 3)  il codice viene elaborato su server e lo scambio tra client e server viene effettuato attraverso SignalR.<\/p>\n\n\n\n

Con Blazor WebAssembly (rilasciata con .NET Core 3.1)   l\u2019applicazione viene compilata e eseguita direttamente nel browser e nello stesso processo. Tale applicazione, visto che il codice e le relative dipendenze vengono scaricate nel browser, pu\u00f2 essere utilizzata anche off-line. E\u2019 chiamato WebAssembly poich\u00e9 rispetta il target di compilazione standard per la programmazione, lo  sviluppo di applicazioni client e server e la loro distribuzione.<\/p>\n\n\n\n

Cos\u2019\u00e8 SignalR<\/h3>\n\n\n\n
\n

E\u2019 una libreria per sviluppatori che aggiunge agli applicativi la funzionalit\u00e0 Real-Time. Permette al server sia di spedire i dati al client non appena disponibili e senza aspettare la sua richiesta, sia di rimanere in attesa di una richiesta di nuove informazioni da parte dello stesso client.<\/p>\n\n\n\n

Pu\u00f2 essere usato quindi per sviluppare applicativi come chat, dashboard, App di monitoraggio, App per la modifica simultanea dei documenti, moduli per vedere l\u2019avanzamento di progetti in real-time o attivit\u00e0 e applicazioni che richiedono aggiornamenti ad alta frequenza come i giochi .<\/p>\n\n\n\n

SignalR usa gli hub per<\/em> comunicare tra client e server.<\/p>\n\n\n\n

Un hub \u00e8 una pipeline di alto livello che consente a un client e a un server di chiamare metodi l’uno sull’altro. Le comunicazioni con SignalR possono avvenire con l\u2019ausilio di due protocolli: Json (testo) e MessagePack (binario).<\/p>\n\n\n\n

La comunicazione avviene inviando messaggi, serializzati secondo il protocollo scelto, che contengono nome e parametri del metodo lato client . Chi \u00e8 in ascolto cerca di trovare una corrispondenza e una volta trovata, chiama il metodo e gli passa i parametri deserializzati.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Cenni di C#9<\/h3>\n\n\n\n

Nel progetto verranno utilizzate le ultime peculiarit\u00e0 di C# senza entrare nel dettaglio ma, semplicemente, mostrandone il loro utilizzo.<\/p>\n\n\n\n

Definiamo come sar\u00e0 l’applicazione<\/h3>\n\n\n\n

L\u2019applicazione che andremo a costruire sar\u00e0 un\u2019applicazione web dove gli utenti potranno connettersi e partecipare ad una chat comune.<\/p>\n\n\n\n

Il nostro scopo sar\u00e0 creare un\u2019applicazione dove l\u2019utente pu\u00f2 :<\/p>\n\n\n\n

  • Connettersi ad una chat room<\/li>
  • Vedere chi \u00e8 connesso in quel momento <\/li>
  • Essere notificato dell\u2019avvenuta connessione di un nuovo utente o di chi ha deciso di lasciare<\/li>
  • Vedere tutti messaggi scambiati nella chat<\/li><\/ul>\n\n\n\n

    Le caratteristiche appena elencate saranno tutte informazioni in real-time<\/em><\/strong>.<\/p>\n<\/div><\/div>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Creiamo la nostra solution e installiamo i pacchetti necessari.<\/h3>\n\n\n\n

    Al fine di sviluppare il nostro esercizio \u00e8 necessario prima di tutto creare il progetto e installarvi gli opportuni pacchetti.<\/p>\n\n\n\n

    Per iniziare, quindi, posizionarsi nella cartella dove si vuole lavorare (per me che sto lavorando su W10 \u00e8  C:\\Sviluppo<\/em>)  e eseguire il comando relativo (da linea di comando o da terminale di Visual Studio):<\/p>\n\n\n\n

    cd C:\\Sviluppo<\/code><\/td><\/tr>
    dotnet new blazorwasm --hosted --output BlazorChatTest<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

    Questo comando creer\u00e0 una soluzione composta da tre progetti:<\/p>\n\n\n\n

    • BlazorChatTest.Client<\/em>: che conterr\u00e0 tutte  le classi utili alla rendering dell\u2019interfaccia utente.<\/li>
    • BlazorChatTest.Server<\/em>: che conterr\u00e0 tutte le classi della nostra REST API.<\/li>
    • BlazorChatTest.Shared<\/em>: che conterr\u00e0 classi e moduli utilizzati sia lato client che lato server.<\/li><\/ul>\n\n\n\n
      \"\"<\/figure>\n\n\n\n

      Ovviamente, se si vuole effettuare le modifiche in sicurezza, consiglio di inizializzare un repository in git con il seguente codice<\/p>\n\n\n\n

      C:\\Sviluppo> cd BlazorChatTest<\/code><\/td><\/tr>
      dotnet new gitignore<\/code><\/td><\/tr>
      git init<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

      Nell\u2019implementazione dell\u2019esercizio, il lato client avr\u00e0 la necessit\u00e0 di chiamare i metodi esposti dalla nostra REST API utilizzando il servizio HttpClient<\/em>. Sar\u00e0, quindi, necessario installare il pacchetto NuGet Microsoft.Extention.Http<\/em> eseguendo le seguenti istruzioni:<\/p>\n\n\n\n

      Posizionarsi nella cartella del progetto client (C:\\Sviluppo\\BlazorChatTest\\Client<\/em>)<\/p>\n\n\n\n

      C:\\Sviluppo\\BlazorChatTest> cd Client <\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

      E eseguire il seguente comando<\/p>\n\n\n\n

      dotnet add package Microsoft.Extensions.Http --version 5.0.0<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

      Essendo un\u2019applicazione real-time che si appoggia a SignalR sar\u00e0 necessario, sempre nella cartella client, installare anche il relativo pacchetto che ci permetter\u00e0 di comunicare con il lato server e viceversa<\/p>\n\n\n\n

      Digitare quindi il seguente comando e premere invio<\/p>\n\n\n\n

      dotnet add package Microsoft.AspNetCore.SignalR.Client --version 5.0.0<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

      Adesso che abbiamo installato tutti i pacchetti necessari, possiamo procedere all\u2019implementazione del nostro esercizio.<\/p>\n\n\n\n

      Mettiamo le basi per il nostro real-time<\/h3>\n\n\n\n

      Registriamo il nostro hub!!!!!.<\/p>\n\n\n\n

      Lato Server<\/h6>\n\n\n\n

      Se tutto il procedimento precedente \u00e8 andato a buon fine vi troverete nel progetto BlazorChatTest.Server <\/em>il file chiamato Startup.cs <\/em>dove vengono registrati tutti i servizi necessari all\u2019App (metodo ConfigureServices<\/code>) e il suo ordine di elaborazione richieste (metodo Configure<\/code>)<\/p>\n\n\n\n

      L\u2019hub, che non \u00e8 altro che un servizio, viene registrato come segue:<\/p>\n\n\n

      \n public void ConfigureServices(IServiceCollection services)\n {\n      services.AddSignalR();\n      \/\/ ... omissis ...\n      services.AddResponseCompression(opts =>\n      {\n         opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(\n                    new[] { "application\/octet-stream" });\n      });\n }\n<\/pre><\/div>\n\n\n
      E poi, successivamente mappato con il nome di \/chathub<\/em><\/p>\n\n\n
      \npublic void Configure(IApplicationBuilder app, IWebHostEnvironment env)\n        {\n            app.UseResponseCompression();\n            \/\/... omissis ...\n            app.UseEndpoints(endpoints =>\n            {\n                endpoints.MapRazorPages();\n                endpoints.MapControllers();\n                endpoints.MapHub<ChatHub>("\/chathub");\n                endpoints.MapFallbackToFile("index.html");\n            });\n        }\n<\/pre><\/div>\n\n\n
      Il metodo  endpoints.MapHub <\/code>\u00e8 quello con il quale la nostra classe ChatHub <\/code>(di cui parleremo fra poco) fornir\u00e0 i metodi per lo scambio di informazioni.<\/p>\n\n\n\n
      Dato che a larghezza di banda potrebbe essere una risorsa limitata, \u00e8 importante comprimere i dati scambiati tra client e server. La registrazione del servizio ResponseCompression <\/code>viene in nostro aiuto.<\/p>\n\n\n\n
      In generale \u00e8 corretto affermare che la riduzione delle dimensioni dei dati  aumenta, in genere, la velocit\u00e0 di risposta di un’applicazione e riduce le dimensioni del payload.<\/p>\n\n\n\n
      SignalR<\/h6>\n\n\n\n
      A questo punto , creiamo una cartella chiamata Hub<\/em> e aggiungiamo un file chiamato ChatHub.cs<\/em>.<\/p>\n\n\n\n
      Questo file conterr\u00e0 la nostra classe ChatHub <\/code>ed un’ interfaccia IChatHub <\/code>che tipizzer\u00e0 i gestori di eventi da utilizzare.<\/p>\n\n\n
      \n    public interface IChatHub\n    {\n        Task MessageAdded(Message message);\n        Task UserAdded(List<User> users);\n        Task UserDeleted(List<User> users);\n        Task PrivateMessageAdded(Message message);\n    }\n    public class ChatHub : Hub<IChatHub>\n    {\n      \/\/... omissis\n     }\n<\/pre><\/div>\n\n\n
      MessageAdded <\/code><\/span><\/em>verr\u00e0 utilizzato per avvisare che un messaggio \u00e8 stato aggiunto<\/p>\n\n\n\n
      UserAdded <\/code><\/span><\/em>avviser\u00e0 che un utente si \u00e8 connesso<\/p>\n\n\n\n
      UserDeleted <\/code><\/span><\/em>avviser\u00e0 che un utente ha lasciato la chat.<\/p>\n\n\n\n
      Lato Client<\/h6>\n\n\n\n
      Per stabilire una connessione real-time sul client \u00e8 necessario registrare un\u2019istanza HubConnection <\/em><\/code>nel metodo Main <\/em><\/code>della classe Program <\/em><\/code>, utilizzando HubConnecionBuilder<\/em><\/code><\/p>\n\n\n
      \n public class Program\n    {\n        public static async Task Main(string[] args)\n        {\n            var builder = WebAssemblyHostBuilder.CreateDefault(args);\n           \/\/... omissis\n            builder.Services.AddSingleton<HubConnection>(sp => {\n                var navigationManager = sp.GetRequiredService<NavigationManager>();\n                return new HubConnectionBuilder() .WithUrl(navigationManager.ToAbsoluteUri("\/chathub"))\n                  .WithAutomaticReconnect()\n                  .Build();\n            });\n            \/\/... omissis\n        }\n    }\n<\/pre><\/div>\n\n\n
      Una volta registrata la connessione, dovr\u00e0 essere fatta partire con il metodo  StartAsync()<\/code> nella fase di inizializzazione dal componente principale App.razor<\/code> <\/p>\n\n\n
      \n@code {\n    private CancellationTokenSource cts = new CancellationTokenSource();\n    protected override void OnInitialized()\n    {\n        ConnectWithRetryAsync(cts.Token);\n\t\tHubConnection.Closed += error =>\n        {\n            return ConnectWithRetryAsync(cts.Token);\n        };\n    }\n    private async Task<bool> ConnectWithRetryAsync(CancellationToken token)\n    {\n        while (true)\n        {\n            try\n            {\n                await HubConnection.StartAsync(token);\n                return true;\n            }\n            catch when (token.IsCancellationRequested)\n            {\n                return false;\n            }\n            catch\n            {\n\t\t\t\tawait Task.Delay(5000);\n            }\n        }\n    }\n<\/pre><\/div>\n\n\n
      E\u2019 importante notare che:<\/p>\n\n\n\n
      • Il tentativo di connessione avviene in modo asincrono con il metodo await HubConnection.StartAsync(token)<\/code> e quindi in modo indipendentemente dalla inizializzazione dell\u2019applicazione. Se non fosse cosi, infatti , un eventuale errore di connessione, provocherebbe il blocco di tutto il rendering dell\u2019applicazione stessa.<\/li>
      • E che il sistema prova a connettersi ripetutamente e, anche quando i tentativi di connessione vengono esauriti, viene ristabilito il tentativo di connessione in modo manuale.<\/li><\/ul>\n\n\n
        \n catch when (token.IsCancellationRequested)\n {\n   return false;\n }\n<\/pre><\/div>\n\n\n
        Le classi condivise<\/h3>\n\n\n\n
        Una volta fatte tutte le registrazioni del caso, analizziamo i file da implementare nel progetto.<\/p>\n\n\n\n
        Blazor mette a disposizione le basi per la tipizzazione forte, e tutti i sui benefici, creando un progetto di nome BlazorChattest.Shared dove inserire tutti i file utilizzati sia dal client, che dal server.<\/p>\n\n\n\n
        Queste classi verranno utilizzate sia come input\/output dalla REST API , sia dalle Razor Pages nel progetto client e saranno record immutabili<\/span><\/strong><\/em>.<\/p>\n\n\n\n
        C# 9 e i record immutabili.<\/h6>\n\n\n\n
        Una nuova peculiarit\u00e0 di C# 9 sono le classi immutabili le cui propriet\u00e0 non possono essere modificate nel corso della vita dell\u2019oggetto stesso. Il compilatore, infatti, non permetter\u00e0 che una classe di questo tipo venga modificata una volta istanziata se non dichiarandone una nuova istanza.<\/p>\n\n\n\n
        \"\"<\/figure>\n\n\n\n
        I record (cosi si chiamano)  sono utilizzati per restituire liste di dati o dettagli in sola lettura e non possono essere utilizzati per il binding dei dati lato client (verrebbe restituita un\u2019eccezione dal compilatore tutte le volte che l\u2019utente cerca di modificare il dato).E\u2019 necessario quindi appoggiarsi all\u2019utilizzo di classi standard per modificare le propriet\u00e0 della pagina.<\/p>\n\n\n\n
        Nell\u2019immagine seguente ho illustrato il comportamento del compilatore nel caso di dichiarazione di una classe ExampleRecord <\/code>e di successiva istanza e tentativo di modifica della sua propriet\u00e0 dichiarata init <\/code>invece che set<\/code>.<\/p>\n\n\n\n
        \"\"<\/figure>\n\n\n\n
        Il principale vantaggio di questi record e che i loro dati non posso essere modificati in modo erroneo, nel corso dello sviluppo dell\u2019applicazione, sia lato server che lato client. Per poter per\u00f2 garantire il binding \u00e8 necessario mantenere due modelli anzich\u00e9 uno. (il back side dei record)<\/p>\n\n\n\n
        Tipizziamo ancora un po’<\/h6>\n\n\n\n
        Una cosa molto importante \u00e8 incapsulare tutte le chiamate alla nostra REST API in un\u2019unica classe per essere facilitati nelle operazioni di sincronizzazione delle REST API stesse.<\/p>\n\n\n\n
        Nel progetto Shared<\/em> aggiungiamo un file chiamato ChatHttpClient.cs<\/em> che avr\u00e0 il compito di interrogare tutti i metodi REST API forniti dal nostro lato server.<\/p>\n\n\n
        \n   public class ChatHttpClient\n    {\n        private readonly HttpClient http;\n        public ChatHttpClient(HttpClient http)\n        {}\n        public async Task<Chat[]> GetChats()\n        {}\n        public async Task<Chat> GetChat(Guid chatId)\n        {}\n        public async Task<User> GetUser(Guid chatId, string username)\n        {}\n        public async Task<HttpResponseMessage> AddUser(AddingUserModel aum)\n        {}\n       \n        public async Task<HttpResponseMessage> AddChat(Chat cht)\n        {}\n        public async Task<HttpResponseMessage> AddMessage(AddingMessageModel amm)\n        {}\n        public async Task<HttpResponseMessage> DeleteUser(Guid chatId, string username)\n        {}\n    }\n}\n<\/pre><\/div>\n\n\n
        N.B<\/em>. I metodi sono vuoti poich\u00e9 \u00e8 necessario implementare prima la classe lato server che esporr\u00e0 le chiamate REST<\/em> API<\/em>. Non ti preoccupare, lo faremo a breve!!!<\/p>\n\n\n\n
        Un volta scritta la classe sar\u00e0 necessario registrarla nel nostro progetto Client <\/em>e pi\u00f9 precisamente nel metodo Main <\/em><\/code>della classe <\/em>Program<\/code><\/p>\n\n\n
        \npublic static async Task Main(string[] args)\n{\n\tvar builder = WebAssemblyHostBuilder.CreateDefault(args);\n\t\/\/... omissis\n\tvar baseAddress = new Uri(builder.HostEnvironment.BaseAddress);\n\t\/\/... omissis\n\tbuilder.Services.AddHttpClient<ChatHttpClient>(client => client.BaseAddress = baseAddress);\n\t\/\/... omissis\n}\n<\/pre><\/div>\n\n\n
        Ho proprio voglia di cominciare a chattare!!<\/h3>\n\n\n\n
        Dopo aver registrato il nostro hub e chiarito alcune nozioni base, \u00e8 arrivata l\u2019ora implementare il nostro esercizio.<\/p>\n\n\n\n
        La base<\/h6>\n\n\n\n
        Per poter iniziare a chattare dobbiamo, prima di tutto, impostare la nostra classe controller lato server che ci fornir\u00e0 i nostri dati. Implementiamo, quindi , il nostro controller standard, chiamato ChatController<\/code>, con l\u2019attributo [ApiController]<\/code> ereditato dalla classe Controller <\/code>e gli innestiamo, grazie alla Dependency Injection<\/em> il nostro hubContext <\/code>che ci servir\u00e0 a scatenare gli eventi in real-time che comunicheranno i dati al client.<\/p>\n\n\n
        \n    [ApiController]\n    [Route("api\/[controller]")]\n    public class ChatController : Controller\n    {\n        private IHubContext<ChatHub, IChatHub> hubContext;\n        public ChatController(IHubContext<ChatHub, IChatHub> chatHub)\n        {\n            this.hubContext = chatHub;\n        }\n        private static ConcurrentBag<Chat> chats = new ConcurrentBag<Chat> {\n          new Chat ("Chat Room")\n        };\n        \/\/... omissis\n<\/pre><\/div>\n\n\n
        In questo esercizio opteremo per una lista in memoria che simuler\u00e0 il nostro database e verr\u00e0 rappresentata dal record Chat <\/code>(sentitevi liberi di replicare il tutto con un database persistente).<\/p>\n\n\n
        \n    public record Chat\n    {\n        public Guid Id { get; init; } = Guid.NewGuid();\n        public string Name { get; init; }\n        public List< Message> messages=new List< Message>();\n        public List<User> users = new List<User>();\n        \n        public Chat(string name)\n        {\n            Id = Guid.NewGuid();\n            Name = name;\n        }\n    }\n<\/pre><\/div>\n\n\n
        Chat <\/code>conterr\u00e0 i dati relativi agli utenti connessi ed ai messaggi mandati tra di loro.<\/p>\n\n\n\n
        Il record User <\/code>conterr\u00e0 il nome dell\u2019utente e un id di tipo Guid <\/code>e rappresenter\u00e0 gli utenti che scelgono di entrare in chat.<\/p>\n\n\n
        \nnamespace BlazorChatTest.Shared\n{\n    public record User\n    {\n        public Guid Id { get; init; }\n        public string Name { get; init; }\n        public User(string name)\n        {\n            Name = name;\n            Id = Guid.NewGuid();\n        }\n    }\n    public record ExampleRecord\n    {\n        public string? exampleField { get; init; }\n    }\n}\n<\/pre><\/div>\n\n\n
        Mentre il record Message <\/code>rappresenter\u00e0 i messaggi scambiati tra gli utenti connessi e conterr\u00e0 quello che \u00e8 stato scritto dall\u2019utente (Body<\/code>), l\u2019utente stesso (User<\/code>) e la data di inserimento del messaggio (InsertDate<\/code>).<\/p>\n\n\n
        \nnamespace BlazorChatTest.Shared\n{\n   public  record Message\n    {\n        public Message(string body,User user)\n        {\n            Body = body;\n            InsertDate = DateTime.Now;\n            User = user;\n        }\n        public User User { get; init; }\n        public Guid Id { get; init; } = Guid.NewGuid();\n        public string Body { get; init; }\n        public DateTime InsertDate { get; init; }\n    }\n}\n<\/pre><\/div>\n\n\n
        A questo punto abbiamo identificato la classe lato server che ci fornir\u00e0 i dati e la classe lato client che la interrogher\u00e0 per recuperarli. Possiamo quindi iniziare a implementare la nostra App per raggiungere il nostro scopo.<\/p>\n\n\n\n
        Connettersi ad una chat room<\/h5>\n\n\n\n
        Prima di tutto cominciamo a caricare nel nostro menu laterale le chat disponibili (una sola nel nostro esercizio).<\/p>\n\n\n\n
        \"\"<\/figure>\n\n\n\n
        Per farlo \u00e8 necessario<\/p>\n\n\n\n
        Aggiungere un metodo nel nostro controller chiamato GetChats()<\/code>,<\/p>\n\n\n
        \n[HttpGet()]\npublic IEnumerable&lt;Chat&gt; GetChats()\n{\n    return chats;\n}\n<\/pre><\/div>\n\n\n
        Implementare il metodo GetChats() <\/code>della classe ChatHttpClient <\/code>con la chiamata al metodo REST API definito nel controller,<\/p>\n\n\n
        \npublic async Task<Chat> GetChat(Guid chatId)\n{\n     return await this.http.GetFromJsonAsync<Chat>($"api\/chat\/{chatId}");\n}\n<\/pre><\/div>\n\n\n
        E implementare il caricamento della lista nella nostra Razor Page chiamata NavMenu.razor<\/em><\/p>\n\n\n
        \n\t\t@*... omissis *@\n\t\t@foreach (var chat in chats.OrderBy(s => s.Name))\n\t\t{\n\t\t\tvar link = $"chatroom\/{chat.Id}";\n\t\t\t<li class="nav-item px-3">\n\t\t\t\t<NavLink class="nav-link" href="@link">\n\t\t\t\t\t<span class="oi oi-list-rich" aria-hidden="true"><\/span> @chat.Name\n\t\t\t\t<\/NavLink>\n\t\t\t<\/li>\n\t\t}\n\t<\/ul>\n<\/div>\n}\n@code {\n\tprivate Chat[] chats;\n\tprotected override async Task OnInitializedAsync()\n\t{\n\t\tchats = await ChatHttpClient.GetChats();\n\t}\n\t\/\/... omissis\n}\n<\/pre><\/div>\n\n\n
        Da notare che chatroom\/{chat.Id}<\/em><\/span><\/code> \u00e8 il link al nostro componente principale ChatRoom.razor<\/em> che permetter\u00e0 all\u2019utente di registrarsi alla chat, di visualizzare i messaggi mandati da altri e vedere chi \u00e8 connesso in quel momento.<\/p>\n\n\n\n
        Vedere chi \u00e8 connesso in quel momento<\/h6>\n\n\n\n
        Prima di tutto si devono implementare i metodi  lato server che gestiscano l\u2019aggiunta, in caso di nuova connessione, e la cancellazione, in caso di abbandono, degli utenti.<\/p>\n\n\n\n
        Nella nostra classe ChatController <\/code>aggiungiamo due metodi :<\/p>\n\n\n\n
        AddUser <\/code>per aggiungere l\u2019utente appena connesso e DeleteUser <\/code>per eliminare l\u2019utente che ha lasciato la chat<\/p>\n\n\n
        \n        [HttpPut()]\n        public  ActionResult AddUser([FromBody] AddingUserModel aum)\n        {\n            var chat = chats.SingleOrDefault(t => t.Id == aum.ChatId);\n            if (chat != null)\n            {\n                var user = chat.users.SingleOrDefault(t => t.Name == aum.Name);\n                if (user == null)\n                {\n                    user  = new User(aum.Name);\n                    chat.users.Add(user);\n                    this.hubContext.Clients.All.UserAdded(chat.users);\n                }\n                return new JsonResult(user);\n            }\n            else\n            {\n                return NotFound();\n            }\n        }\n        [HttpDelete()]\n        public ActionResult DeleteUser(Guid chatId, string username)\n        {\n            var chat = chats.SingleOrDefault(t => t.Id == chatId);\n            if (chat != null)\n            {\n                var user = chat.users.SingleOrDefault(t => t.Name == username);\n                if (user != null)\n                {\n                    chat.users.Remove(user);\n                    this.hubContext.Clients.All.UserDeleted(chat.users);\n                }\n                return new JsonResult("OK");\n            }\n            else\n            {\n                return NotFound();\n            }\n        }\n<\/pre><\/div>\n\n\n
        N.B. Attraverso l\u2019utilizzo di hubContext.Client.All<\/code> potremo accedere agli eventi a noi utili come UserDeleted <\/code>e UserAdded<\/code>, che trasmetteranno al client la lista di utenti attualmente connessi.<\/em><\/p>\n\n\n\n
        Lato client, invece, nella pagina chiamata UserList.razor<\/em> , iniettiamo HubConnection <\/code>ad inizio pagina,<\/p>\n\n\n
        \n@inject HubConnection HubConnection\n<\/pre><\/div>\n\n\n
        e registriamo gli eventi SignalR nel metodo OnInitializedAsync <\/code>(cio\u00e8 quando il componente viene inizializzato)<\/p>\n\n\n
        \n    protected override async Task OnInitializedAsync()\n    {\n        HubConnection.On<List<User>>("UserAdded", users =>\n        {\n            chat.users = users;\n            StateHasChanged();\n        });\n        HubConnection.On<List<User>>("UserDeleted", users =>\n        {\n            chat.users = users;\n            StateHasChanged();\n        });\n    }\n<\/pre><\/div>\n\n\n
        Il nostro hub, grazie al metodo On<\/code>, si mette \u2018in ascolto<\/em>\u2019  di due gestori eventi :<\/p>\n\n\n\n
         UserAdded <\/code>e UserDeleted <\/code>ai quali il server comunicher\u00e0 la nuova lista di utenti attualmente collegati.<\/p>\n\n\n\n
        Quando un gestore degli eventi viene \u2018aggiornato\u2019<\/em>, il metodo StateHasChanged()<\/code> permette al componente di visualizzare i nuovi dati attraverso la loro ri-renderizzazione.<\/p>\n\n\n\n
        Essere notificato dell\u2019avvenuta connessione di un nuovo utente o di chi ha deciso di lasciare<\/h6>\n\n\n\n
        Quando un utente si inserisce o abbandona la chat, oltre che aggiornare l\u2019elenco degli utenti connessi, l\u2019applicazione dovr\u00e0 notificare a tutti i presenti l\u2019evento appena accaduto mandando un messaggio.<\/p>\n\n\n\n
        Per far questo \u00e8 necessario <\/p>\n\n\n\n
        aggiungere al controller il metodo AddMessage<\/code>, con il quale il nuovo messaggio verr\u00e0 associato alla chat e notificato al client con this.hubContext.Clients.All.MessageAdded(msg)<\/code>,<\/p>\n\n\n
        \n        [HttpPost()]\n        public ActionResult AddMessage([FromBody]  AddingMessageModel msgModel)\n        {\n            Guid chatId = msgModel.ChatId;\n           string userName= msgModel.UserName;\n            string message = msgModel.TextMessage;\n            var chat = chats.SingleOrDefault(t => t.Id == chatId);\n            if (chat != null)\n            {\n                var u= chat.users.SingleOrDefault(u => u.Name == userName);\n                if (u==null)\n                {\n                    u = new User(userName);\n                }\n                var msg = new Message(message,u);\n                chat.messages.Add(msg);\n                this.hubContext.Clients.All.MessageAdded(msg);\n                return new JsonResult(msg);\n            }\n            else\n            {\n                return NotFound();\n            }\n        }\n<\/pre><\/div>\n\n\n
        implementare  il metodo AddMessage <\/code>della classe ChatHttpClient <\/code>con la quale si effettueranno le chiamata al server ,<\/p>\n\n\n
        \npublic async Task&lt;HttpResponseMessage&gt; AddMessage(AddingMessageModel amm)\n{\n            return await this.http.PostAsJsonAsync&lt;AddingMessageModel&gt;("api\/chat", amm);\n}\n<\/pre><\/div>\n\n\n
        e implementare la parte di codice nella Razor Page ChatRoom.razor <\/em>che permetta di svolgere le seguenti operazioni:<\/p>\n\n\n\n
        Fornire all\u2019utente una mini interfaccia per connettersi,<\/p>\n\n\n
        \n@if (!this.isChatting)\n{\n    &lt;p&gt;\n        Inserisci il tuo nome per iniziare a chattare\n    &lt;\/p&gt;\n    &lt;input type="text" maxlength="32" @bind="@username" \/&gt;\n    &lt;button type="button" @onclick="@Chat"&gt;&lt;span class="oi oi-chat" aria-hidden="true"&gt;&lt;\/span&gt; Chat!&lt;\/button&gt;\n    \/\/ Error messages\n    @if (message != null)\n    {\n        &lt;div class="invalid-feedback"&gt;@message&lt;\/div&gt;\n        &lt;small id="emailHelp" class="form-text text-muted"&gt;@message&lt;\/small&gt;\n    }\n}\n<\/pre><\/div>\n\n\n
        e notificare che l\u2019utente si \u00e8 appena connesso implementando il metodo Chat <\/code>che comunicher\u00e0 al server sia di aggiungere un utente (ChatHttpClient.AddUser<\/code>), sia di aggiungere un messaggio (SendAsync<\/code>).<\/p>\n\n\n
        \n    public async Task Chat()\n    {\n        \/\/ check username is valid\n        if (string.IsNullOrWhiteSpace(username))\n        {\n            message = "E' necessario inserire il nome";\n            return;\n        };\n        try\n        {\n            this.isChatting = true;\n            await Task.Delay(1);\n           \n            chat.messages.Clear();\n             string baseUrl = navigationManager.BaseUri;\n            var um = new AddingUserModel(chat.Id, username);\n           await ChatHttpClient.AddUser(um) ;\n          \n            await SendAsync($"[Notice] {username} \u00e8 entrato in chat.");\n        }\n        catch (Exception e)\n        {\n            message = $"ERROR: Failed to start chat client: {e.Message}";\n            isChatting = false;\n        }\n    }\n<\/pre><\/div>\n\n
        \n    private void BroadcastMessage(string name, string message)\n    {\n        var response = ChatHttpClient.AddMessage(new AddingMessageModel(this.chatid, name, message));\n    }\n    private async Task SendAsync(string message)\n    {\n        if (isChatting &amp;&amp; !string.IsNullOrWhiteSpace(message))\n        {\n            BroadcastMessage(username, message);\n            newMessage = string.Empty;\n        }\n    }\n<\/pre><\/div>\n\n\n
        Una volta fatto questo possiamo eseguire il nostro progetto ed ecco qui!<\/p>\n\n\n\n