Kurz: Vytvoření chatovací aplikace Blazor Serveru

  • Článek

V tomto kurzu se dozvíte, jak sestavit a upravit aplikaci Blazor Server. Získáte následující informace:

  • Vytvořte jednoduchou chatovací místnost pomocí šablony aplikace Blazor Server.
  • Práce s komponentami Razor
  • Použití zpracování událostí a datové vazby v komponentách Razor.
  • Rychlé nasazení do služby Aplikace Azure v sadě Visual Studio
  • Migrace z místní služby SignalR do služby Azure SignalR

Jste připravení začít?

Podrobné sestavení

Vyzkoušet ukázku Blazoru

Požadavky

Máte problémy? Dejte nám vědět.

Vytvoření místní chatovací místnosti v aplikaci Blazor Server

Počínaje sadou Visual Studio 2019 verze 16.2.0 je služba Azure SignalR integrovaná do procesu publikování webové aplikace, aby byla správa závislostí mezi webovou aplikací a službou SignalR mnohem pohodlnější. V místním vývojovém prostředí můžete pracovat v místní instanci služby SignalR a pracovat ve službě Azure SignalR pro službu Aplikace Azure Současně bez jakýchkoli změn kódu.

  1. Vytvoření chatovací aplikace Blazor:

    1. V sadě Visual Studio zvolte Vytvořit nový projekt.

    2. Vyberte aplikaci Blazor.

    3. Pojmenujte aplikaci a zvolte složku.

    4. Vyberte šablonu aplikace Blazor Server.

      Poznámka:

      Ujistěte se, že už máte nainstalovanou sadu .NET Core SDK 3.0 nebo novější, abyste sadě Visual Studio umožnili správně rozpoznat cílovou architekturu.

      In Create a new project, select the Blazor app template.

    5. Projekt můžete vytvořit také spuštěním dotnet new příkazu v rozhraní příkazového řádku .NET:

      dotnet new blazorserver -o BlazorChat

  2. Přidejte nový soubor jazyka C# s názvem BlazorChatSampleHub.cs a vytvořte novou třídu BlazorChatSampleHub odvozenou z Hub třídy pro chatovací aplikaci. Další informace o vytváření center najdete v tématu Vytváření a používání center.

    using System;
using System.Threading.Tasks;
using Microsoft.AspNetCore.SignalR;

namespace BlazorChat
{
    public class BlazorChatSampleHub : Hub
    {
        public const string HubUrl = "/chat";

        public async Task Broadcast(string username, string message)
        {
            await Clients.All.SendAsync("Broadcast", username, message);
        }

        public override Task OnConnectedAsync()
        {
            Console.WriteLine($"{Context.ConnectionId} connected");
            return base.OnConnectedAsync();
        }

        public override async Task OnDisconnectedAsync(Exception e)
        {
            Console.WriteLine($"Disconnected {e?.Message} {Context.ConnectionId}");
            await base.OnDisconnectedAsync(e);
        }
    }
}

  3. Přidejte koncový bod pro centrum v metodě Startup.Configure() .

    app.UseEndpoints(endpoints =>
{
    endpoints.MapBlazorHub();
    endpoints.MapFallbackToPage("/_Host");
    endpoints.MapHub<BlazorChatSampleHub>(BlazorChatSampleHub.HubUrl);
});

  4. Microsoft.AspNetCore.SignalR.Client Nainstalujte balíček pro použití klienta SignalR.

    dotnet add package Microsoft.AspNetCore.SignalR.Client --version 3.1.7

  5. Vytvořte novou komponentuPages Razor volanou ChatRoom.razor ve složce pro implementaci klienta SignalR. Postupujte podle následujících kroků nebo použijte soubor ChatRoom.razor .

    1. Přidejte direktivu @page a příkazy using. Použijte direktivu @injectNavigationManager k vložení služby.

      @page "/chatroom"
