blog.stevanfreeborn.com/src/Blog/wwwroot/posts/providing-real-time-feedback-about-long-running-task-with-signal-r/index.md

{
  "title": "Providing Real-Time Feedback About Long-Running Task with SignalR",
  "lead": "",
  "isPublished": false,
  "publishedAt": "<NEEDS SET>",
  "openGraphImage": "posts/providing-real-time-feedback-about-long-running-task-with-signal-r/og-image.png",
}

Over the last few months I've been working on an app called OnxGraph which is a tool for administrators of Onspring to visualize relationships between their content. When I began building it I knew that I was going to have to rely on talking to Onspring's public API to get the data I needed to display the graph's nodes and edges. However there is no way for me to know ahead of time how much data I would be dealing with. I could be dealing with a few nodes and edges which would only require a handful of API requests or many more that would require many API requests.

This presented the challenge of how to make sure that a user's request to create a graph didn't timeout while waiting for the data to be fetched as well as provide feedback to the user about the progress of the request. I decided this best approach was not to do all this work inline with the request but instead to queue the work and then provide the user with a way to check on the progress of the request once it was dequeued and processing.

The easiest solution here was probably just do some long polling. However I've been wanting to get some experience with SignalR for a while now and this seemed like a good opportunity to do so. SignalR is a library that makes it easy to add real-time web functionality to your applications. It's built on top of WebSockets and abstracts away the complexity of managing connections. Plus as a fallback it will use polling if WebSockets aren't available.

I thought since I went through the process of setting this up for OnxGraph I'd write a short blog post about how to get it working. I'll be using a simple example of a task queue that processes tasks and sends updates to clients as the tasks are processed. We will have two parts to this example.

1. A simple Vue.js client that will have a form to add a task to the queue and display the tasks added and update them after being processed.

2. A simple ASP.NET Core web api that will have a singleton service that manages an in-memory queue, a hosted background service that processes the queue and sends updates to the clients, an endpoint to add a task to the queue, and a hub that the clients can connect to to receive updates.

You can find all the code for this example in this repo.

Setting up client

npm create vue@latest

Answer the questions:

✔ Project name: … client
✔ Add TypeScript? … Yes
✔ Add JSX Support? … No
✔ Add Vue Router for Single Page Application development? … Yes
✔ Add Pinia for state management? … Yes
✔ Add Vitest for Unit testing? … Yes
✔ Add an End-to-End Testing Solution? … Playwright
✔ Add ESLint for code quality? … Yes
✔ Add Prettier for code formatting? … Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … Yes

Install dependencies:

cd client
npm install

Setup https in development:

npm install --save-dev vite-plugin-mkcert

