CODEWITHSUNDEEP
c#azure-functionssignalrsignalr-hubazure-signalr
user1531921
user1531921

Reputation: 1432

How to invoke and debug a SignalRTrigger function in an Azure Functions App in Visual Studio

I'm building my first Azure Function App with SignalR trigger binding following this guide. I already have my Function App and my SignalR Service set up in Azure.

But now I need to debug one of my SignalR triggered functions. I'm trying to do this using Visual Studio 2022 using the local functions host (func.exe), by simply pressing F5 in my Azure Functions project.

I have my ServerlessHub with a function JoinGroup that I want to invoke and debug in Visual Studio.

        namespace FunctionApp
        {
            public class SimpleChat : ServerlessHub
            {
                [FunctionName("negotiate")]
                public SignalRConnectionInfo Negotiate([HttpTrigger(AuthorizationLevel.Anonymous)]HttpRequest req)
                {
                    var claims = GetClaims(req.Headers["Authorization"]);
                    return Negotiate(
                        claims.First(c => c.Type == ClaimTypes.NameIdentifier).Value,
                        claims
                    );
                }

                [FunctionName(nameof(JoinGroup))]
                public async Task JoinGroup([SignalRTrigger]InvocationContext invocationContext, string connectionId, string groupName)
                {
                    throw new ApplicationException("CODE REACHED");
                    await Groups.AddToGroupAsync(connectionId, groupName);
                }
            }
        }

I've also written a simple client in typescript with a single method with which I want to invoke my JoinGroup function:

            testjoinGroup(){
                if (this.isConnected()) {
                    this.hubConnection.invoke<any>("joinGroup", "testGroupName")
                        .then(x => console.log("success"))
                        .catch(err => console.log(err)):
                }
            }

The connection is created successfully, the negotiate calls go through, and the above method testjoinGroup() prints "success" when I call it. However, I don't hit the breakpoint in visual studio. I'm not getting any errors either in my web app or VS. I've configured my 'local.settings.json' to connect to my SignalR instance.

Is what I'm trying to do simply not possible? Do I need to deploy my changes to Azure in order to test the new code?

Upvotes: 6

Views: 1056

Answers (1)

Cristian Rojas
Cristian Rojas

Reputation: 1

To invoke and debug a SignalR-triggered function in your Azure Functions App locally, you need to configure two key aspects:

  1. Expose the local Azure Function to the Internet: To make your local Azure Function accessible from the internet, you can use a tool like Ngrok. This application allows you to create a tunnel between your local server (where your Azure Function is running) and a public URL. This way, any request sent to the public URL will be forwarded to your local environment, allowing you to test and debug your function in a near-production environment.

  2. Configure the "Upstream Endpoint" in Azure SignalR: Once your Azure Function is accessible via the tunnel, you need to configure the Upstream Endpoint in the Azure SignalR service. You can do this from the Azure portal by providing the URL of the tunnel generated by Ngrok. This configuration will allow Azure SignalR to send messages or events to your local Azure Function through the tunnel connection.

    • For Production: When connecting Azure SignalR to your production Azure Function, you need to include the API Key in the upstream endpoint. The endpoint should follow the format: https://<Function_App_URL>/runtime/webhooks/signalr?code=<API_KEY>. The <API_KEY> can be retrieved from your Azure Function keys, and the recommended key for this scenario is the one named "signalr_extension". This key should be used to complete the upstream endpoint URL. You can find this API Key in the Azure portal under the Azure Function's "Functions -> Application keys" section.

    • For Local Development: While testing locally, there’s no need to include the API Key in the upstream endpoint. Instead, the upstream endpoint should be configured using the Ngrok URL like this: <Ngrok_URL>/runtime/webhooks/signalr. This allows Azure SignalR to communicate with your locally hosted Azure Function through the Ngrok tunnel without requiring the production API Key.

You can find documentation about configuring "Upstream endpoints" in Azure SignalR at Upstream endpoints in Azure SignalR Service and Azure Function and Azure SignalR serverless mode integration.

Additional Tip: Make sure to keep Ngrok running during the testing and debugging process, as the tunnel URL will become unavailable if Ngrok is stopped.

This way you don't need to install any emulator, you just need to perform a "forwarding" between the public URL provided by Ngrok and the local server where you host the Azure Function (localhost:port).

To see more documentation about Azure SignalR serverless mode you can see the following links:

Upvotes: 0

Related Questions