Question 103154 in Azure Question posted in
The official documentation to get you started can be found here.

How to configure ReactJS URL connection to Azure SignalR Service using HubConnectionBuilder

Hello I want to know how to setup the HubConnectionBuilder URL to connect my client ReactJS function based app to the Azure SignalR Service. I am using the endpoint=https://xxxxxxxxxxxx-signalr.service.signalr.net;AccessKey=m5QcxLFV+3Wx+tzxxn4SUiBqWZUOmzG8nix4OxxxOhg4=;Version=1.0; as in the following:

useEffect(() => {
console.log('testing const2');
const newConnection = new HubConnectionBuilder()
.withUrl('Endpoint=https://xxxxxxxxxxxx-    signalr.service.signalr.net;AccessKey=m5QcxLFV+3Wx+tzMZn4SUiBqWZUOmxxxxix4O1pOhg4=;Version=1.0;')            
.withAutomaticReconnect()
 .build();

 setConnection(newConnection);
    
 }, []);

expecting to make a connection with the Azure SignalR Service. Can someone inform me on how to setup this right as I am receiving this error.

Cannot POST /Endpoint=https://xxxxxxxxxx-signalr.service.signalr.net;AccessKey=m5QcxLFV+3WxxxxxZn4SUiBqWZUOmzG8nix4O1pOhg4=;Version=1.0;/negotiate

: Status code ‘404’ Either this is not a SignalR endpoint or there is a proxy blocking the connection.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I am still researching but basically with a Azure SignalR service you use an Azure Function to obtain a URL with a client or access token. It returns a client app (AKA ReactJS) specific URL to include in withURL of the HubConnectionBuilder. This way each client gets its own URL for security purposes. Make sure CORS enables all origins in Azure resource portal setup.


  2. 0

    You’re trying to enter a SignalR Connection String as your endpoint URL. This isn’t correct.

    You should be entering a normal url string for your parameter in .withUrl() pointing to your client endpoint for your SignalR service. This is usually end endpoint that you’ve mapped in your backend service, which actually lets the SignalR service know exactly what methods, etc. are available to the client.

    Your connection string is meant to be used in your backend component as per the documentation here.

    EDIT:
    In order to clarify, even when using SignalR in Serverless Mode, you’re going to need additional components to get everything working:

    At minimum you need a /negotiate endpoint hosted as an Azure Function. This endpoint will then return the necessary connection tokens and details to the client app to then connect and enable messaging. (This endpoint should also handle client authentication).
    You’re then going to need at least one more Azure Function endpoint, which will be charged with actually handling the logic for your SignalR messages.

    Your negotiate Azure Function should look something like this (taken from Tutorial: Azure SignalR Service authentication with Azure Functions):

    Your function trigger configuration:

    {
    "disabled": false,
    "bindings": [
        {
            "authLevel": "anonymous",
            "type": "httpTrigger",
            "direction": "in",
            "methods": ["post"],
            "name": "req",
            "route": "negotiate"
        },
        {
            "type": "http",
            "direction": "out",
            "name": "res"
        },
        {
            "type": "signalRConnectionInfo",
            "name": "connectionInfo",
            "hubName": "default",
            "connectionStringSetting": "AzureSignalRConnectionString",
            "direction": "in"
        }
    ]
}

    module.exports = async function (context, req, connectionInfo) {
    context.res.body = connectionInfo;
};

    Then, your going to want to have another Azure Function which actually handles the messaging… Broadcasting to all connected clients, for example.

    Because it isn’t clear from your question exactly what you want the clients to do, I can’t really help you out with what exactly that function would look like. But, in any case, you have a working example in the link above.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search