Using SignalR in ASP.NET Core & React to send messages

We did a live stream where we integrated SignalR with ASP.NET Core and React.

We went ahead and built a system where you can send messages in a React app. From there, it used SignalR to send the message to the ASP.NET Core app. Once the ASP.NET Core app got the message, it sent it's own message back to the React app.

We are going to recap on the steps we went through in that demo to successfully integrate SignalR with React and ASP.NET Core.

Creating The Applications

Firstly, we built a ASP.NET Core MVC API application. Next, we built a React application in the same directory as the ASP.NET Core application and integrated the two together. Thereafter, we integrated SignalR into both applications to enable us to communicate between ASP.NET Core and React.

Create The ASP.NET Core MVC API Application

We used Visual Studio to create our ASP.NET Core MVC API application. Using Visual Studio Templates, we selected ASP.NET Core Web Application and choose the API template.

Now, we could of used the React.js template at this stage, but there are a couple of reasons why we didn't:

• We are not too sure how to use this template, and create the React application with TypeScript. This template always creates the React app with JavaScript.
• It's good to have an understanding on how to integrate a React app with a ASP.NET Core app.

Create React App

We opened up the terminal in Visual Studio Code, run a CD command to the directory where the ASP.NET Core application exists. Then, we ran the following command to create the React app:

yarn create react-app clientapp --template typescript

// Startup.cs
services.AddSpaStaticFiles(configuration =>
{
	configuration.RootPath = "ClientApp/build";
});

// Startup.cs
app.UseSpa(spa =>
{
	spa.Options.SourcePath = "ClientApp";
	if (env.IsDevelopment())
	{
		spa.UseReactDevelopmentServer(npmScript: "start");
	}
});

CD [PathToASPNETCoreApp]/clientapp

yarn add @microsoft/signalr

services.AddSignalR();

// MessageHub.cs
public class MessageHub : Hub
{
}

endpoints.MapHub<MessageHub>("/message");

// MessageController.cs
[Route("/api/message")]
[ApiController]
public class MessageController : Controller
{
	protected readonly IHubContext<MessageHub> _messageHub;
	public MessageController([NotNull] IHubContext<MessageHub> messageHub)
	{
		_messageHub = messageHub;
	}
	 
	[HttpPost]
	public async Task<IActionResult> Create(MessagePost messagePost)
	{
		await _messageHub.Clients.All.SendAsync("sendToReact", "The message '" +
		messagePost.Message + "' has been received");
		return Ok();
	}
}
 
public class MessagePost
{
	public virtual string Message { get; set; }
}

Use React App To Send The Messages

We now go ahead and change the code in App.tsx. The point here is to build up a SignalR connection to /message (which translates to the MessageHub).

Once we've done that, we create a string array. This array will list all the messages that we have received.

Then we create a separate function component (FC). Called Messages, this will hook into the "sendToReact" method that we use in our ASP.NET Core application through the MessageController. When this method receives a message, we push it to our string array. Then, we use the useState method to update the list of messages received to the client.

Finally, we create a new function component to send the message. This will have a text box and a submit button. When the submit button is clicked, it will throw an API POST call to /api/message. If you remember, it's the Create method in our MessageController. It will then return a message back to any clients connected.

// App.tsx
import React, { useState, useEffect } from 'react';
import logo from './logo.svg';
import './App.css';
import * as signalR from "@microsoft/signalr";
 
const App: React.FC = () => {
 
	const hubConnection = new signalR.HubConnectionBuilder().withUrl("/message")
	.build();

	hubConnection.start();

	var list: string[] = [];

	interface MessageProps {
	HubConnection: signalR.HubConnection
	}

	const Messages: React.FC<MessageProps> = (messageProps) => {

	const [date, setDate] = useState<Date>();

	useEffect(() => {
		messageProps.HubConnection.on("sendToReact", message => {
			list.push(message);
			setDate(new Date());
		})
	}, []);

	return <>{list.map((message, index) => <p key={`message${index}`}>{message}</p>)}</>
	}

	const SendMessage: React.FC = () => {

	const [message, setMessage] = useState("");

	const messageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
		if (event && event.target) {
			setMessage(event.target.value);
		}
	}

	const messageSubmit = (event: React.MouseEvent) => {
		if (event) {
			fetch("/api/message", {
				"method": "POST",
				"headers": {
					Accept: "application/json",
					"Content-Type": "application/json"
				},
				body: JSON.stringify({
					message: message
				})
			});

			setMessage("");
		}
	}

	return <><label>Enter your Message</label><input type="text" onChange={messageChange} value={message} /><button onClick={messageSubmit}>Add Message</button></>;

	}

	return <><SendMessage /><Messages HubConnection={hubConnection}></Messages></>
}
 
export default App;

You can try the application yourself by downloading the code example.

To see the working demo in action, you can watch back our live stream. This will take you through the processes required. And by watching the video, you can follow along and code to get the application working.

Going Forward...

We integrated SignalR to send messages to all clients. However, with SignalR, you can focus on a particular user. That would be handy if you wanted to integrate a chat application. You can also set up multiple SignalR hubs if you need to. There is a lot of flexibility around it.