Realtime notification using SignalR in asp net core mvc application

this modern industry mode we are going to use signal are to implement real-time notification feature in our NBC application in the previous video we downloaded and edit the all the necessary files for signal are so in this demo we are going to use those and add single signal our to our project so for the first place in order to use signal are we need to define the signal server which is also called the hop class so in order to define the hop class we need to create the folder here I mean and I'm going to name this folder as infrastructure infrastructure folder and inside that infrastructure folder I'm gonna create a class called signal server of course you can give any name you like but you need to have you need to create the this class which will be inheriting from the hot class to work for this in order for the signal R to work so let's create this class it is in the name space of MBC the amount of infrastructure infr SDR you see ture infrastructure and let's define the class public class and the name of the class signal server and this class should inherit from the hot class which comes from the signal our new great package that we installed in our previous video and this makes this class as a signal server so we are not going to implement any methods here for the purpose of this demo just the class easy enough so let's close this and now next step is we're gonna need to add a signal our to our start after SES file so we are gonna act signal are here in the configure service method just before the NBC show we do services third aid signal our and once we added signal our here we need to configure the signal our routing we can do if the to use signal are and then we are going to provide a route configuration here route Smiley's take route goes to route map hop and we need to provide the name of our signal server class which inherits from the hop class so here we provide signal server signal server and now we need to provide the path and the path for the server so let's say the signal server of course you can give any path here but we're gonna need to use this part later on all the clients who wants to communicate with the signal server should use this router from the client so let's bring in the namespace for this now and I'm gonna copy this name here so that I can use this letter signal server so let's save this now we need to go to our JavaScript file size is where we we're displaying notifications and now in this script file I'm gonna go over here and establish the connections to our signal server so let's say late connection equal to new signal our dot new signal our earth connection and now we need to provide that path route that we defined in a start up third CS file so that the client can communicate can connect with our signal server class so this defines the connection and now we can define the method that we want to call from the server let's say connection dot on and let's say the name of the method is display notification the SPLA will display notification and I'm going to copy this name and once we call this method we are going to execute a function here and in this function we are going to call our get notification method let's save this and now finally we need to establish the connection we need to start the connection so that can be done by connection dot start and if she starts the connection now the other thing we need to do is whenever we create the notification in our notification repository then we can call this method and whenever we call this method from this notification repository then this method in the client executes and it executes the get notification method which in turns display the notification in our browser so let's go to the notification repository and just after we finished creating our notification in our priyad method we are going to execute that method with the help of signal server signal are so in order to use signal are in our repository we need to inject an the class here let's define a private variable I hop context and we need to provide the type of our signal server class signal server and let's say this has a hot context and if you if you saw that if you see the red squiggly here then you need to bring in the namespace here so just click here and bring in the namespace and after that we need to inject that hop context inside our constructor so this I our context and in the type would be the same signal server let's name this as a hop context and now I'm going to install this hop context in our private variable private field hop context so that I can use it throughout our class now just after we finished creating our notification we need to execute our client-side method that we defined inside 30s this matter display notification from here and we can call that method by doing hop context third clients dot all dot in Bach icing and provide the name of the method display mode if occasion and we can pass extra data here and for our case we are not passing any data to the client so lets us pass empty through this is all it takes to implement and the signal are to provide real-time notification in our MVC application and once we do this we need to make a small change here and that change is that whenever our notification count is not equal to zero we display the count in our base class and if the notification account is equal to 0 then we hide all those elements from our HTML element and so whenever the notification is a whenever there is notification count we also need to tell the browser to show the element that we hide here so let's we gonna do notification countered so and then let's say slow and once we do that let's go to the browser and let's refresh and let's refresh the another browser as well and now I'm going to create the notification by clicking on this button because here I am logged in as test at the red gmail.com and Here I am logged in as test one after at gmail.com and whenever the I change the status of this pair then this user should get the notification and I need you to see just in between the email address and logout button and whenever these user changes the status of this path then this user should get the notification without refreshing the browser so let's give it our notification and there you go we see the notification if that user again changes the status of displayed then we see the notification count increasing so with the help of signal our we can communicate we can provide real-time communications between the clients and the server so it lasts just a small revision here in order for the signal are to work we need to create our hop class and any the name of the class could be any one but that should inherit from the OP class and after we create that class we need to go to our startup file and we need to add the signal are here in the dependency injection section after then we need to configure the signal our and we need to provide the route for the signal art and we can use this route from our client to connect to the signal server and once we connect to the signal server we can start the connection and whenever the name of this method then we can define the connection that own function and give you the name of the method and we can execute this method from our server-side code and whenever the server-side could execute this method then we can call other methods that we want to in our client client-side script and the method that we name here we can call this method from whenever from wherever we want in our server-side code so we want to call this method whenever the user creates an modification so we just called the display notification method from our create notification method by using a hub context so this is the end of this demo and thanks for watching have a good day

Channel: Madan Uprety

Views: 30,469

Keywords: signalr, asp net core, asp .net core, asp dot net core, asp dot net core mvc, asp dot net, mvc, realtime notification using signalr, realtime communication using signalr, signal r in asp dot net core

Id: 8bqTmD5Tpjc

Length: 11min 5sec (665 seconds)

Published: Sun Apr 01 2018