Edit vite config:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueDevTools from 'vite-plugin-vue-devtools'
import mkcert from'vite-plugin-mkcert'

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    https: true,
  },
  plugins: [
    vue(),
    VueDevTools(),
    mkcert(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

Run client in dev mode so we can make changes and see them reflected in the browser right away.

npm run dev

Setting up server

mkdir server
cd server
dotnet new webapi -o Server.API
dotnet new sln -n Server
dotnet sln add Server.API

Update launchSettings.json so it runs on https by default. You just have to make sure the https profile is the first one in the profiles object so it is the default profile.

"profiles": {
    "https": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "launchUrl": "",
      "applicationUrl": "https://localhost:7138;http://localhost:5031",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
}

Update Program.cs so swagger ui launches on root. This is not necessary but makes it more convenient to access the swagger ui.

app.UseSwaggerUI(config =>
{
    config.SwaggerEndpoint("/swagger/v1/swagger.json", "Server API");
    config.RoutePrefix = string.Empty;
});

Update Program.cs so client can make CORS requests. This is fine for development but you'll want to lock this down in production.

...
builder.Services.AddCors(
  options => 
    options.AddDefaultPolicy(
      builder => builder
        .AllowAnyOrigin()
        .AllowAnyMethod()
        .AllowAnyHeader()
    )
);
...
app.UseCors();

Run server in watch mode for development because we will be making changes to it and hot reload is noice.

dotnet watch --project Server.API

Setup debugging

Using a debugger is great and I think everyone should be using one. If you want to debug either the client or the server you most definitely can in this case. I've set this up in the example repo using visual studio code. Take a look at the .vscode/launch.json file.

Allow client to add tasks to the queue

First some house keeping just to get things centered. Update main.css to contain the following styles:

#app {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  font-weight: normal;
}

Now let's start with the client and add a button that when clicked will add a task to the queue. We will also display the status of the task. We will use the Vue Composition API to manage the state of the task.

<script setup lang="ts">
import { ref } from 'vue';


const addTaskStatus = ref<'idle' | 'pending' | 'success' | 'error'>('idle');

async function addTask() {
  try {
    addTaskStatus.value = 'pending';
    const result = await fetch('https://localhost:7138/add-task', { method: 'POST' });

    if (result.ok === false) {
      addTaskStatus.value = 'error';
      return;
    }

    addTaskStatus.value = 'success';
  } catch (error) {
    addTaskStatus.value = 'error';
  }
}

</script>

<template>
  <main>
    <div class="add-task-container">
      <button @click="addTask" type="button">Add Task</button>
      <Transition mode="out-in">
        <div v-if="addTaskStatus === 'pending'">Adding task...</div>
        <div v-else-if="addTaskStatus === 'success'">Task added!</div>
        <div v-else-if="addTaskStatus === 'error'">Failed to add task</div>
        <div v-else>Click the button to add a task</div>
      </Transition>
    </div>
  </main>
</template>

<style scoped>
main {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.add-task-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}
</style>

Allow server to add tasks to the queue

We will now need to add that add-task endpoint to the server so that we can receive the task from the client and get it added into the queue.

Let's start by cleaning up the boiler plate code that comes with the web api template by updating Program.cs to remove all references to weather forecast.

Next we will change the weatherforecast endpoint to add-task endpoint. And use the MapPost method instead of MapGet to add the endpoint. We will start by just responding with a new task id.

app
  .MapPost("/add-task", () =>
  {
    return new { Id = Guid.NewGuid().ToString() };
  })
  .WithName("AddTask")
  .WithDisplayName("Add Task")
  .WithDescription("Add a new task to the queue");

Make sure the client can add tasks to the queue

At this point we should be able to go to the client and click the button to add a task to the queue. You should see the status change to Adding task... and then Task added!. If you see Failed to add task then something went wrong. You can check the console for more information.

Implement the task queue

So that is cool. We can take a task from the client, send it to the server, and get a response back. But we need to actually do something with that task so it can actually be processed. Let's start by creating a class to represent the task.

We will use something really generic like a BackgroundTask class that has an Id property that is set to a new guid when the task is created.

class BackgroundTask
{
  public string Id { get; set; } = Guid.NewGuid().ToString();
}

Now that we can represent these tasks we need to create a queue to persist them while they are waiting to be processed. This in a real world scenario would likely be sorted by some sort of persistent store like RabbitMQ or Azure Service Bus. But for this example we will just use an in-memory queue implemented with a Channels and a class called BackgroundTaskQueue that we will register as a singleton service.

class BackgroundTaskQueue
{
  private readonly Channel<BackgroundTask> _channel = Channel.CreateUnbounded<BackgroundTask>();

  public async Task EnqueueAsync(BackgroundTask task)
  {
    await _channel.Writer.WriteAsync(task);
  }

  public async Task<BackgroundTask> DequeueAsync(CancellationToken cancellationToken)
  {
    return await _channel.Reader.ReadAsync(cancellationToken);
  }
}

This class has two methods EnqueueAsync and DequeueAsync. The EnqueueAsync method will add a task to the queue and the DequeueAsync method will remove a task from the queue. We will be able to consume these methods in the TaskService class that we will create next.

Implement the task service

We are getting close to having everything wired up. But we are still missing a way to actual process these tasks which we are receiving from the client and sticking in our queue. For this we can create a class called TaskService that will be a hosted service that will run in the background and continuously pull tasks out of the queue and process them.

class TaskService(BackgroundTaskQueue taskQueue) : BackgroundService
{
  private readonly BackgroundTaskQueue _taskQueue = taskQueue;

  protected override async Task ExecuteAsync(CancellationToken stoppingToken)
  {
    while (!stoppingToken.IsCancellationRequested)
    {
      var task = await _taskQueue.DequeueAsync(stoppingToken);

      _ = Task.Run(async () =>
      {
        var startingUpdate = new { task.Id, Status = "Starting" };
        Console.WriteLine($"Task {task.Id} is starting");

        var randomNumberOfSeconds = new Random().Next(5, 30);
        await Task.Delay(TimeSpan.FromSeconds(randomNumberOfSeconds), stoppingToken);

        Console.WriteLine($"Task {task.Id} is completed in {randomNumberOfSeconds}");
      }, stoppingToken);
    }
  }
}

In the service of keeping things super simple in the example we are just going to log the start and stop of the task and simulate some async work with a random delay between 5 and 30 seconds. In a real world scenario you would be doing some actual work here.

Note

I am wrapping the processing work in a call to Task.Run because in this scenario we are firing and forgetting the task and I don't want to block the background service from processing other tasks. In a real world scenario you would want to be more careful about how you handle exceptions when doing this.

Update add task endpoint to add task to queue

Great we got our queue and we've got a service to process that queue, but our tasks aren't actually yet going into the queue even thought they are making it to the server. Let's update the add-task endpoint to actually add the task to the queue.

app
  .MapPost("/add-task", async (BackgroundTaskQueue queue) =>
  {
    var task = new BackgroundTask();
    await queue.EnqueueAsync(task);
    return Results.Json(data: task, statusCode: (int)HttpStatusCode.Created);
  })
  .WithName("AddTask")
  .WithDisplayName("Add Task")
  .WithDescription("Add a new task to the queue");

This gets to a full round trip of...

1. Task coming from the client
2. Task being received by the server
3. Task being added to the queue
4. Letting client know the task was added
5. Task being processed by the service

However we still haven't done anything to address the initial problem of providing feedback to the client about the progress of the task as it is being processed. Let's do that now.

Let's add signal r hub

builder.Services.AddSignalR();

app.MapHub<TaskHub>("/task-hub");

Add client code to establish connection to server hub

npm install @microsoft/signalr

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'
import { HubConnectionBuilder } from '@microsoft/signalr'

const updates = ref<string[]>([])

const connection = new HubConnectionBuilder().withUrl('https://localhost:7138/task-hub').build()

connection.on('ReceiveMessage', (message: string) => {
  console.log(message)
})

onMounted(() => {
  try {
    connection.start()
  } catch (error) {
    console.error(error)
  }
})

onUnmounted(() => {
  try {
    connection.stop()
  } catch (error) {
    console.error(error)
  }
})
</script>
...

Update server CORS policy to allow signal r connections

...
builder.Services.AddCors(
  options =>
    options.AddDefaultPolicy(
      builder => builder
        .AllowAnyOrigin()
        .AllowAnyMethod()
        .AllowAnyHeader()
        .AllowCredentials()
        .WithOrigins("https://localhost:5173")
    )
);
...

Update server to actually send updates to client as tasks are processed

class TaskService(
  BackgroundTaskQueue taskQueue,
  IHubContext<TaskHub> taskHub
) : BackgroundService
{
  private readonly BackgroundTaskQueue _taskQueue = taskQueue;
  private readonly IHubContext<TaskHub> _taskHub = taskHub;

  protected override async Task ExecuteAsync(CancellationToken stoppingToken)
  {
    while (!stoppingToken.IsCancellationRequested)
    {
      var task = await _taskQueue.DequeueAsync(stoppingToken);

      // Execute the task
      await _taskHub.Clients.All.SendAsync("ReceiveMessage", $"Task {task.Id} is starting", cancellationToken: stoppingToken);

      await Task.Delay(TimeSpan.FromSeconds(5), stoppingToken);

      await _taskHub.Clients.All.SendAsync("ReceiveMessage", $"Task {task.Id} is complete", cancellationToken: stoppingToken);
    }
  }
}

Update client to display updates instead of logging them

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'
import { HubConnectionBuilder } from '@microsoft/signalr'

const updates = ref<string[]>([])

const connection = new HubConnectionBuilder().withUrl('https://localhost:7138/task-hub').build()

connection.on('ReceiveMessage', (message: string) => {
  updates.value = [...updates.value, message]
})
...
</script>

<template>
  <main>
    ...
    <div class="updates-container">
      <h2>Updates</h2>
      <ul>
        <li v-for="(update, index) in updates" :key="index">{{ update }}</li>
      </ul>
    </div>
  </main>
</template>
...

Now you can run the client and server and see the updates as tasks are processed

Pretty cool huh?

Conclusion

Probably mentioned typed hubs here.