Derivative Webhook with SignalR (.NET)

Follow @augustomaia

Derivative webhook was introduced early this year, and it was later included on the .NET SDK, see basic code snippet here. But what about a more complete sample?

Before we dive into a sample, we need a way to push updates to the browser client, and that's where we can use SignalR. There a few resources out there, but I liked this video.

SignalR requires:

1. Client JavaScript to connect and handle messages from the server. The video uses a package from NPM, which is an option, but for simplicity, I like to use CDNs, like:

<script src="//unpkg.com/@aspnet/signalr@1.1.0/dist/browser/signalr.min.js"></script>

2. Server hub to manage the connection, where we can implement methods to receive messages from the client (which we're not using here). For this case, we need a way to identify the client connection id and, to keep it organized, a static function to encapsulate the feature.

public class ModelDerivativeHub : Microsoft.AspNetCore.SignalR.Hub
{
    public string GetConnectionId() { return Context.ConnectionId; }

    public async static Task ExtractionFinished(IHubContext<ModelDerivativeHub> context, JObject body)
    {
        string connectionId = body["hook"]["scope"]["workflow"].Value<String>();
        await context.Clients.Client(connectionId).SendAsync("extractionFinished", body);
    }
}

And here you see the trick: I'm using the connectionId (which uniquely identifies a client) as my workflow id, so when a translation is done I know which client browser to notify.

That's it, basically. 

You can see it running at modelderivative.herokuapp.com or see this specific commit (with all changes) here.