@inject NavigationManager navigationManager
@using Microsoft.AspNetCore.SignalR.Client;

    2. @code V části přidejte do nového klienta SignalR následující členy pro odesílání a příjem zpráv.

      @code {
    // flag to indicate chat status
    private bool _isChatting = false;

    // name of the user who will be chatting
    private string _username;

    // on-screen message
    private string _message;

    // new message input
    private string _newMessage;

    // list of messages in chat
    private List<Message> _messages = new List<Message>();

    private string _hubUrl;
    private HubConnection _hubConnection;

    public async Task Chat()
    {
        // check username is valid
        if (string.IsNullOrWhiteSpace(_username))
        {
            _message = "Please enter a name";
            return;
        };

        try
        {
            // Start chatting and force refresh UI.
            _isChatting = true;
            await Task.Delay(1);

            // remove old messages if any
            _messages.Clear();

            // Create the chat client
            string baseUrl = navigationManager.BaseUri;

            _hubUrl = baseUrl.TrimEnd('/') + BlazorChatSampleHub.HubUrl;

            _hubConnection = new HubConnectionBuilder()
                .WithUrl(_hubUrl)
                .Build();

            _hubConnection.On<string, string>("Broadcast", BroadcastMessage);

            await _hubConnection.StartAsync();

            await SendAsync($"[Notice] {_username} joined chat room.");
        }
        catch (Exception e)
        {
            _message = $"ERROR: Failed to start chat client: {e.Message}";
            _isChatting = false;
        }
    }

    private void BroadcastMessage(string name, string message)
    {
        bool isMine = name.Equals(_username, StringComparison.OrdinalIgnoreCase);

        _messages.Add(new Message(name, message, isMine));

        // Inform blazor the UI needs updating
        InvokeAsync(StateHasChanged);
    }

    private async Task DisconnectAsync()
    {
        if (_isChatting)
        {
            await SendAsync($"[Notice] {_username} left chat room.");

            await _hubConnection.StopAsync();
            await _hubConnection.DisposeAsync();

            _hubConnection = null;
            _isChatting = false;
        }
    }

    private async Task SendAsync(string message)
    {
        if (_isChatting && !string.IsNullOrWhiteSpace(message))
        {
            await _hubConnection.SendAsync("Broadcast", _username, message);

            _newMessage = string.Empty;
        }
    }

    private class Message
    {
        public Message(string username, string body, bool mine)
        {
            Username = username;
            Body = body;
            Mine = mine;
        }

        public string Username { get; set; }
        public string Body { get; set; }
        public bool Mine { get; set; }

        public bool IsNotice => Body.StartsWith("[Notice]");

        public string CSS => Mine ? "sent" : "received";
    }
}

    3. Přidejte kód uživatelského rozhraní před @code oddíl pro interakci s klientem SignalR.

      <h1>Blazor SignalR Chat Sample</h1>
<hr />

@if (!_isChatting)
{
    <p>
        Enter your name to start chatting:
    </p>

    <input type="text" maxlength="32" @bind="@_username" />
    <button type="button" @onclick="@Chat"><span class="oi oi-chat" aria-hidden="true"></span> Chat!</button>

    // Error messages
    @if (_message != null)
    {
        <div class="invalid-feedback">@_message</div>
        <small id="emailHelp" class="form-text text-muted">@_message</small>
    }
}
else
{
    // banner to show current user
    <div class="alert alert-secondary mt-4" role="alert">
        <span class="oi oi-person mr-2" aria-hidden="true"></span>
        <span>You are connected as <b>@_username</b></span>
        <button class="btn btn-sm btn-warning ml-md-auto" @onclick="@DisconnectAsync">Disconnect</button>
    </div>
    // display messages
    <div id="scrollbox">
        @foreach (var item in _messages)
        {
            @if (item.IsNotice)
            {
                <div class="alert alert-info">@item.Body</div>
            }
            else
            {
                <div class="@item.CSS">
                    <div class="user">@item.Username</div>
                    <div class="msg">@item.Body</div>
                </div>
            }
        }
        <hr />
        <textarea class="input-lg" placeholder="enter your comment" @bind="@_newMessage"></textarea>
        <button class="btn btn-default" @onclick="@(() => SendAsync(_newMessage))">Send</button>
    </div>
}

  6. Aktualizujte komponentu NavMenu.razor tak, aby vložil novou NavLink komponentu, aby odkaz na chatovací místnost v části NavMenuCssClass.

    <li class="nav-item px-3">
    <NavLink class="nav-link" href="chatroom">
        <span class="oi oi-chat" aria-hidden="true"></span> Chat room
    </NavLink>
</li>

  7. Přidejte do site.css souboru několik tříd CSS, abyste mohli stylovat prvky uživatelského rozhraní na stránce chatu.

    /* improved for chat text box */
textarea {
    border: 1px dashed #888;
    border-radius: 5px;
    width: 80%;
    overflow: auto;
    background: #f7f7f7
}

