Samouczek: rozpoczynanie pracy z platformą ASP.NET Core SignalR

W tym samouczku przedstawiono podstawy tworzenia aplikacji w czasie rzeczywistym przy użyciu polecenia SignalR. Dowiesz się, jak:

• Utwórz projekt internetowy.
• Dodaj bibliotekę SignalR klienta.
• Utwórz SignalR centrum.
• Skonfiguruj projekt tak, aby używał SignalR.
• Dodaj kod, który wysyła komunikaty z dowolnego klienta do wszystkich połączonych klientów.

Na końcu będziesz mieć działającą aplikację do czatu:

Prerequisites

• Najnowsza wersja programu Visual Studio z obciążeniem tworzenia aplikacji internetowych i ASP.NET .

  

Visual Studio Code

• Visual Studio Code
• Zestaw deweloperski języka C# dla programu Visual Studio Code
• Zestaw SDK platformy .NET 10.0

Możesz postępować zgodnie z instrukcjami programu Visual Studio Code w systemach macOS, Linux lub Windows. Zmiany mogą być wymagane, jeśli używasz zintegrowanego środowiska projektowego (IDE) innego niż Visual Studio Code.

Tworzenie projektu aplikacji internetowej

Uruchom najnowszą wersję programu Visual Studio i wybierz pozycję Utwórz nowy projekt.

W oknie dialogowym Tworzenie nowego projektu wybierz pozycję ASP.NET Core Web App (Razor Strony), a następnie wybierz przycisk Dalej.

W oknie dialogowym Konfigurowanie nowego projektu wprowadź SignalRChat w polu Nazwa projektu. Ważne jest, aby nadać projektowi nazwę SignalRChat, z zachowaniem wielkości liter, tak aby przestrzenie nazw były zgodne z kodem w samouczku.

Wybierz Dalej.

W oknie dialogowym Dodatkowe informacje wybierz pozycję .NET 10.0 (obsługa długoterminowa), a następnie wybierz pozycję Utwórz.

Visual Studio Code

W tym samouczku założono znajomość programu VS Code. Aby uzyskać więcej informacji, zobacz Wprowadzenie do programu VS Code

• Wybierz pozycję Nowy terminal z menu Terminal , aby otworzyć zintegrowany terminal.
• Przejdź do katalogu (cd), który będzie zawierać projekt.
• Uruchom następujące polecenia:

dotnet new webapp -o SignalRChat
code -r SignalRChat

Polecenie dotnet new tworzy nowy projekt Razor Pages w folderze SignalRChat.

Polecenie code otwiera folder SignalRChat w bieżącej instancji programu Visual Studio Code.

Program Visual Studio Code może wyświetlić okno dialogowe z pytaniem: Czy ufasz autorom plików w tym folderze?

• Jeśli ufasz wszystkim plikom w folderze nadrzędnym, wybierz pozycję Ufaj autorom wszystkich plików w folderze nadrzędnym.
• Wybierz pozycję Tak. Ufam autorom , ponieważ folder projektu zawiera pliki wygenerowane przez platformę .NET.
• Gdy program Visual Studio Code zażąda dodania zasobów do kompilowania i debugowania projektu, wybierz pozycję Tak. Jeśli program Visual Studio Code nie proponuje dodania zasobów kompilacji i debugowania, wybierz pozycję Widok>Paleta poleceń i wpisz ".NET" w polu wyszukiwania. Z listy poleceń wybierz .NET: Generate Assets for Build and Debug polecenie .

Visual Studio Code dodaje folder .vscode zawierający wygenerowane pliki launch.json i tasks.json.

Dodawanie biblioteki SignalR klienta

Biblioteka serwera SignalR jest uwzględniona we współużytkowanym frameworku ASP.NET Core. Biblioteka klienta języka JavaScript nie jest automatycznie uwzględniana w projekcie. Na potrzeby tego samouczka użyj Menedżera bibliotek (LibMan), aby pobrać bibliotekę kliencką z unpkg. unpkgto szybka, globalna sieć dostarczania zawartości dla wszystkich elementów w witrynie npm.

W Eksploratorze rozwiązań kliknij projekt prawym przyciskiem myszy, a następnie wybierz pozycję Dodaj>Biblioteka po stronie klienta.

W oknie dialogowym Dodawanie biblioteki po stronie klienta:

• Wybierz pozycję unpkg dla dostawcy
• Wprowadź @microsoft/signalr@latest dla Biblioteka.
• Wybierz Wybierz określone pliki, rozwiń folder dist/browser, a następnie wybierz signalr.js i signalr.min.js.
• Ustaw lokalizację docelową na wwwroot/js/signalr/.
• Wybierz Zainstaluj.

Biblioteka LibMan tworzy wwwroot/js/signalr folder i kopiuje do niego wybrane pliki. Plik libman.json jest tworzony przy użyciu następującego kodu:

{
  "version": "3.0",
  "defaultProvider": "unpkg",
  "libraries": [
    {
      "library": "@microsoft/signalr@latest",
      "destination": "wwwroot/lib/microsoft/signalr/",
      "files": [
        "dist/browser/signalr.js",
        "dist/browser/signalr.min.js"
      ]
    }
  ]
}

