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

V tomto kurzu se naučíte základy vytváření aplikace v reálném čase pomocí SignalR. Získáte informace pro:

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

Požadavky

Vytvoření projektu webové aplikace

dotnet new webapp -o SignalRChat
code -r SignalRChat

SignalR Přidání klientské knihovny

Knihovna SignalR serverů je součástí sdílené architektury ASP.NET Core. Klientská knihovna JavaScriptu není do projektu zahrnuta automaticky. Pro účely tohoto kurzu pomocí Správce knihovny (LibMan) získejte klientskou knihovnu z unpkg. unpkgje rychlá globální síť pro doručování obsahu pro všechno na npm.

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

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

Downloading file https://unpkg.com/@microsoft/signalr@latest/dist/browser/signalr.js...
wwwroot/js/signalr/dist/browser/signalr.js written to disk
Installed library "@microsoft/signalr@latest" to "wwwroot/js/signalr"

dotnet tool uninstall -g Microsoft.Web.LibraryManager.Cli
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.js

wwwroot/js/signalr/dist/browser/signalr.js written to disk
wwwroot/js/signalr/dist/browser/signalr.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 složce projektu SignalRChat vytvořte Hubs složku.

Hubs Ve složce vytvořte ChatHub třídu s následujícím kódem:

using Microsoft.AspNetCore.SignalR;

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 SignalRHub třídy. Třída Hub spravuje připojení, skupiny a zasílání zpráv.

Metodu SendMessage může volat připojený klient a odeslat zprávu všem klientům. Kód klienta JavaScriptu, který volá metodu, se zobrazí později v kurzu. SignalR kód je asynchronní, aby poskytoval maximální škálovatelnost.

Konfigurovat SignalR

Server SignalR musí být nakonfigurovaný tak, aby předával SignalR požadavky .SignalR Do souboru přidejte následující zvýrazněný kód Program.cs .

using SignalRChat.Hubs;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddSignalR();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    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.MapRazorPages();
app.MapHub<ChatHub>("/chatHub");

app.Run();

Předchozí zvýrazněný kód se přidá SignalR do systémů injektáže závislostí ASP.NET Core a směrování.

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

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

@page
<div class="container">
    <div class="row p-1">
        <div class="col-1">User</div>
        <div class="col-5"><input type="text" id="userInput" /></div>
    </div>
    <div class="row p-1">
        <div class="col-1">Message</div>
        <div class="col-5"><input type="text" class="w-100" id="messageInput" /></div>
    </div>
    <div class="row p-1">
        <div class="col-6 text-end">
            <input type="button" id="sendButton" value="Send Message" />
        </div>
    </div>
    <div class="row p-1">
        <div class="col-6">
            <hr />
        </div>
    </div>
    <div class="row p-1">
        <div class="col-6">
            <ul id="messagesList"></ul>
        </div>
    </div>
</div>
<script src="~/js/signalr/dist/browser/signalr.js"></script>
<script src="~/js/chat.js"></script>

Předchozí kód:

• Vytvoří textová pole a tlačítko odeslat.
• Vytvoří seznam se zobrazením id="messagesList" zpráv přijatých z SignalR centra.
• Obsahuje odkazy na SignalR skripty a chat.js kód aplikace se vytvoří v dalším kroku.

wwwroot/js Ve složce vytvořte chat.js soubor s následujícím kódem:

"use strict";

var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();

//Disable the 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í JavaScript:

• Vytvoří a spustí připojení.
• Přidá do tlačítka odeslat 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á je do seznamu.

Spustit aplikaci

Zkopírujte adresu URL z adresního řádku, otevřete jinou instanci nebo kartu prohlížeče a vložte adresu URL do adresního řádku.

Zvolte některý z prohlížečů, zadejte jméno a zprávu a vyberte tlačítko Odeslat zprávu .

Jméno a zpráva se okamžitě zobrazí na obou stránkách.

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

