How to make Blazor Server SignalR connection use a different URL?

[pablosantosluaces]

My question is: how to configure the endpoint used by signalr in Blazor server?

Scenario

• I have a Blazor server app running on Azure Container Apps.
• The app implements 2 things: a REST API and the website itself using Blazor Server.
• I configured APIM with the custom domain defined there, and the correct SSL Cert.
• Then I had to configure an API for the REST API (obvious).
• But then I configured "other" API to send all website traffic too, otherwise the website wouldn't work. I guess this is not the normal way to use APIM but since we only have 1 certificate and we need it to work for the API and the website, I did it there.
• Everything was working except the websockets connection. Each time I visit our site, I get this:

Error: Failed to start the transport 'WebSockets': Error: WebSocket failed to connect. The connection could not be found on the server, either the endpoint may not be a SignalR endpoint, the connection ID is not present on the server, or there is a proxy blocking WebSockets. If you have multiple servers check that sticky sessions are enabled.

So, probably the solution is to define an extra WebSocket API in APIM and make the SignalR code go through it.

But, in order to achieve it, I need the javascript side of things to point to something like MYSITE/signalr/_blazor?id=xxx intead of wss://MYSITE/_blazor?id=xxxx

How can I achieve this?

There are some random answers here and there, and "probably" this is the way to achieve it:

<script src="~/_framework/blazor.server.js" autostart="false"></script>
<script>
Blazor.start({
        configureSignalR: function (builder) {
            builder.withUrl("/_blazor", {
                
            });
        }
    });
</script>

But it would be good to be able to find a proper example instead of stackoverflowing this.

@javiercn :-)

Extra info

I found some info about how to do it but the docu is not very clear here: https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/startup?view=aspnetcore-9.0 it mentions something, but where is the detailed info of each option?

It does mention this, but where are all the circuit options??

<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  ...
  Blazor.start({
    ssr: {
      ...
    },
    circuit: {
      ...
    },
    webAssembly: {
      ...
    }
  });
  ...
</script>

[pablosantosluaces]

how to make your blazor server app start the signalr channel in a different url

1. Add this to your App.razor (replace the previous line including the blazor.web.js) if you want a "signalr" url

        <script src="_framework/blazor.web.js" autostart="false"></script>
        <script>
            console.log("start invoked");

            Blazor.start({
                circuit: {
                    configureSignalR: builder => builder.withUrl("/signalr")
                },
            });
        </script>

2. Add this to your Program.cs:

app.MapBlazorHub("/signalr");

Done. Easy. But hard to find the instructions.

[pablosantosluaces]

How to make your Blazor Server application run in a container app behind APIM

1. You need to change your signalr url. The default _blazor won't work because APIM doesn't let you "listen" on that route. Just gives an error.

2. Create a websocket type api and point to you container app url.

3. Create a HTTP API and point to your container app url too, and follow this instructions to add 2 commands: https://learn.microsoft.com/en-us/azure/azure-signalr/signalr-howto-work-with-apim#configure-apis-when-client-connects-with-websocket-transport

The instructions are good but misleading because they mention "Azure SignalR Service" but they are valid too for a NORMAL app that doesn't use SignalR Service but just normal SignalR.

Also, in my case, I had APIM configured to run the entire website too, but it DID NOT WORK to handle the websocket negotiation... so I had to add yet another HTTP API. In my case I had:

• HTTP REST API for my REST API (not relevant here) (created from the 'container app' resource). URL is https://www.mywebsite.com/api
• HTTP REST API for the entire website. URL https://www.mywebsite.com. I had to add some policies to pass some extra headers for auth0 to work and more.
• HTTP REST API just to handle signalr negotiate. The previous didn't work. API URL prefix: signalr/negotiate
• WSS API. API URL prefix: signalr

With these last two negotiation worked!

[javiercn]

@pablosantosluaces thanks for contacting us.

Your solution is correct as for configuring the Blazor connection endpoint URL.

As for the APIM solution, the approach looks ok at first glance.

@guardrex can you make sure that the docs are up to date to reflect #59546 (comment)

[pablosantosluaces]

Thanks :-)

[jvsanchezo]

Hi. Thank you very much for the explanation. I am using the same scenario but I am still unable to make the Blazor Web app work through the APIM.

First thing that I have observed is that I cannot simply call "Blazor.start because", when it is called, Blazor is undefined. I had to incorporate some logic to wait for the initialization (i.e. window.addEventListener('load', ....), etc. It looks like it works so maybe I just can forget about it.

On the other hand, it looks like the negotiation works, and it starts using WebSockets. I can even see the messages up and down, but the real thing is that the calls from the client to the REST API do not work (well, just in one simple case, a REST API calls looks like it works OK and the result is rendered on the page, but most of the time not)

Could you please provide some advise about how to debug this?

Thanks a lot!