Oktatóanyag: Blazor Server-csevegőalkalmazás létrehozása

Ez az oktatóanyag bemutatja, hogyan hozhat létre és módosíthat Blazor Server-alkalmazásokat. A következőket fogja megtanulni:

• Hozzon létre egy egyszerű csevegőszobát a Blazor Server alkalmazássablonnal.
• Razor-összetevőkkel végzett munka.
• Eseménykezelés és adatkötés használata a Razor-összetevőkben.
• Gyors üzembe helyezés Azure-alkalmazás Szolgáltatásban a Visual Studióban.
• Migrálás a helyi SignalR-ből az Azure SignalR Szolgáltatásba.

Ismerje meg.

Lépésről lépésre történő buildelés

Próbálja ki a Blazor bemutatóját

Előfeltételek

• A .NET Core 3.0 SDK telepítése (verzió>= 3.0.100)
• A Visual Studio 2019 telepítése (verzió >= 16.3)

Problémákat tapasztal? Tudassa velünk.

Helyi csevegőszoba létrehozása a Blazor Server alkalmazásban

A Visual Studio 2019 16.2.0-s verziójától kezdve az Azure SignalR Service a webalkalmazás közzétételi folyamatába van beépítve, hogy a webalkalmazás és a SignalR szolgáltatás közötti függőségek kezelése sokkal kényelmesebb legyen. A helyi SignalR-példányban helyi fejlesztési környezetben dolgozhat, és az Azure SignalR Service-ben is dolgozhat Azure-alkalmazás szolgáltatáshoz, kódmódosítások nélkül.

1. Blazor-csevegőalkalmazás létrehozása:

   1. A Visual Studióban válassza az Új projekt létrehozása lehetőséget.

   2. Válassza a Blazor-alkalmazás lehetőséget.

   3. Nevezze el az alkalmazást, és válasszon egy mappát.

   4. Válassza ki a Blazor Server-alkalmazássablont .

      Feljegyzés

      Győződjön meg arról, hogy már telepítette a .NET Core SDK 3.0+-t, hogy a Visual Studio megfelelően felismerje a cél keretrendszert.

      

   5. Projekt létrehozásához futtassa a parancsot a dotnet new .NET parancssori felületén:

      dotnet new blazorserver -o BlazorChat
      

2. Adjon hozzá egy új C#-fájlt, BlazorChatSampleHub.cs és hozzon létre egy új osztályt BlazorChatSampleHub , amely a Hub csevegőalkalmazás osztályából származik. A hubok létrehozásáról további információt a Hubok létrehozása és használata című témakörben talál.

   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. Adjon hozzá egy végpontot a hubhoz a Startup.Configure() metódusban.

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

4. Telepítse a Microsoft.AspNetCore.SignalR.Client csomagot a SignalR-ügyfél használatához.

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