Publikování do Azure

Informace o nasazení do Azure najdete v tématu Rychlý start: Nasazení webové aplikace ASP.NET. Další informace o službě Azure SignalR najdete v tématu Co je služba AzureSignalR?

Další kroky

• Použití center
• Rozbočovače silného typu
• Ověřování a autorizace v ASP.NET Core SignalR
• Zobrazení nebo stažení ukázkového kódu (postup stažení)

V tomto kurzu se naučíte základy vytváření aplikace v reálném čase pomocí SignalR. Získáte informace pro:

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

Požadavky

Vytvoření projektu webové aplikace

dotnet new webapp -o SignalRChat
code -r SignalRChat

SignalR Přidání klientské knihovny

Knihovna SignalR serverů je součástí sdílené architektury ASP.NET Core. Klientská knihovna JavaScriptu není do projektu zahrnuta automaticky. Pro účely tohoto kurzu pomocí Správce knihovny (LibMan) získejte klientskou knihovnu z unpkg. unpkgje rychlá globální síť pro doručování obsahu pro všechno na npm.

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

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

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

dotnet tool uninstall -g Microsoft.Web.LibraryManager.Cli
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.js

wwwroot/js/signalr/dist/browser/signalr.js written to disk
wwwroot/js/signalr/dist/browser/signalr.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 složce projektu SignalRChat vytvořte Hubs složku.

Hubs Ve složce vytvořte ChatHub třídu s následujícím kódem:

using Microsoft.AspNetCore.SignalR;

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 SignalRHub třídy. Třída Hub spravuje připojení, skupiny a zasílání zpráv.

Metodu SendMessage může volat připojený klient a odeslat zprávu všem klientům. Kód klienta JavaScriptu, který volá metodu, se zobrazí později v kurzu. SignalR kód je asynchronní, aby poskytoval maximální škálovatelnost.

Konfigurovat SignalR

Server SignalR musí být nakonfigurovaný tak, aby předával SignalR požadavky .SignalR Do souboru přidejte následující zvýrazněný kód Program.cs .

using SignalRChat.Hubs;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddSignalR();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    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.MapRazorPages();
app.MapHub<ChatHub>("/chatHub");

app.Run();

Předchozí zvýrazněný kód se přidá SignalR do systémů injektáže závislostí ASP.NET Core a směrování.

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

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

@page
<div class="container">
    <div class="row p-1">
        <div class="col-1">User</div>
        <div class="col-5"><input type="text" id="userInput" /></div>
    </div>
    <div class="row p-1">
        <div class="col-1">Message</div>
        <div class="col-5"><input type="text" class="w-100" id="messageInput" /></div>
    </div>
    <div class="row p-1">
        <div class="col-6 text-end">
            <input type="button" id="sendButton" value="Send Message" />
        </div>
    </div>
    <div class="row p-1">
        <div class="col-6">
            <hr />
        </div>
    </div>
    <div class="row p-1">
        <div class="col-6">
            <ul id="messagesList"></ul>
        </div>
    </div>
</div>
<script src="~/js/signalr/dist/browser/signalr.js"></script>
<script src="~/js/chat.js"></script>

Předchozí kód:

• Vytvoří textová pole a tlačítko odeslat.
• Vytvoří seznam se zobrazením id="messagesList" zpráv přijatých z SignalR centra.
• Obsahuje odkazy na SignalR skripty a chat.js kód aplikace se vytvoří v dalším kroku.

wwwroot/js Ve složce vytvořte chat.js soubor s následujícím kódem:

"use strict";

var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();

//Disable the 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í JavaScript:

• Vytvoří a spustí připojení.
• Přidá do tlačítka odeslat 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á je do seznamu.

Spustit aplikaci

Zkopírujte adresu URL z adresního řádku, otevřete jinou instanci nebo kartu prohlížeče a vložte adresu URL do adresního řádku.

