Subscribing to an Azure Event Grid topic directly from an Angular client

Question

I'm working on an application that needs to respond to events from a third-party WebHook. I chose Azure Event Grid as my chosen event broker, Angular for the frontend and Asp.Net Core for the backend.

In my current solution, I'm publishing to the Azure Event Grid from the WebHook using an HTTP triggered Azure Function. This function formats the third-party event to the correct Azure Event Grid format (with the concerned event user as the subject, and the event type the WebHook event type). For now, the event grid events are pushed to my Asp.Net backend using a WebHook Azure Event Grid subscription.

My issue is that some of the events only concern the frontend (like reminders/light notifications), and thus I want to directly publish the event from Event Grid to the frontend, without using a WebSocket to an endpoint in my backend.

I'm currently using SignalR to create a WebSocket connection between Angular and Asp.Net Core, but I don't want to overload my backend with sending events that will just be redirected to Angular.

Is there a way to directly subscribe to Azure Event Grid using a WebSocket connection? What would be the most optimal solution in terms of minimal pushing/polling? Or should I just switch to another event broker with a JavaScript library (like RabbitMQ)?

Answer 1

The Azure SignalR Service can help you integrate your clients such as Asp.net, Angular, etc. for consuming the Azure Event Grid events. The following screen snippet shows an example of your logical subscriber (client) using a webhook event handler endpoint.

As the above picture shows, the EventGridTrigger function represents an integrator to the Azure SignalR Service. The AF has been extended for SignalR Service bindings, see more details here.

Using this extension, the EventGridTrigger function as an integrator to SignalR Service is very straightforward and lightweight, see the following an example:

#r "Microsoft.Azure.EventGrid"
#r "Microsoft.Azure.WebJobs.Extensions.SignalRService"
#r "Newtonsoft.Json"

using Microsoft.Azure.EventGrid.Models;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using Microsoft.Azure.WebJobs.Extensions.SignalRService;

public static async Task Run(EventGridEvent eventGridEvent, IAsyncCollector<SignalRMessage> signalRMessages, ILogger log)
{
    await signalRMessages.AddAsync(
        new SignalRMessage
        {
            Target = "Notify",
            Arguments = new[] { eventGridEvent.Data.ToString() }
        });
}

and the function.json:

{
  "bindings": [
    {
      "type": "eventGridTrigger",
      "name": "eventGridEvent",
      "direction": "in"
    },
    {
      "type": "signalR",
      "name": "signalRMessages",
      "hubName": "mySignalRService/users/myClientId",
      "connectionStringSetting": "AzureSignalRConnectionString",
      "direction": "out"
    }
  ]
}

Also, have a look at more examples (e.g. codeproject, github, here) for using an Azure SignalR Service on the client side.