Introduction

In one of the last posts, we saw how we can make a simple chat with ASP.NET Core SignalR and Angular 5. This time, we will use the same code from the backend and swap Angular with React on the frontend.

There is also a post about making a simple SignalR app with pure ASP.NET Core stack, using Razor Pages with vanilla JavaScript on the client - ASP.NET Core SignalR simple chat.

Most of the code should be the same, and because of that, we will focus mostly on the client side.

react-create-app

We will use create-react-app, which is an officially supported way to create SPA applications with React. It has no configuration, but it does use Webpack and Babel under the hood.

It is easy to use and requires no configuration, to be precise, you can’t configure it. It comes with 4 predefined scripts:

• start - starts the app in development mode
• test - starts test runner in interactive watch mode
• build - builds the app for production, outputs to build folder
• eject - as an output, you get your app files + configuration files (babel, webpack, environment, paths etc.). You can’t go back once you eject an app, you lose the ability to use the no-configurationcreate-react-app tool. However, you can customise and configure everything as you prefer.

We will use only the first one during this post.

The code

We will use the same server-side code as we did with our simple chat with Angular 5.

Let’s first create a new empty React application:

https://gist.github.com/Ibro/aacb3f2aba127f2e38ad09de59153e9b

Now we can immediately add SignalR npm package:

https://gist.github.com/Ibro/d94f7446818f1f0429246d29ccb4acc3

Let’s add our Chat component now:

https://gist.github.com/Ibro/fa18817716a98b8d2d6517bbc275c87b

We are using the same properties as we did with Angular chat. We only need nick, message, messages and HubConnection.

First is the user’s nickname, second is the current message being typed to the input, messages are for all the messages that we receive from the server.

The user’s nickname and the connection to the server we only need to set up once, at the start. Hence, we will add the componentDidMount lifecycle method:

https://gist.github.com/Ibro/93b5d41f4d920298c2ea332f3af7ab0f

After we set up the nick and the HubConnection object, we should try to establish the connection with the Server:

https://gist.github.com/Ibro/8f21b48a025c64dc5e0a7a62abed0c04

After that is achieved, we can now start listening for the events from the server. We will just extend our code inside of setState’s callback. We will add this code snippet:

https://gist.github.com/Ibro/4fdaa6c8e80941fa007e677b4ab3fc6b

Let’s take a look at our Chat component, how it looks at the moment:

https://gist.github.com/Ibro/b7c0972e39a62f2c5136f07ebd9b1d5e

That seems fine. Now, we need to add the logic for sending messages to the server. Also, we need to show the actual messages in the view and the button for sending messages.

We will keep the method for sending messages simple:

https://gist.github.com/Ibro/fb2f2e1dddea28fa5da449fe7f8d6ff4

After we sent the message, we can clear out the input - message property.

Here is the view to finish our Chat component:

https://gist.github.com/Ibro/ef55eb4516bd115e61e7a4cd50ede9e5

Code Sample

You can find the code sample on GitHub: ASP.NET Core SignalR Chat

You can find step by step (commits) on this repository: AspNetCoreSignalR_React