SignalR & Real-Time in Blazor Webassembly & ASP.NET Core API [Blazor Topics] | AK Academy

hello welcome to Academy welcome to a new blazer topic today we will talk about real-time signal our amplitude of assembly okay it's avenues up or with you at the beginning I am a Microsoft certified trainer certified solution developer and currently working as a dotnet full stack developer and this session what we are going to do actually is something like this will create an API really basically behind with only one controller and one action that sends a message to all the connected clients here is a place of assembly client when we click the connect button we connect to the hub though the signal our hub then even if we have multiple clients we can every time we call an action of the API it sends a message to that to the clients all the clients like a another message exactly at the right time you don't have to trigger any pins or to do anything so let's get started so before we get started let me explain to you a little bit about real-time and signal are just to make things more clear first I will define real-time very very simple real-time means when the app gets updated exactly when the event occurs at that time like for example what's up is a real-time chat application you don't receive the message that's being sent from another user after 10 seconds or 20 seconds or even a minute you receive it directly in the right time in the real-time when that user sends you to you that message another example Bank the news you get notified about their breaking news directly in the real-time when it happens not after one hour or two hours this means this is their brief time okay and in the modern application it's a very very important function in every source of application like especially when it to gaming look at Facebook Twitter notification system messenger applications this is that typical use of it but now currently it's being used everywhere even normal business application adding real-time functionality hopes and providing very cool user experience by getting the other users updates about what other user is doing in the system or when new things being added removed or deleted specific operation something like this so real-time something very very important so what about signal our signal are actually is a real-time framework created by Microsoft and even the communication between the server and client it was built on top of their web sockets I won't go in details too much about signal or itself you just want to learn how we can use it in our places webassembly applications ok so as I've said it enabled the communication between the server and client as you know client can simply call functions existing on the server by for example if the server is an API assembly from the client you can send an HTTP request but here with signal are even server can call the clients can tell the client to run at this function or like they can provide two-way communication between each other not only the client called the server and server responds back even the server can call functions existing on the client here I will give you an example about implementing a notification system in your application with using signal on without using signal arm so first I will starting without using signal or real-time functionality in general how you can let you users know about that hey there is something happen in the system and send notifications to the user actually the typical use is to create a function that's running every 5 minutes 5 seconds 10 seconds or whatever every 5 seconds let's say the client will tell the server hey is there any update then the server responds after five seconds that clients sent another request hey if there any updates the server also responds after five seconds like popular forever this is yep even here inside this example it's rude some way like the client seems not respectful like he's always asking the server keep nagging all the time this consumes a lot of resources on the client and even for the server but when using real-time functionality this can happen only with one simple request like the server gets updated for something like a user have written a comment on a specific post you want to need it defy that I use it that owns that posts you can simply from the server send the comment to the client and say hey that user committed in your post and this is the comment basically so in this way the client don't send too much requested requests and also he gets updated on that comment exactly in the real time when another user wrote that comment so this is a very quick introduction for real time a second are in general now it's time to move to visual studio and see how we can implement that in Placer so let's go first I will start Visual Studio 2019 click on create project ok I will choose place a wrap next okay here I will choose place documents Academy place of topics and signal are okay select the folder I'll call the project place in real time okay this is the name of the solution on the project but I will name the whole solution place the roots down because inside our solution there would be two projects and a PR project and the place of project the pleasure of assembling so I will call this project dot placing here I will remove this from the solution name so it was like this let's create okay here places webassembly it's still in the preview Edition till now it's gonna be available for production in me so it's not available by default in Visual Studio 2019 and don't make core 3.1 so if you don't have it I highly recommend you towards that getting started video with inside the place of topics playlist to learn how you can install the place where the sembly template and get starting with blazer I'll put the link for that video inside that description box so I will have to create okay that's cool the application has been initialized now I will add another project which is an API new project choose a speed own a core web application I'll call it plays a real-time dot okay choose API and head create okay now to get started we need to how to create a very very basic controller that simply does nothing I just can send a post request to it that contains a message then this API will call the place or application that hey I have got this message so I will create a new API controller MT API and I will collect notifications control issues like this and that okay here we go now this is good now before sending request before initializing signal are there is something very very important I need to enable course which is cross-origin resource sharing so our blazer Alliant application can send requests to this API because as you know browser or the server prevents browser from sending requests from their own to the client-side the requests to a for en a foreign sir fbi's or a foreign web application was actually not owned by that domain so here enabling course will let this API or let this web application receive all the requests from all the applications or browsers or client-side applications that depends on the pros so if you want to know more and more about course also I will put another link so you can get in details but for now we can simply enable it by just services dot ad course like this save options options go to add policy I'll call it post policy if you don't enable course you can send requests from your place or application to the server or to the API like in general maybe in this current demo we won't send any requests but in general always when you create a 0ab assembly application with an api don't forget to enable course at least for that website but here in this demo i will enable it for everything so here flat policy policy dot hello any origin hello any methods hello any header okay okay and I'm not okay yeah here I will come to the computer to add the manual use course and the name of policy like this now we are ready okay the next step is to initialize signal are on the server so go for dependencies management you get packages pros and install Microsoft or a spin at poor dots technolog yes like this okay and the Hat install okay now we're ready close this one pass in signal or there is something called hub how in the hub where the client and the server can communicate with each other like the hub enables the client to call functions on the server and vice versa the server can call functions on the client we have the hub so to create that simply click on the server add new class I will call it notification huh like this that help you should just inherits from how import them Microsoft with a spinning record those signal are like this and now you are ready actually this is the simplest class maybe you can create in your whole life but now without adding anything this house is working very fun but I will try to type override here to see what the function that I can override from available on hop unconnected on disconnected unconnected actually provides with a lot of orange generally enables me to do something when I user connected to this hub and on disconnected the thought the same thing but when the user is disconnected here I can use it for example to register that user or whatever getting the ID if I if you want to store that ID so you can communicate the server with only that user but for this demo we will communicate in general with all the clients then I will make specific video which is more advanced about how you can communicate with the clients with with a specific clients or with a group of clients which is that's another level of staking out it's very easy from the start tab and ok so for now this half is enough the last step you should do is or actually two steps go to startup and enable signal ours services of that signal are like this and you have to map that hub just specific URL in your application so here you can see and bounce dot map hop like this it's a generic method specify the tab in the hub which is the notification hub and here specify the URL of that hub which is slash not to vacation like this ok now we are ready we can move to the notifications controller and create that action HTTP POST top like async task I actually told post a notification we just sent a string to title like this that's enough from URL from choir like this okay now here we should inject and I have context of type notification help from that dependency container because when you in the start out when you configure the service at signal are directly add or register an IHOP context object inside the container so you can inject it in your controllers or whenever you want to use it so the private read-only context okay here we have got an instance injected so here what we want to do is whenever we call this function from anywhere we want to notify or to send this title for all the connected clients to our hub so they got this title sent to them how we can do this that's very very easy we can just take away up context the hub context as you remember there is clients and groups actually we haven't created any groups and we don't deal with the grooves of this video so go for clients sorry clients Dodd here I have plenty of functions to enables me contact or define my audience that I'm interested to send them the message I want to send actually its user here is just an ID you can get this idea from when the user connected to you by overriding the unconnected async function in your hub but for now we will send our message for all our plants so we can say clients dot old dot send async sent async takes two things first it's a string that defines like the type of the message or the contract you can say you'll say this new notification or sampling notification it just helps you to filter sort of messages like sometimes you sound notifications sometimes you send messages you send let's say new employee has been added to the system but for now we are sending notification and the value of it you can put it here so it is the title or I would send it like this [Applause] that title so at the end okay and send a message to the clients and successful okay that's good this is everything for the server it's pretty easy operation just the Sun of code you can send whatever you want if you want to send objects you can basically get that object like here imagine you have a car object simply serialize it to a Jason send it as a string and deserialize it on the client that's easy so now we can move to the client going to the pleasure project and sorry okay always you should hear a game installed that expert on a core library signal are but this one is for the client so it's a spinning poor got signal are don't climb like this yeah not here install the strawberry except let's close this one I would close all this files save now I will go to the pages and to the index which is the main component okay remove this town to take Millar with blazer and this I will add the status of our connection and then I will create a row scientists throughout the create column yeah then inside it I will send all or show all the messages I receive so before we do anything now before the design we should enable that communication with that signal our hub so I will type here the URL of our API which is I can get from here go to the server properties the bulk and this is that URL of the HTTP if you disable HTTP so this is the app URL I will take this one and paste it here stash notification oh okay that's cool now I will enable that when a user click on connect the connect button so at the bottom here give it a class BTN sorry success connect okay good now to connect I will create a portable of type of connection we should using Microsoft dog this Pinnock or signal are the client yeah so this is the up connection connection it's equal stone now for now then I will create a function back connects to the server a bit async task connect to server like this the connection is the definition this one equals two new up connection builder okay call that function 12 URL URL app set before then you don't okay like this that's good here I will add a message string connection status equals to load by default I will find it inside this one connection status at find for that that's nice now start the connection you can basically save connection and go start AC add a wait here action status it goes to connected cool another thing you can do is if the connection gets closed for some reasons you can reconnect again by subscribing to them event closed like this and I will create an expression okay connection status equals closed or disconnected and connect the game wait connection or star I think here we have to add a sink I'm sorry here just takes one parameter okay like this that's cool now whenever the connection gets closed for some reason simply we connect again okay now we have connected successfully let's try that I will run the application but before let's find this one on click it's an async message so you can say async and expression here await the connect to server like this and another thing I want to do is to add a flag called is connected false by default and disable this button if that connection is connected so I cannot click connect again here when the connection connected is connected it will stay true here disconnected equal to walls and the connection connect to the gain and gain is true okay that's good now let's run the apps you want to run both what are those is connect is not valid I want to run both applications together so I will right-click on the solution set startup projects choose multiply startup projects and click start on this one and start on this one and hit okay let's run okay this is our API upper running now again okay this is our place and application now I will try to click connect sorry I'm got an exception I will try to check here so I think this is because of failing sending the request of connection to the API this is related to course do you have enabled course and we will come here to check I'm sorry this is let's type course all we see then copy it paste it here ah here also I have I've been tempted correcting in two places Wow now let's try again okay this is the place or this is API click the connect okay that's good we have connected successfully that's good now let's see if we go to the hub I will overwrite on connected async like this then I will set a breakpoint here they both go to right line context which is a property available in the base class half dot connection ID I will print the connection of the connected user okay click on that you see that breakpoint has been heated now this is the connection ID of this user you can store it somewhere if you want to only send messages to this user okay now let's remove this breakpoint and continue execution that's good now the next step we can do is to receive H message being sent to the server and show it here so I will create a list of string call it new notifications new notifications and here iterate over that objects agents each notification I will create a row sided add item yeah like this so every time we just iterate over those notifications and create a new row type that the content of that notification inside and h4 that's good now to receive the messages being sent from that server that's very easy simply you can connection dot on this means every time or on receiving a message okay here we define the type for message which is string here we have two things or two arguments the first one is the method name as you remember we have set it in the server to notification if we go back to the notifications controller this is the method name modification and the second one is an action that takes an argument which is the message that have been sent so I will write here and create an expression and what you want to do is just to insert this message inside this list the notifications less so notifications don't add M Val last thing we should do is to notify the UI about that change because this method doesn't run on the UI thread so it's running on a different thread so you have to notify that place a page that hey something has been changed on the right so you can see it stay has changed just call this function like this and now we are ready let's start the application and to test the notifications controller and send requests I will run postman to be able to send requests okay from here I will copy this URL let's minimize this I don't want it create a new request with the URL slash API slash applications and it's a post request I can send the title title equals a this is the first message [Applause] now if I had sent okay go back to the place wrap and we haven't seen anything that's simply because we forgot to click the connect button I will click it again I will send that request you can see here Sam aha this is the message again send another one Wow that's cool as you can see them UI being updated without even hitting refresh or without trigger any event without taking any pot on the server send that data to the phone to the user to the client and shows it on the UI I I see that the appearance is not good but anyway at least the function is working we can try that on multiple clients like I will run multiple instances of this app start new instance and start a new instance again here I have three advances of displays or apps being work this one put this one here and okay this one here and postman little e connect and connect now have sent Wow all the applications being updated every time I send new message being received that's really cool I am very big fan of signal are for multiple reasons because first I'm a ban for dotnet and second main reason for being for falling love with signal are it's just because it's very very easy as you have seen just few lines of code we can do a lot of a lot of nice things okay that's very nice before we move to something else what I want to make in the near future videos like an upcoming few days I will extend my example to make it something more realistic like make an example about real business or about posting comments chat app but for time being this is the basics of signal hour we will see how we can send messages to a specific user or a group of users how we can set a group of users like this is the family group this is the manager this is I don't know then you can send that message to us that specific group that was cool I have really enjoyed that hope you do enjoyed it please if you liked that don't forget to hit like and subscribe button to stay updated with every new video being published by a key academy this symbol code will be available on github you can install it if you got into any problems simply put your question or your problem inside the comment section below this video I'll try to respond as soon as I can so thank you so much and see you again

Channel: AK Academy

Views: 13,401

Rating: 4.9594593 out of 5

Keywords: Software Development, Visual Studio, Xamarin.Forms, C#, .NET Core, .NET, Microsoft, Programming, AK Academy, Ahmad Mozaffar, Blazor, WebAssembly, SignalR, Real Time, ASP.NET Core, Users, Message, Notifications, Communication, Server Client, Client Side, Single Page Applications

Id: tUV5OMsttZk

Length: 37min 52sec (2272 seconds)

Published: Wed Mar 11 2020