This tutorial shows you how to build and modify a Blazor Server app. You learn how to:
Build a simple chat room with the Blazor Server app template.
Work with Razor components.
Use event handling and data binding in Razor components.
Quick-deploy to Azure App Service in Visual Studio.
Migrate from local SignalR to Azure SignalR Service.
Important
Raw connection strings appear in this article for demonstration purposes only.
A connection string includes the authorization information required for your application to access Azure SignalR Service. The access key inside the connection string is similar to a root password for your service. In production environments, always protect your access keys. Use Azure Key Vault to manage and rotate your keys securely and secure your connection string using Microsoft Entra ID and authorize access with Microsoft Entra ID.
Avoid distributing access keys to other users, hard-coding them, or saving them anywhere in plain text that is accessible to others. Rotate your keys if you believe they may have been compromised.
Beginning in Visual Studio 2019 version 16.2.0, Azure SignalR Service is built into the web application publish process to make managing the dependencies between the web app and SignalR service much more convenient. You can work without any code changes at the same time:
in a local SignalR instance, in a local development environment.
in Azure SignalR Service for Azure App Service.
Create a Blazor chat app:
In Visual Studio, choose Create a new project.
Select Blazor App.
Name the application and choose a folder.
Select the Blazor Server App template.
Note
Make sure that you've already installed .NET Core SDK 3.0+ to enable Visual Studio to correctly recognize the target framework.
You also can create a project by running the dotnet new command in the .NET CLI:
dotnet new blazorserver -o BlazorChat
Add a new C# file called BlazorChatSampleHub.cs and create a new class BlazorChatSampleHub deriving from the Hub class for the chat app. For more information on creating hubs, see Create and Use Hubs.
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);
}
}
}
Add an endpoint for the hub in the Startup.Configure() method.
To implement the SignalR client, create a new Razor component called ChatRoom.razor under the Pages folder. Use the ChatRoom.razor file or perform the following steps:
Add the @page directive and the using statements. Use the @inject directive to inject the NavigationManager service.
When you deploy the Blazor app to Azure App Service, we recommend that you use Azure SignalR Service. Azure SignalR Service allows for scaling up a Blazor Server app to a large number of concurrent SignalR connections. In addition, the SignalR service's global reach and high-performance datacenters significantly aid in reducing latency due to geography.
Important
In a Blazor Server app, UI states are maintained on the server side, which means a sticky server session is required to preserve state. If there is a single app server, sticky sessions are ensured by design. However, if multiple app servers are in use, the client negotiation and connection may be redirected to different servers, which may lead to an inconsistent UI state management in a Blazor app. Hence, it is recommended to enable sticky server sessions as shown in appsettings.json:
"Azure:SignalR:ServerStickyMode": "Required"
Right-click the project and go to Publish. Use the following settings:
Target: Azure
Specific target: All types of Azure App Service are supported.
App Service: Create or select the App Service instance.
Add the Azure SignalR Service dependency.
After the creation of the publish profile, you can see a recommendation message to add Azure SignalR service under Service Dependencies. Select Configure to create a new or select an existing Azure SignalR Service in the pane.
The service dependency carries out the following activities to enable your app to automatically switch to Azure SignalR Service when on Azure:
Add the Azure SignalR Service NuGet package reference.
Update the profile properties to save the dependency settings.
Configure the secrets store as per your choice.
Add the configuration in appsettings.json to make your app target Azure SignalR Service.
Publish the app.
Now the app is ready to be published. Upon the completion of the publishing process, the app automatically launches in a browser.
Note
The app may require some time to start due to the Azure App Service deployment start latency. You can use the browser debugger tools (usually by pressing F12) to ensure that the traffic has been redirected to Azure SignalR Service.
Configure the hosting startup assembly to use the Azure SignalR SDK. Edit launchSettings.json and add a configuration like the following example inside environmentVariables:
Change a JavaScript web app update mechanism from polling to real-time push-based architecture with SignalR Service, Azure Cosmos DB and Azure Functions. Use Vue.js and JavaScript to use SignalR using Visual Studio Code.
Build end-to-end solutions in Microsoft Azure to create Azure Functions, implement and manage web apps, develop solutions utilizing Azure storage, and more.