/* improved for speech bubbles */
.received, .sent {
    position: relative;
    font-family: arial;
    font-size: 1.1em;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

.received:after, .sent:after {
    content: '';
    border: 20px solid transparent;
    position: absolute;
    margin-top: -30px;
}

.sent {
    background: #03a9f4;
    color: #fff;
    margin-left: 10%;
    top: 50%;
    text-align: right;
}

.received {
    background: #4CAF50;
    color: #fff;
    margin-left: 10px;
    margin-right: 10%;
}

.sent:after {
    border-left-color: #03a9f4;
    border-right: 0;
    right: -20px;
}

.received:after {
    border-right-color: #4CAF50;
    border-left: 0;
    left: -20px;
}

/* div within bubble for name */
.user {
    font-size: 0.8em;
    font-weight: bold;
    color: #000;
}

.msg {
    /*display: inline;*/
}

  8. Stisknutím klávesy F5 spusťte aplikaci. Teď můžete zahájit chat:

    An animated chat between Bob and Alice is shown. Alice says Hello, Bob says Hi.

Máte problémy? Dejte nám vědět.

Publikování do Azure

Když nasadíte aplikaci Blazor do služby Aplikace Azure Service, doporučujeme používat službu Azure SignalR. Služba Azure SignalR umožňuje vertikálně navýšit kapacitu aplikace Blazor Server na velký počet souběžných připojení SignalR. Globální dosah služby SignalR a vysoce výkonná datacentra navíc výrazně pomáhají snížit latenci kvůli zeměpisné poloze.

Důležité

V aplikaci Blazor Server se stavy uživatelského rozhraní udržují na straně serveru, což znamená, že k zachování stavu se vyžaduje relace rychlého serveru. Pokud existuje jeden aplikační server, jsou rychlé relace zajištěny návrhem. Pokud ale existuje více aplikačních serverů, je pravděpodobné, že vyjednávání klienta a připojení může vést k různým serverům, což může vést k nekonzistentní správě stavu uživatelského rozhraní v aplikaci Blazor. Proto se doporučuje povolit rychlé relace serveru, jak je znázorněno níže v appsettings.json:

"Azure:SignalR:ServerStickyMode": "Required"

  1. Klikněte pravým tlačítkem myši na projekt a přejděte na Publikovat. Použijte následující nastavení:

    • Cíl: Azure
    • Konkrétní cíl: Podporují se všechny typy Aplikace Azure Služby.
    • App Service: Vytvořte nebo vyberte instanci služby App Service.

    The animation shows selection of Azure as target, and then Azure App Serice as specific target.

  2. Přidejte závislost služby Azure SignalR.

    Po vytvoření profilu publikování se zobrazí zpráva s doporučením pro přidání služby Azure SignalR v části Závislosti služby. Vyberte Konfigurovat , pokud chcete vytvořit novou službu, nebo v podokně vyberte existující službu Azure SignalR.

    On Publish, the link to Configure is highlighted.

    Závislost služby provede následující aktivity, které vaší aplikaci umožní automaticky přepnout do služby Azure SignalR, když je v Azure:

    • Aktualizujte HostingStartupAssembly službu Azure SignalR Service.
    • Přidejte odkaz na balíček NuGet služby Azure SignalR Service.
    • Aktualizujte vlastnosti profilu a uložte nastavení závislostí.
    • Nakonfigurujte úložiště tajných kódů podle vašeho výběru.
    • Přidejte konfiguraci do appsettings.json , aby vaše aplikace byla cílová služba Azure SignalR.

    On Summary of changes, the checkboxes are used to select all dependencies.

  3. Umožňuje publikovat aplikaci.

    Aplikace je teď připravená k publikování. Po dokončení procesu publikování se aplikace automaticky spustí v prohlížeči.

    Poznámka:

    Spuštění aplikace může nějakou dobu vyžadovat kvůli latenci spuštění služby Aplikace Azure Service. Pomocí nástrojů ladicího programu prohlížeče (obvykle stisknutím klávesy F12) můžete zajistit, aby se provoz přesměroval do služby Azure SignalR.

    Blazor SignalR Chat Sample has a text box for your name, and a Chat! button to start a chat.

Máte problémy? Dejte nám vědět.

Povolení služby Azure SignalR pro místní vývoj

  1. Pomocí následujícího příkazu přidejte odkaz na sadu Azure SignalR SDK.

    dotnet add package Microsoft.Azure.SignalR

  2. Přidejte volání AddAzureSignalR()Startup.ConfigureServices() , jak je znázorněno níže.

    public void ConfigureServices(IServiceCollection services)
{
    ...
    services.AddSignalR().AddAzureSignalR();
    ...
}

  3. Nakonfigurujte službu Azure SignalR Service připojovací řetězec buď v appsettings.json, nebo pomocí nástroje Secret Manager.

Poznámka:

Krok 2 lze nahradit konfigurací hostování spouštěcích sestavení pro použití sady SignalR SDK.

  1. Přidejte konfiguraci pro zapnutí služby Azure SignalR v appsettings.json:

    "Azure": {
  "SignalR": {
    "Enabled": true,
    "ConnectionString": <your-connection-string>       
  }
}

  2. Nakonfigurujte spouštěcí sestavení hostování tak, aby používalo sadu Azure SignalR SDK. Upravte spuštění Nastavení.json a přidejte do tohoto příkladu environmentVariableskonfiguraci:

    "environmentVariables": {
    ...,
   "ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.Azure.SignalR"
 }

Máte problémy? Dejte nám vědět.

Vyčištění prostředků

Pokud chcete vyčistit prostředky vytvořené v tomto kurzu, pomocí webu Azure Portal odstraňte skupinu prostředků.

Další materiály

Další kroky

V tomto kurzu jste se naučili, jak:

  • Vytvořte jednoduchou chatovací místnost pomocí šablony aplikace Blazor Server.
  • Práce s komponentami Razor
  • Použití zpracování událostí a datové vazby v komponentách Razor.
  • Rychlé nasazení do služby Aplikace Azure v sadě Visual Studio
  • Migrace z místní služby SignalR do služby Azure SignalR

Přečtěte si další informace o vysoké dostupnosti:

Odolnost a zotavení po havárii