5. Hozzon létre egy új Razor-összetevőtChatRoom.razor a mappában a Pages SignalR-ügyfél implementálásához. Kövesse az alábbi lépéseket, vagy használja a ChatRoom.razor fájlt.

   1. Adja hozzá az @page irányelvet és a használatot. Használja az @inject irányelvet a szolgáltatás injektálásához NavigationManager .

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

   2. @code A szakaszban adja hozzá a következő tagokat az új SignalR-ügyfélhez üzenetek küldéséhez és fogadásához.

      @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. Adja hozzá a felhasználói felületi korrektúrát a szakasz előtt a @code SignalR-ügyféllel való interakcióhoz.

      <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. Frissítse az összetevőt NavMenu.razor egy új NavLink összetevő beszúrásához, amely a csevegőszobára NavMenuCssClassmutató hivatkozást tartalmaz.

   <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. Adjon hozzá néhány CSS-osztályt a fájlhoz a site.css csevegőoldal felhasználói felületi elemeinek stílusához.

   /* 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. Nyomja le az F5 billentyűt az alkalmazás futtatásához. Most elindíthatja a csevegést:

   

Problémákat tapasztal? Tudassa velünk.

Közzététel az Azure platformon

Amikor üzembe helyezi a Blazor alkalmazást Azure-alkalmazás Szolgáltatásban, javasoljuk, hogy az Azure SignalR Service-t használja. Az Azure SignalR Service lehetővé teszi a Blazor Server-alkalmazások nagy számú egyidejű SignalR-kapcsolatra való felskálázását. Emellett a SignalR szolgáltatás globális elérése és nagy teljesítményű adatközpontjai jelentősen elősegítik a földrajzi hely miatti késés csökkentését.

Fontos

A Blazor Server-alkalmazásokban a felhasználói felület állapotai a kiszolgáló oldalán maradnak, ami azt jelenti, hogy az állapot megőrzéséhez ragadós kiszolgálói munkamenetre van szükség. Ha egyetlen alkalmazáskiszolgáló van, a ragadós munkameneteket a tervezés biztosítja. Ha azonban több alkalmazáskiszolgáló is létezik, előfordulhat, hogy az ügyfél-egyeztetés és a kapcsolat különböző kiszolgálókra kerül, ami inkonzisztens felhasználói felületi állapotkezeléshez vezethet egy Blazor-alkalmazásban. Ezért javasoljuk, hogy engedélyezze a ragadós kiszolgálói munkameneteket az alábbiak szerint appsettings.json:

"Azure:SignalR:ServerStickyMode": "Required"

1. Kattintson a jobb gombbal a projektre, és válassza a Közzététel parancsot. Használja a következő beállításokat:

   • Cél: Azure
   • Konkrét cél: A Azure-alkalmazás szolgáltatás minden típusa támogatott.
   • App Service: Hozza létre vagy válassza ki az App Service-példányt.

   

2. Adja hozzá az Azure SignalR-szolgáltatás függőségét.

   A közzétételi profil létrehozása után egy ajánlási üzenet jelenik meg az Azure SignalR szolgáltatás szolgáltatás függőségei alatti hozzáadásához. Válassza a Konfigurálás lehetőséget új létrehozásához, vagy válasszon ki egy meglévő Azure SignalR-szolgáltatást a panelen.

   

   A szolgáltatásfüggőség a következő tevékenységeket hajtja végre, hogy az alkalmazás automatikusan átválthasson az Azure SignalR szolgáltatásra az Azure-ban:

   • Frissítsen HostingStartupAssembly az Azure SignalR Szolgáltatás használatára.
   • Adja hozzá az Azure SignalR Service NuGet-csomagreferenciát.
   • Frissítse a profiltulajdonságokat a függőségi beállítások mentéséhez.
   • Konfigurálja a titkos kulcstárat a választott módon.
   • Adja hozzá a konfigurációt appsettings.json, hogy az alkalmazás az Azure SignalR Service-t célozza meg.

   

3. Tegye közzé az alkalmazást.

   Most már készen áll az alkalmazás közzétételére. A közzétételi folyamat befejezése után az alkalmazás automatikusan elindul egy böngészőben.

   Feljegyzés

   Előfordulhat, hogy az alkalmazás indítása némi időt igényel a Azure-alkalmazás szolgáltatás üzembe helyezési késése miatt. A böngésző hibakereső eszközeivel (általában az F12 billentyű lenyomásával) biztosíthatja, hogy a forgalom átirányítva legyen az Azure SignalR Szolgáltatásba.

   

Problémákat tapasztal? Tudassa velünk.

Az Azure SignalR szolgáltatás engedélyezése helyi fejlesztéshez

1. Adjon hozzá egy hivatkozást az Azure SignalR SDK-ra az alábbi paranccsal.

   dotnet add package Microsoft.Azure.SignalR
   

2. Adjon hozzá egy hívást a beadáshoz AddAzureSignalR()Startup.ConfigureServices() az alább látható módon.

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

3. Konfigurálja az Azure SignalR service kapcsolati sztring appsettings.json vagy a Secret Manager eszközzel.

Feljegyzés

A 2. lépés lecserélhető a Hosting Startup Assemblies konfigurálásával a SignalR SDK használatára.

1. Adja hozzá a konfigurációt az Azure SignalR Service bekapcsolásához a appsettings.json:

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

2. Konfigurálja az üzemeltetési indítási szerelvényt az Azure SignalR SDK használatára. Indítsa el Gépház.json és adjon hozzá egy konfigurációt, például a következő példában:environmentVariables

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

Problémákat tapasztal? Tudassa velünk.

Az erőforrások eltávolítása

Ha törölni szeretné a jelen oktatóanyag elvégzése során létrehozott erőforrásokat, törölje az erőforráscsoportot az Azure Portalon.

További erőforrások

• ASP.NET Core Blazor

Következő lépések

Ez az oktatóanyag bemutatta, hogyan végezheti el az alábbi műveleteket:

• Hozzon létre egy egyszerű csevegőszobát a Blazor Server alkalmazássablonnal.
• Razor-összetevőkkel végzett munka.
• Eseménykezelés és adatkötés használata a Razor-összetevőkben.
• Gyors üzembe helyezés Azure-alkalmazás Szolgáltatásban a Visual Studióban.
• Migrálás a helyi SignalR-ből az Azure SignalR Szolgáltatásba.

További információ a magas rendelkezésre állásról:

Rugalmasság és vészhelyreállítás