Zvolte některý z prohlížečů, zadejte jméno a zprávu a vyberte tlačítko Odeslat zprávu .

Jméno a zpráva se okamžitě zobrazí na obou stránkách.

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

Publikování do Azure

Informace o nasazení do Azure najdete v tématu Rychlý start: Nasazení webové aplikace ASP.NET. Další informace o službě Azure SignalR najdete v tématu Co je služba AzureSignalR?

Další kroky

• Použití center
• Rozbočovače silného typu
• Ověřování a autorizace v ASP.NET Core SignalR
• Zobrazení nebo stažení ukázkového kódu (postup stažení)

V tomto kurzu se naučíte základy vytváření aplikace v reálném čase pomocí SignalR. Získáte informace pro:

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

Požadavky

Vytvoření projektu webové aplikace

dotnet new webapp -o SignalRChat
code -r SignalRChat

SignalR Přidání klientské knihovny

Knihovna SignalR serverů je součástí sdílené architektury ASP.NET Core. Klientská knihovna JavaScriptu není do projektu zahrnuta automaticky. Pro účely tohoto kurzu pomocí Správce knihovny (LibMan) získejte klientskou knihovnu z unpkg. unpkgje rychlá globální síť pro doručování obsahu pro všechno na npm.

dotnet tool uninstall -g Microsoft.Web.LibraryManager.Cli
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.js

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

dotnet tool uninstall -g Microsoft.Web.LibraryManager.Cli
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.js

wwwroot/js/signalr/dist/browser/signalr.js written to disk
wwwroot/js/signalr/dist/browser/signalr.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 složce projektu SignalRChat vytvořte Hubs složku.

Hubs Ve složce vytvořte ChatHub třídu s následujícím kódem:

using Microsoft.AspNetCore.SignalR;

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 SignalRHub třídy. Třída Hub spravuje připojení, skupiny a zasílání zpráv.

Metodu SendMessage může volat připojený klient a odeslat zprávu všem klientům. Kód klienta JavaScriptu, který volá metodu, se zobrazí později v kurzu. SignalR kód je asynchronní, aby poskytoval maximální škálovatelnost.

Konfigurovat SignalR

Server SignalR musí být nakonfigurovaný tak, aby předával SignalR požadavky .SignalR Do souboru přidejte následující zvýrazněný kód Program.cs .

using SignalRChat.Hubs;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorPages();
builder.Services.AddSignalR();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();
app.MapHub<ChatHub>("/chatHub");

app.Run();

Předchozí zvýrazněný kód se přidá SignalR do systémů injektáže závislostí ASP.NET Core a směrování.

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

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

@page
    <div class="container">
        <div class="row p-1">
            <div class="col-1">User</div>
            <div class="col-5"><input type="text" id="userInput" /></div>
        </div>
        <div class="row p-1">
            <div class="col-1">Message</div>
            <div class="col-5"><input type="text" class="w-100" id="messageInput" /></div>
        </div>
        <div class="row p-1">
            <div class="col-6 text-end">
                <input type="button" id="sendButton" value="Send Message" />
            </div>
        </div>
        <div class="row p-1">
            <div class="col-6">
                <hr />
            </div>
        </div>
        <div class="row p-1">
            <div class="col-6">
                <ul id="messagesList"></ul>
            </div>
        </div>
    </div>
<script src="~/js/signalr/dist/browser/signalr.js"></script>
<script src="~/js/chat.js"></script>

Předchozí kód:

• Vytvoří textová pole a tlačítko odeslat.
• Vytvoří seznam se zobrazením id="messagesList" zpráv přijatých z SignalR centra.
• Obsahuje odkazy na SignalR skripty a chat.js kód aplikace se vytvoří v dalším kroku.

wwwroot/js Ve složce vytvořte chat.js soubor s následujícím kódem:

"use strict";

var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();

//Disable the 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í JavaScript:

