Kurz: Začínáme s ASP.NET CoreSignalR

V tomto kurzu se naučíte základy vytváření aplikací v reálném čase pomocí SignalR . Získáte informace o těchto tématech:

  • Vytvořte webový projekt.
  • Přidejte SignalR klientskou knihovnu.
  • Vytvořte SignalR centrum.
  • Nakonfigurujte projekt tak, aby se používal SignalR .
  • Přidejte kód, který odesílá zprávy od libovolného klienta ke všem připojeným klientům.

Na konci budete mít funkční chatovací aplikaci:

::: No-Loc (Signaler)::: Ukázková aplikace

Požadavky

Vytvoření projektu webové aplikace

  • V nabídce vyberte soubor > nový Project.
  • v dialogovém okně vytvořit nový projekt vyberte ASP.NET Core webová aplikace a pak vyberte další.
  • V dialogovém okně Konfigurovat nový projekt pojmenujte SignalR chat do projektu a pak vyberte vytvořit.
  • v dialogovém okně vytvořit novou webovou aplikaci ASP.NET Core vyberte .net Core a ASP.NET Core 3,1.
  • Vyberte Webová aplikace , chcete-li vytvořit projekt, který používá Razor stránky, a pak vyberte vytvořit.

dialog nové Project v Visual Studio

Přidat SignalR klientskou knihovnu

SignalRknihovna serveru je součástí sdílené architektury ASP.NET Core 3,1. Klientská knihovna pro JavaScript není automaticky obsažena v projektu. Pro tento kurz použijte Správce knihovny (LibMan) k získání klientské knihovny z unpkg. unpkg je síť pro doručování obsahu (CDN), která může doručovat cokoli, co najdete v npm, správce balíčků Node.js.

  • V Průzkumník řešení klikněte pravým tlačítkem myši na projekt a vyberte Přidat > knihovnu na straně klienta.
  • V dialogovém okně přidat Client-Side knihovny vyberte u poskytovatele možnost unpkg.
  • V případě knihovny zadejte @microsoft/signalr@latest .
  • Vyberte zvolit konkrétní soubory, rozbalte složku DIST/prohlížeč a vyberte signalr.js a signalr.min.js.
  • Nastavte cílové umístění na wwwroot/js/signál/ a vyberte nainstalovat.

Dialogové okno Přidat knihovnu Client-Side – výběr knihovny

LibMan vytvoří složku wwwroot/js/signaler a zkopíruje na ni vybrané soubory.

Vytvoření SignalR centra

Centrum je třída, která slouží jako kanál vysoké úrovně, který zpracovává komunikaci mezi klientem a serverem.

  • Ve SignalR složce projektu chatu vytvořte složku Centers .
  • Ve složce Centers vytvořte soubor ChatHub. cs s následujícím kódem:
using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;

namespace SignalRChat.Hubs
{
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
}

ChatHubTřída dědí z SignalR Hub třídy. HubTřída spravuje připojení, skupiny a zasílání zpráv.

SendMessageMetoda může být volána připojeným klientem pro odeslání zprávy všem klientům. JavaScriptový kód klienta, který volá metodu, je uveden dále v tomto kurzu. SignalR kód je asynchronní pro zajištění maximální škálovatelnosti.

Konfigurace SignalR

SignalRServer musí být nakonfigurován na předávání SignalR požadavků SignalR .

  • Do souboru Startup. cs přidejte následující zvýrazněný kód.

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Threading.Tasks;
    using Microsoft.AspNetCore.Builder;
    using Microsoft.AspNetCore.Hosting;
    using Microsoft.AspNetCore.HttpsPolicy;
    using Microsoft.Extensions.Configuration;
    using Microsoft.Extensions.DependencyInjection;
    using Microsoft.Extensions.Hosting;
    using SignalRChat.Hubs;
    
    namespace SignalRChat
    {
        public class Startup
        {
            public Startup(IConfiguration configuration)
            {
                Configuration = configuration;
            }
    
            public IConfiguration Configuration { get; }
    
            // This method gets called by the runtime. Use this method to add services to the container.
            public void ConfigureServices(IServiceCollection services)
            {
                services.AddRazorPages();
                services.AddSignalR();
            }
    
            // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
            public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
            {
                if (env.IsDevelopment())
                {
                    app.UseDeveloperExceptionPage();
                }
                else
                {
                    app.UseExceptionHandler("/Error");
                    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                    app.UseHsts();
                }
    
                app.UseHttpsRedirection();
                app.UseStaticFiles();
    
                app.UseRouting();
    
                app.UseAuthorization();
    
                app.UseEndpoints(endpoints =>
                {
                    endpoints.MapRazorPages();
                    endpoints.MapHub<ChatHub>("/chatHub");
                });
            }
        }
    }
    

    tyto změny se přidají SignalR do systémů pro vkládání a směrování závislostí ASP.NET Core.