Visual Studio Code

W zintegrowanym terminalu uruchom następujące polecenia, aby zainstalować bibliotekę LibMan po odinstalowaniu poprzedniej wersji, jeśli istnieje.

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

Note

Domyślnie architektura plików binarnych .NET do zainstalowania reprezentuje obecnie uruchomioną architekturę systemu operacyjnego. Aby określić inną architekturę, zapoznaj się z instrukcjami użycia dotnet tool install polecenia z opcją "--arch". Aby uzyskać więcej informacji, zobacz zgłoszenie GitHub dotnet/aspnetcore.docs nr 29262 - Add '-a arm64' on Apple Silicon.

Przejdź do folderu projektu, który zawiera SignalRChat.csproj plik.

Uruchom następujące polecenie, aby pobrać bibliotekę SignalR klienta przy użyciu biblioteki LibMan. Wyświetlenie danych wyjściowych może potrwać kilka sekund.

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

Parametry określają następujące opcje:

• Użyj dostawcy unpkg.
• Skopiuj pliki do wwwroot/js/signalr miejsca docelowego.
• Skopiuj tylko określone pliki.

Dane wyjściowe wyglądają podobnie do następujących:

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"

Utwórz SignalR koncentrator

Hub to klasa, która służy jako mechanizm wysokiego poziomu obsługujący komunikację między klientem a serwerem.

W folderze projektu SignalRChat utwórz Hubs folder.

W folderze Hubs utwórz klasę ChatHub przy użyciu następującego kodu:

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);
        }
    }
}

Klasa ChatHub dziedziczy z SignalRHub klasy . Klasa Hub zarządza połączeniami, grupami i obsługą komunikatów.

Metoda SendMessage może być wywoływana przez połączonego klienta w celu wysłania komunikatu do wszystkich klientów. Kod klienta JavaScript, który wywołuje metodę, jest wyświetlany w dalszej części samouczka. SignalR kod jest asynchroniczny, aby zapewnić maksymalną skalowalność.

Skonfiguruj SignalR

Serwer SignalR musi być skonfigurowany tak, aby przekazywać żądania SignalR do SignalR. Dodaj następujący wyróżniony kod do Program.cs pliku.

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.UseRouting();

app.UseAuthorization();

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

app.Run();

Powyższy wyróżniony kod dodaje SignalR do systemów wstrzykiwania zależności i routingu ASP.NET Core.

Dodawanie SignalR kodu klienta

Zastąp zawartość w Pages/Index.cshtml pliku następującym kodem:

@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="~/lib/microsoft/signalr/dist/browser/signalr.js"></script>
<script src="~/js/chat.js"></script>

Powyższy znacznik:

• Tworzy pola tekstowe i przycisk przesyłania.
• Tworzy listę z elementem id="messagesList" służącą do wyświetlania komunikatów odbieranych z SignalR centrum.
• Zawiera odwołania w skrypcie do SignalR, a kod aplikacji chat.js zostanie utworzony w następnym kroku.

W folderze wwwroot/js utwórz chat.js plik z następującym kodem:

"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();
});

Powyższy kod JavaScript:

• Tworzy i uruchamia połączenie.
• Dodaje do przycisku przesyłania procedurę obsługi, która wysyła komunikaty do centrum.
• Dołącza do obiektu połączenia procedurę obsługi, która odbiera komunikaty z hubu i dodaje je do listy.

Uruchom aplikację

Naciśnij Ctrl+F5, aby uruchomić aplikację bez debugowania.

Visual Studio Code

Naciśnij Ctrl+F5, aby uruchomić aplikację bez debugowania.

Skopiuj adres URL z paska adresu, otwórz inne okno przeglądarki lub kartę i wklej adres URL do paska adresu.

Wybierz jedną z przeglądarek, wprowadź nazwę i komunikat, a następnie wybierz przycisk Wyślij wiadomość .

Nazwa i komunikat są wyświetlane na obu stronach natychmiast.

Tip

Jeśli aplikacja nie działa, otwórz narzędzia deweloperskie przeglądarki (F12) i przejdź do konsoli. Poszukaj możliwych błędów związanych z kodem HTML i JavaScript. Na przykład jeśli signalr.js został umieszczony w innym folderze, niż wskazano, odwołanie do tego pliku nie zadziała, co spowoduje błąd 404 w konsoli. ERR_SPDY_INADEQUATE_TRANSPORT_SECURITY Jeśli w przeglądarce Chrome wystąpił błąd, uruchom następujące polecenia, aby zaktualizować certyfikat dewelopera:

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

Publikowanie na platformie Azure

Aby uzyskać informacje na temat wdrażania na platformie Azure, zobacz Szybki start: wdrażanie aplikacji internetowej ASP.NET. Aby uzyskać więcej informacji na temat usługi platformy Azure SignalR , zobacz Co to jest usługa platformy Azure SignalR ?.

Dalsze kroki

• Użyj koncentratorów
• Silnie typowane koncentratory
• Uwierzytelnianie i autoryzacja w programie ASP.NET Core SignalR
• Wyświetl lub pobierz przykładowy kod (jak pobrać)