Aug 23

Written by: Michael Washington
8/23/2019 3:34 AM  RssIcon

image

You can properly scale your Blazor application by connecting it to an Azure SignalR Service.

 

Create SignalR Service

image

We will need a Azure SignalR Service.

If you do not already have a Azure SignalR Service, log into the Azure Portal, and select Create a resource and search for SignalR Service.

 

image

Click Create.

 

image

You can initially choose the Free tier.

 

image

After the service is created, select Keys, and copy the Connection String (you will need it in the later steps).

 

image

Under Settings, set Service Mode to either Default or Classic.

 

Create the Blazor Application

 

image

Open Visual Studio 2019.

 

image

Create a new Blazor (server-side) project.

 

image

Hit F5 and run the project

 

image

The app will display

Stop debugging.

 

Add SignalR Service

image

Right-click on the Solution node and select Manage NuGet Packages...

 

image

Search for and install Microsoft.Azure.SignalR

image

Open the Startup.cs file in the Server project.

 

image

Change the ConfigureServices method to the following:

 

            services.AddSignalR().AddAzureSignalR(
                "{{ Your Azure SignalR Services Connection String }}");

Note: Replace {{ Your Azure SignalR Servces Connection String }} with the connection string you copied earlier.

 

image

When we run the application and use it, we can look in Azure and see the traffic.

 

Using User Secrets

image

It is recommended that you don’t store the connection string in the code.

For example, if you check this code into GitHub that would be really bad…

 

image

In Visual Studio, right-click on the project and select Manage User Secrets.

 

image

This will open a file called secrets.json in a location on your local computer.

 

image

Add a line:

 

"Azure:SignalR:ConnectionString": "{{ Your Azure SignalR Servces Connection String }}"

Note: Replace {{ Your Azure SignalR Servces Connection String }} with the connection string you copied earlier.

Save and close the file.

 

image

If you now edit the Project File

 

image

You will now see an entry pointing to the user secrets file.

 

image

Open the Startup.cs file.

Add the following using statement:

 

using Microsoft.Extensions.Configuration;

 

Add the following code to the Startup class:

 

        public IConfiguration Configuration { get; }
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

 

In the ConfigureServices method, change the services.AddSignalR().AddAzureSignalR line to:

 

services.AddSignalR().AddAzureSignalR(Configuration["Azure:SignalR:ConnectionString"]);

 

 

Links

Blazor.net

Server-side Blazor with Azure SignalR Service

What’s new in Azure SignalR 1.1.0 Preview 1

Safe storage of app secrets in development in ASP.NET Core

9 comment(s) so far...


Gravatar

Re: Connecting Razor Components to Azure SignalR Service

Thanks Michael, nice short article. So, you can use Azure SignalR without having your app hosted on Azure. Correct?

By Dave Vorgang on   2/19/2019 6:44 PM
Gravatar

Re: Connecting Razor Components to Azure SignalR Service

@Dave Vorgang - Yes, you can run your Razor Components app on your own server (or desktop), and still use the Azure SignalR Service

By Michael Washington on   2/19/2019 6:45 PM
Gravatar

Re: Connecting Razor Components to Azure SignalR Service

** UPDATE ** This is broken in .Net Core 3.0 preview 3, but they plan to fix it in preview 4. See: https://github.com/aspnet/AspNetCore/issues/8590

By Michael Washington on   3/16/2019 12:40 PM
Gravatar

Re: Connecting Razor Components to Azure SignalR Service

Also, see this bug that still exists in Preview 4 (with workaround): https://github.com/aspnet/AspNetCore/issues/9627#issuecomment-485500176

By Michael Washington on   4/28/2019 7:30 AM
Gravatar

Re: Connecting Blazor to Azure SignalR Service (updated to Preview 4)

This article has been updated. As of 5/1/2019 this current version works. See: https://twitter.com/davidfowl/status/1123598417312210944

By Michael Washington on   5/1/2019 8:31 AM
Gravatar

Re: Connecting Blazor to Azure SignalR Service (updated to Preview 8)

Hi Michael,

Great work, as always. I just had this issue, so it might be worth noting in your article. You need to ensure the Service Mode is set to Default (under Settings | Feature Flags). I had this setting set to Serverless as I was using it for some bot stuff, but that mode won't work in this scenario.

As always, great work, keep it up!

Cheers
Michael.

By Michael Blight on   8/23/2019 3:34 AM
Gravatar

Re: Connecting Blazor to Azure SignalR Service (updated to Preview 8)

@Michael Blight - Thank you for letting us know. I had it on Classic so that is why it was working for me. I updated the Blog post.

By Michael Washington on   8/23/2019 3:33 AM
Gravatar

Re: Connecting Blazor to Azure SignalR Service (updated to Preview 8)

Hi

Nice article!

I use .net Core 3 Preview 8, and have this strange behavior when running Blazor Server Side app i Azure App Service.

When not using Azure SignalR, I must use Web Socket on App Service in Azure. If not I got "Object reference not set to an instance of an object." when navigate to a page from a menu item. Everything work great on my localhost.

After follow this great article and added Azure SignalR, everything was fine when running app from server (without Web Socket), but this time, I got "Object reference not set to an instance of an object." when I'm running on localhost. Any idea why?

By Jan Fruseth on   9/3/2019 3:46 AM
Gravatar

Re: Connecting Blazor to Azure SignalR Service (updated to Preview 8)

@Jan Fruseth - I am sorry, but, I have not seen that behavior. If you can reproduce the exact steps you should raise an issue on: https://github.com/aspnet/aspnetcore/issues?q=blazor+label%3Aarea-blazor

By Michael Washington on   9/3/2019 3:49 AM

Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
CAPTCHA image
Enter the code shown above in the box below
Add Comment   Cancel 
Microsoft Visual Studio is a registered trademark of Microsoft Corporation / LightSwitch is a registered trademark of Microsoft Corporation