Přidat SignalR klientský kód

  • Nahraďte obsah v Pages\Index.cshtml následujícím kódem:

    @page
        <div class="container">
            <div class="row">&nbsp;</div>
            <div class="row">
                <div class="col-2">User</div>
                <div class="col-4"><input type="text" id="userInput" /></div>
            </div>
            <div class="row">
                <div class="col-2">Message</div>
                <div class="col-4"><input type="text" id="messageInput" /></div>
            </div>
            <div class="row">&nbsp;</div>
            <div class="row">
                <div class="col-6">
                    <input type="button" id="sendButton" value="Send Message" />
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <hr />
            </div>
        </div>
        <div class="row">
            <div class="col-6">
                <ul id="messagesList"></ul>
            </div>
        </div>
    <script src="~/js/signalr/dist/browser/signalr.js"></script>
    <script src="~/js/chat.js"></script>
    

    Předchozí kód:

    • Vytvoří textová pole pro text jméno a zprávu a tlačítko Odeslat.
    • Vytvoří seznam s id="messagesList" pro zobrazení zpráv přijatých z SignalR centra.
    • Obsahuje odkazy na skripty SignalR a chat.js kód aplikace, který vytvoříte v následujícím kroku.
  • Ve složce wwwroot/js vytvořte chat.js soubor s následujícím kódem:

    "use strict";
    
    var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();
    
    //Disable send button until connection is established
    document.getElementById("sendButton").disabled = true;
    
    connection.on("ReceiveMessage", function (user, message) {
        var li = document.createElement("li");
        document.getElementById("messagesList").appendChild(li);
        // We can assign user-supplied strings to an element's textContent because it
        // is not interpreted as markup. If you're assigning in any other way, you 
        // should be aware of possible script injection concerns.
        li.textContent = `${user} says ${message}`;
    });
    
    connection.start().then(function () {
        document.getElementById("sendButton").disabled = false;
    }).catch(function (err) {
        return console.error(err.toString());
    });
    
    document.getElementById("sendButton").addEventListener("click", function (event) {
        var user = document.getElementById("userInput").value;
        var message = document.getElementById("messageInput").value;
        connection.invoke("SendMessage", user, message).catch(function (err) {
            return console.error(err.toString());
        });
        event.preventDefault();
    });
    

    Předchozí kód:

    • Vytvoří a spustí připojení.
    • Přidá k tlačítku Odeslat obslužnou rutinu, která odesílá zprávy do centra.
    • Přidá do objektu Connection obslužnou rutinu, která přijímá zprávy z centra a přidá je do seznamu.

Spuštění aplikace

  • Stisknutím kombinace kláves CTRL + F5 aplikaci spusťte bez ladění.
  • Zkopírujte adresu URL z panelu Adresa, otevřete jinou instanci nebo kartu prohlížeče a vložte adresu URL do panelu Adresa.
  • Zvolte buď prohlížeč, zadejte jméno a zprávu a klikněte na tlačítko Odeslat zprávu . Název a zpráva se okamžitě zobrazí na obou stránkách.

::: No-Loc (Signaler)::: Ukázková aplikace

Tip

  • Pokud aplikace nefunguje, otevřete nástroje pro vývojáře v prohlížeči (F12) a pokračujte na konzolu. Můžou se zobrazit chyby týkající se kódu HTML a JavaScriptu. Předpokládejme například, že jste signalr.js do jiné složky, než je směrované. V takovém případě odkaz na tento soubor nebude fungovat a v konzole se zobrazí chyba 404. signalr.js chyba nenašla

  • Pokud se zobrazí chyba ERR_SPDY_INADEQUATE_TRANSPORT_SECURITY Chrome, spuštěním těchto příkazů aktualizujte certifikát pro vývoj:

    dotnet dev-certs https --clean
    dotnet dev-certs https --trust
    

