Blog with ASP.NET Core and React/Redux. Part 5: Likes notifications

This is part of the series “Blog with ASP.NET Core and React/Redux”.

Image for post
Image for post

In this part, we are going to make real-time notifications so that when somebody likes one of your stories, notification will appear in the app.

Image for post
Image for post

All code for this part you can find in front-end and back-end repositories.

Back-end

To make real-time notifications, we will use the SignalR library.

For now, we will have only two types of notifications — like and unlike.

Now let’s make the convention that all our notifications will have NotificationType property.

In some cases, notifications will have a payload and in some — not. In this part, we will use ones with the payload. Let’s specify a model for them.

And let’s make a model for like/unlike payload.

Two final files in the Notifications directory will be for SignalRHub specification and UserIdProvider. For now, hub won’t contain any methods. UserIdProvider needed to tell SignalR what to use as userId.

In the Startup class, we need to add additional code in Configure and ConfigureServices methods. Since we will use JWT for SignalR authentication, we need to change authentication configuration a little bit too.

The last step is to update ToggleLike action in StoriesController. Here we will use previously described models to build our notification message.

Front-end

On the front-end part, we need to make a SignalR connection in the startApp saga. The first step is to specify the parameters for the connection. For now, we will use hardcoded URL:) Then we will try to connect for 10 seconds. If connected successfully we will listen for notifications and if something happens will show a message for a user.

The rest on the front-end part is quite simple:) In the next part, we will add collaborative editing for stories.

Reach the next level of focus and productivity with increaser.org.

Image for post
Image for post
Increaser

Written by

Software engineer, creator of increaser.org. More at geekrodion.com

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