How can i setup a signalr server in my c# app with a reactjs frontend?

Question

I am new to all this signalr . I have a app that uses a reactjs frontend and c# backend. I need to start up a signalr server that accepts messages and broadcasts the messages . So basically when i start the app. the signalr server will start. I can send it messages and read the messages from my reactjs frontend and display to the user . How can i do this , is there an example of this ?

just starting with this

Answer 1

I have a app that uses a reactjs frontend and c# backend. I need to start up a signalr server that accepts messages and broadcasts the messages . So basically when i start the app. the signalr server will start. I can send it messages and read the messages from my reactjs frontend and display to the user . How can i do this?

It would be nicer, if you could ask specific question along with your current implementation rather asking too generic query.

However, in order to set up a SignalR server in your asp.net core app with a ReactJS frontend,

First of all, you should install SignalR and need to create a Hub class in your asp.net core project (Called hub service),

After that, configure services and map the hub endpoint in your program.cs class file.

On the React side, you should install the client and should build a connection, so that it should start and listen for messages from your broadcast hum, and invoke server methods to send messages.

Let's have a look in practice how we can implement that:

Assuming your backend is in asp.net core of XXX version as you have react frontend.

So, we can do as following:

SingnalR with Asp.net core:

First of all, install SignalR package with your project according to project version:

Microsoft.AspNetCore.SignalR

You can even use nuget package manager:

Install-Package Microsoft.AspNetCore.SignalR

Hub Class:

In this step, you should create a hub class which will communicate with your client/React/javascript frontend.

public class ChatHub : Hub
    {
        public async Task SendMessage(string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", message);
        }
    }

Register SignalR in Program.cs:

using SignalRChat.Hubs;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorPages();
builder.Services.AddSignalR();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();
app.MapHub<ChatHub>("/chatHub");

app.Run();

Frontend-React or Javascript:

Within the react or javascript side, you should install following npm package:

npm install @microsoft/signalr and need to Import HubConnectionBuilder and finally, need to create a connection.

You can do as following:

import { HubConnectionBuilder } from '@microsoft/signalr';

const connection = new HubConnectionBuilder()
    .withUrl('http://localhost:5000/chatHub') 
    .build();

Note: Make sure you have updated your hub URL accordingly.

Connected with the hub:

connection.start()
    .then(() => console.log('Connected to SignalR hub'))
    .catch(err => console.error('Error connecting to hub:', err));

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

Output:

Note: Within the connection.on you can display the message in your React component or anything you want. If you need any further assistance on this, please refer to this official document for reference. In addition, you can also checkout this sample as well.