V tomto kurzu se naučíte základy vytváření aplikací v reálném čase pomocí SignalR . Získáte informace o těchto tématech:

  • Vytvořte webový projekt.
  • Přidejte SignalR klientskou knihovnu.
  • Vytvořte SignalR centrum.
  • Nakonfigurujte projekt pro použití SignalR .
  • Přidejte kód, který odesílá zprávy z libovolného klienta všem připojeným klientům.
    Na konci budete mít funkční chatovací aplikaci:  SignalR ukázková aplikace

Požadavky

Upozornění

Pokud používáte sadu Visual Studio 2017, přečtěte si článek dotnet/SDK výdeje #3124 pro informace o .NET Core SDK verzích, které nefungují se sadou Visual Studio.

Vytvoření webového projektu

  • V nabídce vyberte Soubor a > nový Project.

  • V dialogovém okně Nový Project vyberte Nainstalováno > Visual C# > Web > ASP.NET Core Web Application. Projekt pojmnujte SignalR Chat.

    Dialogové Project nový Visual Studio

  • Vyberte Webová aplikace a vytvořte projekt, který používá Razor Pages.

  • Vyberte cílové rozhraní .NET Core, vyberte ASP.NET Core 2.2 a klikněte na OK.

    Dialogové Project nový Visual Studio

Přidání SignalR klientské knihovny

Knihovna SignalR serveru je součástí Microsoft.AspNetCore.App metabalíku. Javascriptová klientská knihovna není do projektu automaticky zahrnutá. Pro tento kurz použijete Správce knihovny (LibMan) k získání klientské knihovny z unpkg. unpkg je síť pro doručování obsahu (CDN), která dokáže doručovat cokoli, co se nachází v npm , Node.js správce balíčků.

  • V Průzkumník řešení klikněte pravým tlačítkem na projekt a vyberte Přidat > knihovnu na straně klienta.

  • V dialogovém Client-Side přidat knihovnu vyberte v části Zprostředkovatel možnost unpkg.

  • V části Knihovna @microsoft/signalr@3 zadejte a vyberte nejnovější verzi, která není ve verzi Preview.

    Dialogové Client-Side Přidat knihovnu – výběr knihovny

  • Vyberte Zvolit konkrétní soubory, rozbalte složku dist/browser a vyberte signalr.js asignalr.min.js.

  • Nastavte Cílové umístění na wwwroot/lib/signalr/ a vyberte Nainstalovat.

    Dialogové Client-Side Přidat knihovnu – výběr souborů a cílů

    LibMan vytvoří složku wwwroot/lib/signalr a zkopíruje do ní vybrané soubory.

Vytvoření SignalR centra

Centrum je třída, která slouží jako kanál vysoké úrovně, který zpracovává komunikaci mezi klientem a serverem.

  • Ve SignalR složce Projektu chatu vytvořte složku Hubs.

  • Ve složce Hubs vytvořte soubor ChatHub.cs s následujícím kódem:

    using Microsoft.AspNetCore.SignalR;
    using System.Threading.Tasks;
    
    namespace SignalRChat.Hubs
    {
        public class ChatHub : Hub
        {
            public async Task SendMessage(string user, string message)
            {
                await Clients.All.SendAsync("ReceiveMessage", user, message);
            }
        }
    }
    

    Třída ChatHub dědí z SignalR Hub třídy . Třída Hub spravuje připojení, skupiny a zasílání zpráv.

    Připojený SendMessage klient může volat metodu a odeslat zprávu všem klientům. Kód klienta JavaScriptu, který volá metodu , se zobrazí později v tomto kurzu. SignalR kód je asynchronní pro zajištění maximální škálovatelnosti.

Konfigurace SignalR

