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”.
Goal for this part
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.
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.
Notifications
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 SignalR — Hub specification and UserIdProvider. For now, hub won’t contain any methods. UserIdProvider needed to tell SignalR what to use as userId.
Startup
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.
StoriesController
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.
