I haven’t touched Signal R in a while. I wanted to see how to work with Signal R in a React app.

Let’s start by creating a simple ASP.NET Core Web API server

• Create an ASP.NET Core Web API application, I’m going to use minimal API
• Add the NuGet package Microsoft.AspNetCore.SignalR.Client
• Add the following to the Program.cs

  builder.Services.AddSignalR();
  builder.Services.AddCors();
  

• We’ve added CORS support as we’re going to need tthis for testing locally, we’ll also need the following code

  app.UseCors(options =>
  {
    options.AllowAnyHeader()
      .AllowAnyMethod()
      .AllowCredentials()
      .SetIsOriginAllowed(origin => true);
  });
  

Before we can use Signal R we’ll need to add a hub, I’m going to add a file NotificationHub.cs with the following code

public class NotificationHub : Hub;

Now return to Program.cs and add the following

• We need to map our hub into the application using

  app.MapHub<NotificationHub>("/notifications");
  

• Finally let’s map an endpoint to allow us to send messages via Swagger to our clients. After the line above, add the following

  app.MapGet("/test", async (IHubContext<NotificationHub> hub, string message) =>
    await hub.Clients.All.SendAsync("NotifyMe",$"Message: {message}"));
  

Now we need a client, so create yourself a React application (I’m using TypeScript as usual with mine).

• Add the package @microsoft/signalr, i.e. from yarn yarn add @microsoft/signalr
• In the App.tsx we’re going to create the HubConnectionBuilder against out ASP.NET Core API server. We’ll then start the connection and finally watch for messages on the “NotifyMe” name as previously set up in the ASP.NET app, the code looks like this

  import { HubConnectionBuilder } from '@microsoft/signalr';
  
  function App() {
    const [message, setMessage] = useState("");
  
    useEffect(() => {
      const connection = new HubConnectionBuilder()
        .withUrl("http://localhost:5021/notifications")
        .build();
    
      connection.start();  
      connection.on("NotifyMe", data => {
        setMessage(data);
      });
    }, [])  
  
    return (
      <div className="App">
        {message}
      </div>
    );
  }
  

Make sure you start the ASP.NET server first, then start your React application. Now from the Swagger page we can send messages into the server and out to the React client’s connected to SignalR.