Debug function using a SignalRTrigger

Darren Wainwright 21

Hi folks,

I'm building a function app in Node.js/TypeScript that will react to messages to and from a SignalR Service (in serverless mode)

I have the following function, shown in the image below.

My question is how do I actually debug this function?

More specifically, what are the steps I need to take to invoke this method.

I've been following this document: https://learn.microsoft.com/en-us/azure/azure-functions/functions-bindings-signalr-service-trigger?tabs=javascript however, i don't understand the last section "Send messages to SignalR Service trigger binding" - it seems like there should be more info; such as where this URL is, what the POST body will look like etc.

Really need some help folks.

Thanks in advance

Darren Wainwright 21 Reputation points

2020-11-11T17:02:33.97+00:00

II've come across this Github document: https://github.com/Azure/azure-signalr/blob/dev/docs/rest-api.md#Authentication

This has helped me POST messages to SignalR (well, my post results in a 202)

I am still unable to actually debug in Visual Studio Code though - this is the part I am really stuck on.

So in short - how do I debug the DeviceInformaiton function in the code above, note it takes in a SignalRTrigger

Accepted answer

Chenyang Liu 151 Reputation points

2020-11-24T03:33:05.577+00:00

@Darren Wainwright SignalRTrigger gets invoked by SignalR Service, so you don't need to generate your own POST request.

The workflow shown as below:
Clients (signalr client sdk in C# or Javascript) --> SignalR Service --> SignalR Trigger
SignalR Output binding --> SignalR Service --> Clients

Please try the bi-direction chat at first. It shows how to use SignalR Trigger with upstream feature e2e: https://github.com/aspnet/AzureSignalR-samples/tree/master/samples/BidirectionChat

You need to do several things in the sample. Deploy a function to Azure Function and set upstream.
If you have more questions, feel free to contact me.
Please sign in to rate this answer.
Darren Wainwright 21 Reputation points

2020-11-24T03:45:40.973+00:00

Hi,

Thank you for your reply.

I have been able to get my function app and signalR communicating now. That example you shared helped a great deal.

What I have not been able to do though is hit a breakpoint in VS Code.

The URL I referenced (https://learn.microsoft.com/en-us/azure/azure-functions/functions-bindings-signalr-service-trigger?tabs=javascript) was provided to me from another MS employee and they referenced the specific section "Send messages to SignalR Service trigger binding"

What I would like to do is hit F5 (debug) in Visual Studio Code and execute/call/invoke the function that is running in VS Code. I would like the breakpoints to be hit.

How do i accomplish this?

Thank you

Chenyang Liu 151 Reputation points

2020-11-24T05:15:30.623+00:00

If you want to debug in local, you needs to use ngrok to expose your local port to Internet that can be access from Azure SignalR Service
There's no sample for local debugging signalr trigger now, but we have a very similar sample https://github.com/aspnet/AzureSignalR-samples/tree/master/samples/EventGridIntegration#create-an-ngrok-endpoint . The sample is about local running event grid trigger.

As you see, you need to install ngrok and expose port 7071 (azure function port). After that, you will get a forwarding DNS. E.g. https://263db807.ngrok.io -> localhost:7071. Then, you need to update upstream url <function-url>/runtime/webhooks/signalr?code=<signalr_extension-key> to https://263db807.ngrok.io/runtime/webhooks/signalr. Note, you don't need to add code query because local function doesn't have it. After updating upstream, you can just run your function locally with F5. And when there's an invocation, your breakpoint should be hit.

Darren Wainwright 21 Reputation points

2020-11-24T14:11:09.56+00:00

I see!

That is very helpful info. Thanks so much.

I'll hit accept, thanks again.

Michael Kolback 1 Reputation point

2021-05-19T23:48:08.02+00:00

Hello, thanks so much for the example of how to get the Upstream SignalR working locally with Azure Functions. I followed the example, but I seem to be receiving a 500 error indicating 500 An item with the same key has already been added. Key: scope . Any idea what would be causing this?
Sign in to comment

1 additional answer

Ryan Hill 26,146 Reputation points Microsoft Employee

2020-11-12T05:15:37.68+00:00

Hi @Darren Wainwright ,

Your deviceInformation function is listening for broadcast messages sent from your Azure SignalR Service. You'll need to a method that will send messages to your mailbox hub for your deviceInformation function to be triggered by.

The easiest and simplest way to do this is add another HTTP trigger function that will use SignalR as an output binding. See https://learn.microsoft.com/en-us/azure/azure-functions/functions-bindings-signalr-service-output?tabs=javascript for a step-by-step creating a function configured for SignalR output binding. When you hit F5, the VS Code Azure Function tools should run your local host environment where it will list your two routes. All you'll need to do is invoke your route with the SignalR output binding and you should hit a breakpoint you've set on your SignalRTrigger input binding function.

Regards,
Ryan
Please sign in to rate this answer.
Darren Wainwright 21 Reputation points

2020-11-12T14:13:48.847+00:00

Hi Ryan,

Thank you for your time and help. I've built a couple more functions.

EG. A heartbeat (below) that listens to an event 'heartbeat' and outputs another signalR message targeting 'heartbeatReceived'.

I also put together a UI that connects to the hub, invokes heartbeat and listens for the heartbeatReceived - I can't seem to get any of these to listen.

This is what I am trying:

Local:

1) Run my Func App in Debug
2) Run my UI and connect to the hub via the negotiate function in my app (local) (this connects just fine)
3) Send a heartbeat (Expected a breakpoint to be hit in my local app, it wasn't)
4) Receive a heartbeatReceived message in the UI (Expected this but didn't happen)

If i deploy the app to Azure and negotiate there, I can't seem to get any of the heartbeat to fire there, either

Are my expectations correct? Should I be able to do what I am doing above?

Darren Wainwright 21 Reputation points

2020-11-12T14:14:37.187+00:00

Here is the heartbeat function

Darren Wainwright 21 Reputation points

2020-11-12T15:14:39.387+00:00

Just to add - I created an additioanal function with an http-trigger-in and a signalR message out

I was able to call this function and capture the SignalR message in the UI.

I just cannot seem to invoke any of the methods that take in a SignalRTrigger..

if i use the client API and call myConnection.send('heartbeat', someData) am i correct in my expectation that the heartbeat function should be invoked? If so, this isn't happening.
Sign in to comment