From fdf5dadea7899c22fa05640016f44d28d52de7b6 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Fri, 30 Jun 2023 09:50:12 -0400 Subject: [PATCH 1/2] Blazor SignalR tutorial for .NET 8 --- aspnetcore/blazor/tooling.md | 4 +- .../blazor/tutorials/build-a-blazor-app.md | 10 + .../tutorials/signalr-blazor-preview.md | 454 ++++++++++++++++++ aspnetcore/blazor/tutorials/signalr-blazor.md | 9 +- aspnetcore/toc.yml | 2 + 5 files changed, 470 insertions(+), 9 deletions(-) create mode 100644 aspnetcore/blazor/tutorials/signalr-blazor-preview.md diff --git a/aspnetcore/blazor/tooling.md b/aspnetcore/blazor/tooling.md index 3f215925d4e0..4f95245f1d3b 100644 --- a/aspnetcore/blazor/tooling.md +++ b/aspnetcore/blazor/tooling.md @@ -475,7 +475,7 @@ To create a Blazor app on macOS, use the following guidance: > [!NOTE] > Visual Studio for Mac will be able to create Blazor Web Apps in an upcoming release. - + +This tutorial provides a basic working experience for building a real-time app using SignalR with Blazor. For detailed Blazor guidance, see the [Blazor reference documentation](xref:blazor/index). + +> [!IMPORTANT] +> This is the .NET 8 preview version of this article, which is currently undergoing updates for .NET 8. Some of the features described might not be available or fully working at this time. The work on this article will be completed when .NET 8 reaches the *Release Candidate* stage, which is currently scheduled for September. For the current release, see the [.NET 7 version of this article](xref:blazor/tutorials/signalr-blazor?view=aspnetcore-7.0&preserve-view=true). + +Learn how to: + +> [!div class="checklist"] +> * Create a Blazor project +> * Add the SignalR client library +> * Add a SignalR hub +> * Add SignalR services and an endpoint for the SignalR hub +> * Add Razor component code for chat + +At the end of this tutorial, you'll have a working chat app. + + + +## Prerequisites + +# [Visual Studio](#tab/visual-studio) + +[Visual Studio 2022 Preview](https://visualstudio.microsoft.com/vs/preview/) with the **ASP.NET and web development** workload + +# [Visual Studio Code](#tab/visual-studio-code) + +* [Visual Studio Code](https://code.visualstudio.com/download) +* [C# for Visual Studio Code (latest version)](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp) +* [.NET 8.0 Preview](https://dotnet.microsoft.com/download/dotnet/8.0) if it isn't already installed on the system or if the system doesn't have the latest version installed. + +The Visual Studio Code instructions use the .NET CLI for ASP.NET Core development functions such as project creation. You can follow these instructions on macOS, Linux, or Windows and with any code editor. Minor changes may be required if you use something other than Visual Studio Code. + +# [Visual Studio for Mac](#tab/visual-studio-mac) + +[Visual Studio for Mac 2022 Preview](https://visualstudio.microsoft.com/vs/mac/preview/) with the **.NET** workload + +# [.NET Core CLI](#tab/netcore-cli/) + +[.NET 8.0 Preview](https://dotnet.microsoft.com/download/dotnet/8.0) + +--- + + + +## Create a Blazor Web App + +Follow the guidance for your choice of tooling: + +# [Visual Studio](#tab/visual-studio) + +> [!NOTE] +> Visual Studio 2022 or later and .NET Core SDK 8.0.0 or later are required. + +Create a new project. + +Select the **Blazor Web App** template. Select **Next**. + +Type `BlazorSignalRApp` in the **Project name** field. Confirm the **Location** entry is correct or provide a location for the project. Select **Next**. + +Confirm the **Framework** is .NET 8.0 or later. Select **Create**. + +# [Visual Studio Code](#tab/visual-studio-code) + +In a command shell, execute the following command: + +```dotnetcli +dotnet new blazor -o BlazorSignalRApp +``` + +The `-o|--output` option creates a folder for the project. If you've created a folder for the project and the command shell is open in that folder, omit the `-o|--output` option and value to create the project. + +In Visual Studio Code, open the app's project folder. + +When the dialog appears to add assets to build and debug the app, select **Yes**. Visual Studio Code automatically adds the `.vscode` folder with generated `launch.json` and `tasks.json` files. For information on configuring VS Code assets in the `.vscode` folder, including how to manually add the files to the [solution](xref:blazor/tooling#visual-studio-solution-file-sln), see the **Linux** operating system guidance in . + +# [Visual Studio for Mac](#tab/visual-studio-mac) + +Visual Studio for Mac can't create a Blazor Web App in its UI at this time. Open a command shell with Apple's **Terminal** utility application in macOS's `Applications/Utilities` folder. Change the directory to the location where you want to create the app with the [`ls` command](https://man7.org/linux/man-pages/man1/ls.1.html). For example, use the `ls Desktop` command to change the directory to the desktop. Execute the following command in the command shell: + +```dotnetcli +dotnet new blazor -o BlazorApp +``` + +After the app is created, open the project file (`BlazorApp.csproj`) with Visual Studio for Mac. + +> [!NOTE] +> Visual Studio for Mac will be able to create Blazor Web Apps in an upcoming release. + + + +# [.NET Core CLI](#tab/netcore-cli/) + +In a command shell, execute the following command: + +```dotnetcli +dotnet new blazor -o BlazorSignalRApp +``` + +The `-o|--output` option creates a folder for the project. If you've created a folder for the project and the command shell is open in that folder, omit the `-o|--output` option and value to create the project. + +--- + +## Add the SignalR client library + +# [Visual Studio](#tab/visual-studio/) + +In **Solution Explorer**, right-click the `BlazorSignalRApp` project and select **Manage NuGet Packages**. + +In the **Manage NuGet Packages** dialog, confirm that the **Package source** is set to `nuget.org`. + +With **Browse** and **Include prerelease** selected, type `Microsoft.AspNetCore.SignalR.Client` in the search box. + +In the search results, select the latest **preview** [`Microsoft.AspNetCore.SignalR.Client`](https://www.nuget.org/packages/Microsoft.AspNetCore.SignalR.Client) package. Select **Install**. + +If the **Preview Changes** dialog appears, select **OK**. + +If the **License Acceptance** dialog appears, select **I Accept** if you agree with the license terms. + +# [Visual Studio Code](#tab/visual-studio-code/) + +In the **Integrated Terminal** (**View** > **Terminal** from the toolbar), execute the following command: + +```dotnetcli +dotnet add package Microsoft.AspNetCore.SignalR.Client --prerelease +``` + + + +# [Visual Studio for Mac](#tab/visual-studio-mac) + +In the **Solution** sidebar, right-click the `BlazorSignalRApp` project and select **Manage NuGet Packages**. + +In the **Manage NuGet Packages** dialog, confirm that the **Package source** dropdown list is set to `nuget.org`. + +With **Browse** and **Include prerelease** selected, type `Microsoft.AspNetCore.SignalR.Client` in the search box. + +In the search results, select the checkbox next to the latest **preview** [`Microsoft.AspNetCore.SignalR.Client`](https://www.nuget.org/packages/Microsoft.AspNetCore.SignalR.Client) package. Select **Add Package**. + +If the **License Acceptance** dialog appears, select **Accept** if you agree with the license terms. + +# [.NET Core CLI](#tab/netcore-cli/) + +In a command shell from the project's folder, execute the following command: + +```dotnetcli +dotnet add package Microsoft.AspNetCore.SignalR.Client --prerelease +``` + + + +--- + +## Add a SignalR hub + +Create a `Hubs` (plural) folder and add the following `ChatHub` class (`Hubs/ChatHub.cs`): + +```csharp +using Microsoft.AspNetCore.SignalR; + +namespace BlazorSignalRApp.Hubs; + +public class ChatHub : Hub +{ + public async Task SendMessage(string user, string message) + { + await Clients.All.SendAsync("ReceiveMessage", user, message); + } +} +``` + + + +## Add Razor component support, services, and an endpoint for the SignalR hub + +Open the `Program.cs` file. + +Add the namespaces for and the `ChatHub` class to the top of the file: + +```csharp +using Microsoft.AspNetCore.ResponseCompression; +using BlazorSignalRApp.Hubs; +``` + + + +Locate the line that adds services and configuration for Razor components: + +```csharp +builder.Services.AddRazorComponents(); +``` + +Chain a call to `AddServerComponents` to `AddRazorComponents`. Change the line to the following: + +```csharp +builder.Services.AddRazorComponents().AddServerComponents(); +``` + + + +Add Response Compression Middleware services: + +```csharp +builder.Services.AddResponseCompression(opts => +{ + opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat( + new[] { "application/octet-stream" }); +}); +``` + +Use Response Compression Middleware at the top of the processing pipeline's configuration: + +```csharp +app.UseResponseCompression(); +``` + +Add an endpoint for the hub immediately after the line `app.MapRazorComponents();`: + +```csharp +app.MapHub("/chathub"); +``` + +## Add Razor component code for chat + +Open the `Pages/Index.razor` file. + +Replace the markup with the following code: + + + +```razor +@page "/" +@attribute [RenderModeServer] +@using Microsoft.AspNetCore.SignalR.Client +@inject NavigationManager Navigation +@implements IAsyncDisposable + +Index + +
+ +
+
+ +
+ + +
+ +
    + @foreach (var message in messages) + { +
  • @message
    • + } +
+ +@code { + private HubConnection? hubConnection; + private List messages = new List(); + private string? userInput; + private string? messageInput; + + protected override async Task OnInitializedAsync() + { + hubConnection = new HubConnectionBuilder() + .WithUrl(Navigation.ToAbsoluteUri("/chathub")) + .Build(); + + hubConnection.On("ReceiveMessage", (user, message) => + { + var encodedMsg = $"{user}: {message}"; + messages.Add(encodedMsg); + InvokeAsync(StateHasChanged); + }); + + await hubConnection.StartAsync(); + } + + private async Task Send() + { + if (hubConnection is not null) + { + await hubConnection.SendAsync("SendMessage", userInput, messageInput); + } + } + + public bool IsConnected => + hubConnection?.State == HubConnectionState.Connected; + + public async ValueTask DisposeAsync() + { + if (hubConnection is not null) + { + await hubConnection.DisposeAsync(); + } + } +} +``` + +> [!NOTE] +> Disable Response Compression Middleware in the `Development` environment when using [Hot Reload](xref:test/hot-reload). For more information, see . + +## Run the app + +Follow the guidance for your tooling: + +# [Visual Studio](#tab/visual-studio) + +Press F5 to run the app with debugging or Ctrl+F5 (Windows)/⌘+F5 (macOS) to run the app without debugging. + +# [Visual Studio Code](#tab/visual-studio-code) + +Press F5 to run the app with debugging or Ctrl+F5 (Windows)/⌘+F5 (macOS) to run the app without debugging. + +# [Visual Studio for Mac](#tab/visual-studio-mac) + +Press ⌘+↩ to run the app with debugging or ⌥+⌘+↩ to run the app without debugging. + +> [!IMPORTANT] +> Google Chrome or Microsoft Edge must be the selected browser for a debugging session. + +# [.NET Core CLI](#tab/netcore-cli/) + +In a command shell from the project's folder, execute the following commands: + +```dotnetcli +dotnet run +``` + +--- + +Copy the URL from the address bar, open another browser instance or tab, and paste the URL in the address bar. + +Choose either browser, enter a name and message, and select the button to send the message. The name and message are displayed on both pages instantly: + +![SignalR Blazor sample app open in two browser windows showing exchanged messages.](signalr-blazor/_static/signalr-blazor-finished.png) + +Quotes: *Star Trek VI: The Undiscovered Country* ©1991 [Paramount](https://www.paramountmovies.com/movies/star-trek-vi-the-undiscovered-country) + +## Next steps + +In this tutorial, you learned how to: + +> [!div class="checklist"] +> * Create a Blazor project +> * Add the SignalR client library +> * Add a SignalR hub +> * Add SignalR services and an endpoint for the SignalR hub +> * Add Razor component code for chat + +To learn more about building Blazor apps, see the Blazor documentation: + +> [!div class="nextstepaction"] +> +> [Bearer token authentication with Identity Server, WebSockets, and Server-Sent Events](xref:signalr/authn-and-authz#bearer-token-authentication) + +## Additional resources + +* [Secure a SignalR hub in hosted Blazor WebAssembly apps](xref:blazor/security/webassembly/index#secure-a-signalr-hub) +* +* [SignalR cross-origin negotiation for authentication](xref:blazor/fundamentals/signalr#signalr-cross-origin-negotiation-for-authentication-blazor-webassembly) +* [SignalR configuration](xref:blazor/host-and-deploy/server#signalr-configuration) +* +* +* [Blazor samples GitHub repository (`dotnet/blazor-samples`)](https://github.com/dotnet/blazor-samples) diff --git a/aspnetcore/blazor/tutorials/signalr-blazor.md b/aspnetcore/blazor/tutorials/signalr-blazor.md index 727402e7d39d..cda7475e5707 100644 --- a/aspnetcore/blazor/tutorials/signalr-blazor.md +++ b/aspnetcore/blazor/tutorials/signalr-blazor.md @@ -30,10 +30,7 @@ At the end of this tutorial, you'll have a working chat app. # [Visual Studio](#tab/visual-studio) -Install either of the following: - -* [Visual Studio 2022 or later](https://visualstudio.microsoft.com/downloads/?utm_medium=microsoft&utm_source=learn.microsoft.com&utm_campaign=inline+link&utm_content=download+vs2022) with the **ASP.NET and web development** workload -* [.NET](https://dotnet.microsoft.com/download/dotnet) if it isn't already installed on the system or if the system doesn't have the latest version installed. +[Visual Studio 2022 or later](https://visualstudio.microsoft.com/downloads/?utm_medium=microsoft&utm_source=learn.microsoft.com&utm_campaign=inline+link&utm_content=download+vs2022) with the **ASP.NET and web development** workload # [Visual Studio Code](#tab/visual-studio-code) @@ -45,7 +42,7 @@ The Visual Studio Code instructions use the .NET CLI for ASP.NET Core developmen # [Visual Studio for Mac](#tab/visual-studio-mac) -[Visual Studio for Mac 2022 or later](https://visualstudio.microsoft.com/vs/mac/) +[Visual Studio for Mac 2022 or later](https://visualstudio.microsoft.com/vs/mac/) with the **.NET** workload # [.NET Core CLI](#tab/netcore-cli/) @@ -105,8 +102,6 @@ To configure Visual Studio Code assets in the `.vscode` folder for debugging, se # [Visual Studio for Mac](#tab/visual-studio-mac) -Install the latest version of [Visual Studio for Mac](https://visualstudio.microsoft.com/vs/mac/). When the installer requests the workloads to install, select **.NET**. - Select the **New Project** command from the **File** menu or create a **New** project from the **Start Window**. In the sidebar, select **Web and Console** > **App**. diff --git a/aspnetcore/toc.yml b/aspnetcore/toc.yml index 195a2c7288c4..ff1cc9e6c7db 100644 --- a/aspnetcore/toc.yml +++ b/aspnetcore/toc.yml @@ -373,6 +373,8 @@ items: uid: blazor/tutorials/build-a-blazor-app - name: SignalR with Blazor uid: blazor/tutorials/signalr-blazor + - name: SignalR with Blazor (.NET 8 Preview) + uid: blazor/tutorials/signalr-blazor-preview - name: Learn modules href: /training/paths/build-web-apps-with-blazor/ - name: Blazor Hybrid From da0829ae53c5d5c788b18309402152722dca124a Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Fri, 30 Jun 2023 09:55:10 -0400 Subject: [PATCH 2/2] Updates --- aspnetcore/blazor/tutorials/signalr-blazor-preview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aspnetcore/blazor/tutorials/signalr-blazor-preview.md b/aspnetcore/blazor/tutorials/signalr-blazor-preview.md index b7d812575a43..f9c38da0eb3d 100644 --- a/aspnetcore/blazor/tutorials/signalr-blazor-preview.md +++ b/aspnetcore/blazor/tutorials/signalr-blazor-preview.md @@ -8,7 +8,7 @@ ms.custom: mvc ms.date: 06/30/2023 uid: blazor/tutorials/signalr-blazor-preview --- -# Use ASP.NET Core SignalR with Blazor +# Use ASP.NET Core SignalR with Blazor (.NET 8 Preview)