Server SignalR musí být nakonfigurovaný tak, aby SignalR předá požadavky do SignalR .

  • Do souboru Startup.cs přidejte následující zvýrazněný kód.

    using Microsoft.AspNetCore.Builder;
    using Microsoft.AspNetCore.Hosting;
    using Microsoft.AspNetCore.Http;
    using Microsoft.AspNetCore.Mvc;
    using Microsoft.Extensions.Configuration;
    using Microsoft.Extensions.DependencyInjection;
    using SignalRChat.Hubs;
    
    namespace SignalRChat
    {
        public class Startup
        {
            public Startup(IConfiguration configuration)
            {
                Configuration = configuration;
            }
    
            public IConfiguration Configuration { get; }
    
            // This method gets called by the runtime. Use this method to add services to the container.
            public void ConfigureServices(IServiceCollection services)
            {
                services.Configure<CookiePolicyOptions>(options =>
                {
                    // This lambda determines whether user consent for non-essential cookies is needed for a given request.
                    options.CheckConsentNeeded = context => true;
                    options.MinimumSameSitePolicy = SameSiteMode.None;
                });
    
    
                services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
    
                services.AddSignalR();
            }
    
            // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
            public void Configure(IApplicationBuilder app, IHostingEnvironment env)
            {
                if (env.IsDevelopment())
                {
                    app.UseDeveloperExceptionPage();
                }
                else
                {
                    app.UseExceptionHandler("/Error");
                    app.UseHsts();
                }
    
                app.UseHttpsRedirection();
                app.UseStaticFiles();
                app.UseCookiePolicy();
                app.UseSignalR(routes =>
                {
                    routes.MapHub<ChatHub>("/chathub");
                });
                app.UseMvc();
            }
        }
    }
    

    Tyto změny SignalR přidávají do systému ASP.NET Core závislostí a middlewarového kanálu.

Přidání SignalR klientského kódu

  • Nahraďte obsah ve složce Pages\Index.cshtml následujícím kódem:

    @page
    <div class="container">
        <div class="row">&nbsp;</div>
        <div class="row">
            <div class="col-6">&nbsp;</div>
            <div class="col-6">
                User..........<input type="text" id="userInput" />
                <br />
                Message...<input type="text" id="messageInput" />
                <input type="button" id="sendButton" value="Send Message" />
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <hr />
            </div>
        </div>
        <div class="row">
            <div class="col-6">&nbsp;</div>
            <div class="col-6">
                <ul id="messagesList"></ul>
            </div>
        </div>
    </div>
    <script src="~/lib/signalr/dist/browser/signalr.js"></script>
    <script src="~/js/chat.js"></script>
    

    Předchozí kód:

    • Vytvoří textová pole pro název a text zprávy a tlačítko odeslat.
    • Vytvoří seznam s pro id="messagesList" zobrazení zpráv přijatých z SignalR centra.
    • Obsahuje odkazy na skripty a SignalR chat.js kódu aplikace, který vytvoříte v dalším kroku.
  • Ve složce wwwroot/js vytvořte souborchat.js následujícím kódem:

    "use strict";
    
    var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();
    
    //Disable send button until connection is established
    document.getElementById("sendButton").disabled = true;
    
    connection.on("ReceiveMessage", function (user, message) {
        var msg = message.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
        var encodedMsg = user + " says " + msg;
        var li = document.createElement("li");
        li.textContent = encodedMsg;
        document.getElementById("messagesList").appendChild(li);
    });
    
    connection.start().then(function(){
        document.getElementById("sendButton").disabled = false;
    }).catch(function (err) {
        return console.error(err.toString());
    });
    
    document.getElementById("sendButton").addEventListener("click", function (event) {
        var user = document.getElementById("userInput").value;
        var message = document.getElementById("messageInput").value;
        connection.invoke("SendMessage", user, message).catch(function (err) {
            return console.error(err.toString());
        });
        event.preventDefault();
    });
    

    Předchozí kód:

    • Vytvoří a spustí připojení.
    • Přidá k tlačítku pro odeslání obslužnou rutinu, která odesílá zprávy do centra.
    • Přidá do objektu připojení obslužnou rutinu, která přijímá zprávy z centra a přidává je do seznamu.

Spuštění aplikace

  • Stisknutím kombinace kláves CTRL+F5 spusťte aplikaci bez ladění.
  • Zkopírujte adresu URL z adresního řádku, otevřete jinou instanci nebo kartu prohlížeče a vložte ji do adresního řádku.

  • Zvolte některý z prohlížečů, zadejte název a zprávu a vyberte tlačítko Send Message (Odeslat zprávu).

    Název a zpráva se okamžitě zobrazí na obou stránkách.

    SignalR ukázková aplikace

Tip

Pokud aplikace nefunguje, otevřete vývojářské nástroje prohlížeče (F12) a přejděte do konzoly. Můžou se zobrazit chyby související s kódem HTML a JavaScriptu. Předpokládejme například, že jste signalr.js do jiné složky, než do které jste nasměrovaní. V takovém případě odkaz na tento soubor nebude fungovat a v konzole se zobrazí chyba 404.
signalr.js chyba nenašla

Další zdroje informací