ASP.NET Core SignalR Chat with React.js

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-configuration create-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:

View the code on Gist.

Now we can immediately add SignalR npm package:

View the code on Gist.

Let’s add our Chat component now:

View the code on Gist.

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:

View the code on Gist.

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

View the code on Gist.

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:

View the code on Gist.

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

View the code on Gist.

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:

View the code on Gist.

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

Here is the view to finish our Chat component:

View the code on Gist.

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