Skip to content

Commit cc93458

Browse files
committed
minor update.
1 parent 87d87e6 commit cc93458

File tree

5 files changed

+35
-27
lines changed

5 files changed

+35
-27
lines changed

docs/images/blazorchat-azure.png

73.2 KB
Loading

docs/images/blazorchat-profile.gif

90.5 KB
Loading
1.56 KB
Loading
1.07 KB
Loading

samples/BlazorChat/README.md

Lines changed: 35 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
# Build Blazor Server chat app
22

3-
This tutorial shows you how to build and modify a Blazor server app. You'll learn how to:
3+
This tutorial shows you how to build and modify a Blazor Server app. You'll learn how to:
44

5-
> **✓** Build a simple chat room with Blazor Server App.
5+
> **✓** Build a simple chat room with Blazor Server app.
66
>
77
> **✓** Modify Razor components.
88
>
@@ -15,9 +15,9 @@ This tutorial shows you how to build and modify a Blazor server app. You'll lear
1515
## Prerequisites
1616
* Install [.NET Core 3.0 SDK](https://dotnet.microsoft.com/download/dotnet-core/3.0) (Version >= 3.0.100)
1717
* Install [Visual Studio 2019](https://visualstudio.microsoft.com/vs/) (Version >= 16.3)
18-
> Visual Studio 2019 Preview version also works which is releasing with latest Blazor Server App template targeting newer .Net Core version.
18+
> Visual Studio 2019 Preview version also works which is releasing with latest Blazor Server app template targeting newer .Net Core version.
1919
20-
## Build a local chat room in Blazor Server App
20+
## Build a local chat room in Blazor Server app
2121

2222
From Visual Studio 2019 version 16.2.0, Azure SignalR Service is build-in web app publish process, and manage dependencies between web app and SignalR service would be much more convenient. You can experience working on local SignalR in dev local environment and working on Azure SignalR Service for Azure App Service at the same time without any code changes.
2323

@@ -335,46 +335,52 @@ From Visual Studio 2019 version 16.2.0, Azure SignalR Service is build-in web ap
335335
}
336336
```
337337

338-
1. Click `F5` to run the app. You'll be able to chat like below.
338+
1. Click `F5` to run the app. You'll be able to chat like below.
339339

340-
![blazorchat](../../docs/images/blazorchat.gif)
340+
![blazorchat](../../docs/images/blazorchat.gif)
341341

342342
## Publish to Azure App Service and migration to Azure SignalR Service
343343

344344
So far, the Blazor App is working on local SignalR and when deploy to Azure App Service, it's suggested to use [Azure SignalR Service](https://docs.microsoft.com/en-us/aspnet/core/signalr/scale?view=aspnetcore-3.1#azure-signalr-service) which 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 data centers significantly aid in reducing latency due to geography.
345345

346346
> Note
347-
> In Blazor server app, UI states are maintained at server side which means server sticky is required in this case. If there's single app server, server sticky is ensured by design. However, if there're multiple app servers, there's a chance that client negotiation and connection may go to different servers and leads to UI errors in Blazor app. So you need to enable server sticky like below in `appsettings.json`:
347+
>
348+
> In Blazor Server app, UI states are maintained at server side which means server sticky is required in this case. If there's single app server, server sticky is ensured by design. However, if there're multiple app servers, there's a chance that client negotiation and connection may go to different servers and leads to UI errors in Blazor app. So you need to enable server sticky like below in `appsettings.json`:
348349
> ```json
349350
> "Azure:SignalR:ServerStickyMode": "Required"
350351
> ```
351352
352353
1. Right click the project and navigate to `Publish`.
353354
354355
* Target: Azure
355-
* Specific target: All Azure App Service are supported.
356+
* Specific target: All types of **Azure App Service** are supported.
356357
* App Service: create a new one or select existing app service.
357358
358-
![serversideblazor-createprofile](../../docs/images/serversideblazor-createprofile.png)
359+
![blazorchat-profile](../../docs/images/blazorchat-profile.gif)
359360
360361
2. Add Azure SignalR Service dependency
361362
362-
After publish profile created, you can see a recommended message under Service Dependencies. Click **Configure** to create new or select existing Azure SignalR Service in the panel.
363+
After publish profile created, you can see a recommended message under **Service Dependencies**. Click **Configure** to create new or select existing Azure SignalR Service in the panel.
363364
364365
![serversideblazor-dependency](../../docs/images/serversideblazor-dependency.png)
365366
366367
The service dependency will do things below to enable your app automatically switch to Azure SignalR Service when on Azure:
367368
369+
* Update [`HostingStartupAssembly`](https://docs.microsoft.com/en-us/aspnet/core/fundamentals/host/platform-specific-configuration?view=aspnetcore-3.1) to use Azure SignalR Service.
368370
* Add Azure SignalR Service Nuget package reference.
369-
* Add configuration to make your app target selected Azure SignalR Service.
371+
* Update profile properties to save the dependency settings.
372+
* Configure secrets store depends on your choice.
373+
* Add `appsettings` configuration to make your app target selected Azure SignalR Service.
374+
375+
![serversideblazor-dependencysummary](../../docs/images/serversideblazor-dependencysummary.png)
370376
371377
3. Publish the app
372378
373379
Now it's ready to publish. And it'll auto browser the page after publishing completes.
374380
> It may not immediately work in the first time visiting page due to Azure Web App deployment start up latency and try refresh the page to give some delay.
375381
> Besides, you can use browser debugger mode with `F12` to validate the traffic has already redirect to Azure SignalR Service.
376382
377-
![serversideblazor-publish](../../docs/images/serversideblazor-publish.png)
383+
![blazorchat-azure](../../docs/images/blazorchat-azure.png)
378384
379385
## Further topic: Enable Azure SignalR Service in local development
380386
@@ -397,22 +403,24 @@ From Visual Studio 2019 version 16.2.0, Azure SignalR Service is build-in web ap
397403

398404
3. Configure Azure SignalR Service `ConnectionString` either in [appsetting.json](appsettings.json) or with [Secret Manager](https://docs.microsoft.com/en-us/aspnet/core/security/app-secrets?view=aspnetcore-2.1&tabs=visual-studio#secret-manager) tool
399405

400-
> Notes: Step 3 can be replaced by using hosting startup assemblies to SignalR SDK.
406+
> Note
407+
>
408+
> Step 3 can be replaced by using hosting startup assemblies to SignalR SDK.
401409
>
402410
> 1. Add configuration to turn on Azure SignalR Service in [appsetting.json](appsettings.json)
403-
> ```js
404-
> "Azure": {
405-
> "SignalR": {
406-
> "Enabled": true,
407-
> "ConnectionString": <your-connection-string>
408-
> }
409-
> }
410-
> ```
411+
> ```js
412+
> "Azure": {
413+
> "SignalR": {
414+
> "Enabled": true,
415+
> "ConnectionString": <your-connection-string>
416+
> }
417+
> }
418+
> ```
411419
>
412420
> 2. Assign hosting startup assembly to use Azure SignalR SDK. Edit [launchSettings.json](Properties/launchSettings.json) and add a configuration like below inside `environmentVariables`.
413-
> ```js
414-
> "environmentVariables": {
415-
> ...,
416-
> "ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.Azure.SignalR"
417-
> }
418-
> ```
421+
> ```js
422+
> "environmentVariables": {
423+
> ...,
424+
> "ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.Azure.SignalR"
425+
> }
426+
> ```

0 commit comments

Comments
 (0)