Real-Time Notifications Using Blazor and SignalR from scratch
Vložit
- čas přidán 26. 07. 2024
- Get the source code for this video for FREE → the-dotnet-weekly.ck.page/sig...
☄️ Master the Modular Monolith Architecture: bit.ly/3SXlzSt
📌 Accelerate your Clean Architecture skills: bit.ly/3PupkOJ
🚀 Support me on Patreon to access the source code: / milanjovanovic
Blazor is Microsoft's very own SPA framework, except Blazor is special. Blazor is written in C#, so you can use all the excellent libraries you've already been using. One of them is SignalR, which integrates perfectly with Blazor. In this video, I'll show you how to implement real-time notifications with Blazor and SignalR.
Adding Real-Time Functionality To .NET Applications With SignalR:
www.milanjovanovic.tech/blog/...
Join my weekly .NET newsletter:
www.milanjovanovic.tech
Read my Blog here:
www.milanjovanovic.tech/blog
Chapters
0:00 Blazor overview
0:51 Creating and configuring the SignalR hub
4:15 Adding a background service for sending notifications using SignalR
8:09 Blazor WebAssembly - adding the SignalR connection
13:15 Adding JWT authentication to the SignalR hub
14:47 Sending the JWT token from the SignalR client - Věda a technologie
Get the source code for this video for FREE → the-dotnet-weekly.ck.page/signalr-notifications
Want to master Clean Architecture? Go here: bit.ly/3PupkOJ
Want to unlock Modular Monoliths? Go here: bit.ly/3SXlzSt
may we have link to this code?
Just wanted to give a quick thanks for the straightforward and well explained tutorial. Gave me exactly what I needed to get started.
Thank you very much!
Thank you very much for this awesome quality channel and lessons Milan, happy to subscribe!
Welcome aboard!
Really great video Milan, much appreciated
Any time, glad I can provide some value :)
Excellent video! Great starting point.
Thanks a lot!
Awseome Signal R and Awesome video~
Thanks a lot! :)
Amazing video, full of knowlegde
Glad it was helpful!
Thank you, Milan for the amazing video.
My pleasure!
you are my hero men thank you so much for this video I have a project that need on background process sending to our UI using blazor as well and this video is very relevant.
Glad I could help!
Thank you, Milan, for the great video!
I have a suggestion for your next one: gRPC server-side streaming and Blazor WebAssembly.
Thanks for the idea!
Amazing! Work's worderfull! Thank's a lot!
Glad it helped!
@@MilanJovanovicTech i'm still have a little doubt. I'm get a instance of IHubContext from dependency injection in a web api controller but when I try to send a message doesn't work. Inspecting the context that I got from class constructor, I inspect the private methods and observe that don't have any connections associated to it. I reviewed my DI process to ensure it same of your example code and both are equals. Do you have a tip for me to find de error? Thank you so much!
Thank you very much, Milan
Happy to help :)
Amazing video, full of knowledge
Glad it was helpful!
Great video, It can integrate with a MAIU app and create push notifications for mobile devices ... Maybe future videos 😀
Doubt I'll ever cover MAUI 😅
I really ALWAYS enjoy your videos. And this one like all of the others is great.
I would caution flag about using the JWT Token when making calls from UI to APIs. From a security standpoint, we really should be using a Reference Token. The self-contained properties makes the JTW token a bit of a security risk here. But, they are still fine to use for service-to-service calls.
That's an interesting observation. I still see many systems using JWTs freely.
@@MilanJovanovicTech, I agree there are still many people showing this in their demos.
It reminds me of how long it took everyone to stop showing the incorrect way to use the HttpClient. Even Microsoft was showing it the wrong way in their on demos and documentation. 😃
thank you so much!)
You're welcome!
Amazing video! Do you have any suggestions on a package/library that could implement the same on a client that is still on Net Framework?
There's still the SignalR .NET Framework package
hey, nice video :=) Is this a custom theme u using for your visual studio or did you changed the colors? Looks amazing
R# syntax highlighting
@@MilanJovanovicTech how do i get that?
nice
Thanks
Excellent video as always, Milan!
Do you know connection limit with the default signal R hub?
Depends on your application server or backplane you are using. It can easily handle a few thousand concurrent connections.
@@MilanJovanovicTech thanks Milan! I ran into concurrent connections issues my earlier project and we had to move to Azure Signal R hub.
Very useful video, thanks! BTW how did you enable that little emoji util window??
Windows button + .
😱😤 ty@@MilanJovanovicTech
This video showed how you can receive messages from server to client.
Would also be nice if you could show how to make the communication two ways.
Will see, but I haven't done client side videos
Thanks a lot Milan
Can we use signalr with web api?
Yes
Hi there nice lesson thank you so much, I have an little isssue with duplicated signalr messages. Have you ever seen this? thank you again 🙌
No idea how that is happening
Can you explain why you need CORS? Within the hub connection isn't there a way to get the current base URL of the website the user currently is on already, that way you don't have to hard code it?
CORS is there to allow the SignalR connection to happen between client and server applications
I would expect the api and web app to be hosted at the same URL. But I see now that they are not. Why aren't they on the same URL?
Is the OnInitializedAsync the best place to create the HubConnection? Could it be done in Program.cs and registered, in order to be injected into the page/pages that need the HubConnection?
It's the best place to _start_ the connection.
@@MilanJovanovicTech Agreed, it is the best place to start the connection (after you've wired up the message consumption, but is there a better way to pass the base url in there? I'm comparing it to the registration of my http client using the value from the HostEnvironment.BaseAddress value that's on the WebAssemblyHostBuilder, which i do in the Program.cs.
11:35 Is that an add-on or a build in function in VS to get emojis?
Windows + .
@@MilanJovanovicTech You're awesome. Thank you!
What about Blazor Server? Could/Should I implement a SignalR client with Blazor server or does it make more sense using JS to create it? 🤔
Not sure how that will work, I'd look for some documentation
I have the same question
11:35 How did you bring up that emoji dialog?
Windows + .
Sir i have confusion about how to get this connectionId from outside of the hub class
Use the User ID instead
Could do similar with graphql and subscriptions
Cool!
Hi Milan, if I have multiple agent connect with same hub but condition is agent not maintain presistent connection it's connected hub in every 15 min after some time disconnected, and my admin page connected with hub in request basics how to maintain these connection based on connection id or based on user Id , please provide some solution about that
SignalR does all that automatically
do i need to add any nuget packages in api side also?
SignalR. You can grab the source code from the pinned comment.
I published my SignalR Azure Function to Azure, but my client had a problem with connecting to SignalR. It shows 401 error which was not found when I tested it locally and I think maybe I missed something to do with authorization?
Does it work without authorization from Azure Functions?
@@MilanJovanovicTech I change the AuthorizationLevel and then it works now. Thanks!
Ok, but how to you pass the userId to ServerTimeNotifier (which is a singleton) without hardcoding the userId. Most of the injection of authorization and authentication midlewares are scoped. Or am I looking at this the wrong way? Still, great content! Cheers.
Yeah - let's say that job wants to target a specific set of users. We could insert a set of notifications/message records to the database that contain the User ID. Then in the background job, we can fetch a batch of notifications and sent them to the appropriate user.
@@MilanJovanovicTech Thanks for the reply. Will try it. Once again, congrats for the content. Cheers!
How to watch real-time data inserted in the database table without using a timer? As soon as new records are inserted, I want to get an update on front end.
It is possible for sql server but i'm not sure for other databases. Search SqlTableDependency.
Rather than using a BackgroundService, you can send a signal inside the corresponding endpoint, maybe 🤔 Front-end can listen and react to it.
When db transaction is executed successfully, then you can send a notification to your client. When applying DDD, you can take advantage of domain event handlers that are executed by the SaveChanges interceptor in EF Core, or invoke notification directly from your service/command
@MilanJovanovicTech can you make a video on this please? It'll be very usefull
Use a database that already supports something like this. Supabase has subscriptions for example, and it's a PostgreSQL database under the hood.
Why are you using two separate projects for the api and the client? Can't it all be done in one?
Because it's two separate applications? ASP.NET Core and Blazor
You mean Blyatzor?
Lol
🔥🔥🔥🔥
🔥🔥🔥🔥