• Vytvoří a spustí připojení.
• Přidá do tlačítka odeslat 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á je do seznamu.

Spustit aplikaci

Zkopírujte adresu URL z adresního řádku, otevřete jinou instanci nebo kartu prohlížeče a vložte adresu URL do adresního řádku.

Zvolte některý z prohlížečů, zadejte jméno a zprávu a vyberte tlačítko Odeslat zprávu .

Jméno a zpráva se okamžitě zobrazí na obou stránkách.

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

Publikování do Azure

Informace o nasazení do Azure najdete v tématu Rychlý start: Nasazení webové aplikace ASP.NET. Další informace o službě Azure SignalR najdete v tématu Co je služba AzureSignalR?

Další kroky

• Použití center
• Rozbočovače silného typu
• Ověřování a autorizace v ASP.NET Core SignalR
• Zobrazení nebo stažení ukázkového kódu (postup stažení)

V tomto kurzu se naučíte základy vytváření aplikace v reálném čase pomocí SignalR. Získáte informace pro:

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 .

SignalR Přidání klientské knihovny

Knihovna SignalR serverů je součástí sdílené architektury ASP.NET Core 3.1. Klientská knihovna JavaScriptu není do projektu zahrnuta automaticky. Pro účely tohoto kurzu 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 najdete v npm, node.js správce balíčků.

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

wwwroot/js/signalr/dist/browser/signalr.js written to disk
wwwroot/js/signalr/dist/browser/signalr.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.js

wwwroot/js/signalr/dist/browser/signalr.js written to disk
wwwroot/js/signalr/dist/browser/signalr.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 složce projektu SignalRChat vytvořte složku Hubs .
• Ve složce Hubs vytvořte ChatHub.cs soubor 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 SignalRHub třídy. Třída Hub spravuje připojení, skupiny a zasílání zpráv.

Metodu SendMessage může volat připojený klient a odeslat zprávu všem klientům. Kód klienta JavaScriptu, který volá metodu, se zobrazí později v kurzu. SignalR kód je asynchronní, aby poskytoval maximální škálovatelnost.

Konfigurovat SignalR

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

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

  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ů injektáže závislostí jádra ASP.NET a systémy směrování.

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

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

  @page
      <div class="container">
          <div class="row p-1">
              <div class="col-1">User</div>
              <div class="col-5"><input type="text" id="userInput" /></div>
          </div>
          <div class="row p-1">
              <div class="col-1">Message</div>
              <div class="col-5"><input type="text" class="w-100" id="messageInput" /></div>
          </div>
          <div class="row p-1">
              <div class="col-6 text-end">
                  <input type="button" id="sendButton" value="Send Message" />
              </div>
          </div>
          <div class="row p-1">
              <div class="col-6">
                  <hr />
              </div>
          </div>
          <div class="row p-1">
              <div class="col-6">
                  <ul id="messagesList"></ul>
              </div>
          </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 název a text zprávy a tlačítko odeslat.
  • Vytvoří seznam se zobrazením id="messagesList" zpráv přijatých z SignalR centra.
  • Obsahuje odkazy na SignalR skripty a chat.js kód aplikace, který vytvoříte v další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á do tlačítka odeslat 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á je do seznamu.

Spustit aplikaci

• Zkopírujte adresu URL z adresního řádku, otevřete jinou instanci nebo kartu prohlížeče a vložte adresu URL do adresního řádku.
• Zvolte některý z prohlížečů, zadejte jméno a zprávu a vyberte tlačítko Odeslat zprávu . Jméno a zpráva se okamžitě zobrazí na obou stránkách.

Publikování do Azure

Informace o nasazení do Azure najdete v tématu Rychlý start: Nasazení webové aplikace ASP.NET.

Další kroky

• Použití center
• Rozbočovače silného typu
• Ověřování a autorizace v ASP.NET Core SignalR
• Zobrazení nebo stažení ukázkového kódu (postup stažení)