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)?

Are you asking, if the SignalR service can be subscribed for event handler? — Roman Kiss, Jul 19 '19 at 11:05
I'm asking if a subscription can be made from a client (Angular app) wether using SignalR or a raw WebSocket connection. — Feres Gaaloul, Jul 19 '19 at 11:08
Can you create a WebHook endpoint in your *Asp.Net* and *Angular* applications? — Roman Kiss, Jul 19 '19 at 12:33
In Asp.Net it is possible (since a Webhook is only a POST request to a particular endpoint) but I don't think it's possible to implement on the client-side — Feres Gaaloul, Jul 19 '19 at 12:47
That's a reason why we need a service for pushing messages to the client such as web and mobile browsers, desktop apps, servers, IoT devices and game consoles. The Azure SignalR Service allows to push messages to the above connected clients. The Azure Function has an extension output bindings for SignalR Service, so using with an EventGridTrigger is just only couple of lines integration code (bypassing an eventGridEvent.Data to the SignalRMessage Arguments). — Roman Kiss, Jul 19 '19 at 13:16
That's the solution I'm currently thinking of, thank you. (You should write it in a separate answer for more visibility if other users read this question) — Feres Gaaloul, Jul 19 '19 at 13:51

Roman Kiss · Accepted Answer · 2019-07-21T07:30:12.107

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.

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

1 Answers1

Linked