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:

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

Požadavky

Vytvoření projektu webové aplikace

dotnet new webapp -o SignalRChat
cd SignalRChat
code -r .

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.

dotnet tool install -g Microsoft.Web.LibraryManager.Cli

libman install @microsoft/signalr@latest -p unpkg -d wwwroot/js/signalr --files dist/browser/signalr.js --files dist/browser/signalr.min.js

wwwroot/js/signalr/dist/browser/signalr.js written to disk
wwwroot/js/signalr/dist/browser/signalr.min.js written to disk
Installed library "@microsoft/signalr@latest" to "wwwroot/js/signalr"

dotnet tool install -g Microsoft.Web.LibraryManager.Cli

libman install @microsoft/signalr@latest -p unpkg -d wwwroot/js/signalr --files dist/browser/signalr.js --files dist/browser/signalr.min.js

wwwroot/js/signalr/dist/browser/signalr.js written to disk
wwwroot/js/signalr/dist/browser/signalr.min.js written to disk
Installed library "@microsoft/signalr@latest" to "wwwroot/js/signalr"

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

• 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.

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:

Požadavky

Vytvoření webového projektu

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ů.

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

• 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.

  

Další zdroje informací

• Verze tohoto kurzu pro YouTube