.NET Core API and ReactJS with SignalR

Creating a simple real-time chat with .NET Core, ReactJS and SignalR

Using SignalR to create a real-time application with .NET Core and ReactJS

Andre Lopes
Jun 22, 2020 · 6 min read

Requirements

The Project

Our project will be divided into two projects, one server Web API with .NET Core and one front-end with ReactJS. So let’s create a folder Chatty to hold our whole project.

API

Let’s create our API by navigating to the Chatty folder and creating a new folder called API. Inside this folder run the following command to create a new solution:

dotnet new sln -n Chatty
dotnet new webapi -o Chatty.Api
dotnet sln add ./Chatty.Api/Chatty.Api.csproj

SignalR

SignalR already comes shipped in .NET Core 3.1, so there’s no need to add any extra package in our API to use it.

services.AddSignalR();
endpoints.MapHub<ChatHub>("/hubs/chat");

CORS

First is configuring CORS (Cross-origin resource sharing) to allow clients from other domains to be able to make requests.

  • GET and POST HTTP methods must be allowed.
  • Credentials must be allowed.
services.AddCors(options =>
{
options.AddPolicy("ClientPermission", policy =>
{
policy.AllowAnyHeader()
.AllowAnyMethod()
.WithOrigins("http://localhost:3000")
.AllowCredentials();
});
});
app.UseCors("ClientPermission");

Update HTTPS Certificate

If you chose to not remove HTTPS redirection you will need to target the HTTPS address because SignalR doesn’t allow redirections. In our case, we will be using the default local address https://localhost:5001.

dotnet dev-certs https --clean
dotnet dev-certs https --trust

Client

To start our client run the following command in the Chatty root folder:

npx create-react-app client
npm i --save @microsoft/signalr

Result

Now run your API from the api folder with:

dotnet run -p ./Chatty.Api/Chatty.Api.csproj
npm start
Image for post
Image for post
Image for post
Image for post
Chat demo

Send message from outside the hub

At the moment we are using the /hubs/chat endpoint provided by SignalR to send requests to the server. But what if we want to send the new message to one of our endpoints and run some logic there, instead of our hub?

Conclusion

WebSockets are a great technology when you need to keep your clients synchronized with changes from your server. This is really useful when dealing with messages and notifications that need to be seen in real-time.

The Startup

Medium's largest active publication, followed by +771K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store