Real-Time Notifications Using Blazor and SignalR from scratch

[@MilanJovanovicTech]

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

[@alexdobrynin]

may we have link to this code?

[@chadelz]

Clear, concise and to the point. Really well done video and nothing more you could really need to learn SignalR. Thanks for this!

[@MilanJovanovicTech]

You're very welcome!

[@LordMuro]

Thank you, Milan, for the great video! I have a suggestion for your next one: gRPC server-side streaming and Blazor WebAssembly.

[@MilanJovanovicTech]

Thanks for the idea!

[@davidjackson148]

Thanks for this. I'm new to signalr, was a bit over complicated for my needs, but I manage to strip out what I didnt need and got it working, so thats for the head start :)

[@MilanJovanovicTech]

I have a getting started video also :)

[@davidjackson148]

@@MilanJovanovicTech oh thank you what's the link?

[@Lagendy]

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.

[@MilanJovanovicTech]

Will see, but I haven't done client side videos

[@rafa_guitar]

Thank you very much for this awesome quality channel and lessons Milan, happy to subscribe!

[@MilanJovanovicTech]

Welcome aboard!

[@gurolgencel]

Great video, It can integrate with a MAIU app and create push notifications for mobile devices ... Maybe future videos 😀

[@MilanJovanovicTech]

Doubt I'll ever cover MAUI 😅

[@robertoacuna4667]

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.

[@MilanJovanovicTech]

Glad I could help!

[@julius7824]

Amazing video, full of knowlegde

[@MilanJovanovicTech]

Glad it was helpful!

[@EldonElledge]

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.

[@MilanJovanovicTech]

That's an interesting observation. I still see many systems using JWTs freely.

[@EldonElledge]

@@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. 😃

[@VF7RM]

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? 🤔

[@MilanJovanovicTech]

Not sure how that will work, I'd look for some documentation

[@IQEGO]

I have the same question

[@alexmadnix]

Awseome Signal R and Awesome video~

[@MilanJovanovicTech]

Thanks a lot! :)

[@rubberuk]

Excellent video! Great starting point.

[@MilanJovanovicTech]

Thanks a lot!

[@jamesevans6438]

Really great video Milan, much appreciated

[@MilanJovanovicTech]

Any time, glad I can provide some value :)

[@crazyfox55]

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?

[@MilanJovanovicTech]

CORS is there to allow the SignalR connection to happen between client and server applications

[@crazyfox55]

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?

[@peteriehl]

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?

[@MilanJovanovicTech]

It's the best place to _start_ the connection.

[@peteriehl]

@@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.

[@kodindoyannick5328]

Thank you, Milan for the amazing video.

[@MilanJovanovicTech]

My pleasure!

[@sushilb7994]

Excellent video as always, Milan! Do you know connection limit with the default signal R hub?

[@MilanJovanovicTech]

Depends on your application server or backplane you are using. It can easily handle a few thousand concurrent connections.

[@sushilb7994]

@@MilanJovanovicTech thanks Milan! I ran into concurrent connections issues my earlier project and we had to move to Azure Signal R hub.

[@niel6939]

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?

[@MilanJovanovicTech]

There's still the SignalR .NET Framework package

[@romancalderon]

Very useful video, thanks! BTW how did you enable that little emoji util window??

[@MilanJovanovicTech]

Windows button + .

[@romancalderon]

😱😤 ty@@MilanJovanovicTech

[@feinirl]

hey, nice video :=) Is this a custom theme u using for your visual studio or did you changed the colors? Looks amazing

[@MilanJovanovicTech]

R# syntax highlighting

[@feinirl]

@@MilanJovanovicTech how do i get that?

[@davidjackson148]

I already have a user token on my client. I get this from my API when I log in. How do I register that with SignalR ? So I can send a message specifically to that user?

[@MilanJovanovicTech]

There's a token factory argument when creating the hub connection. On the server, you can use the Users ID to send them a message: www.milanjovanovic.tech/blog/adding-real-time-functionality-to-dotnet-applications-with-signalr#sending-messages-to-a-specific-user

[@davidjackson148]

Sorted it. using the OnConnected and OnDisconnected events, with smattering of IHttpContextAccessor and it all works perfectly

[@CRBarchager]

11:35 Is that an add-on or a build in function in VS to get emojis?

[@MilanJovanovicTech]

Windows + .

[@CRBarchager]

@@MilanJovanovicTech You're awesome. Thank you!

[@AbuBakrSadiqi-b7t]

Please please, answer my below question, thanks in advance. I have one question, please help me. I have two microservices, A and B. and Ocelot gateway infront of them. both of those services are using signalr hubs. each have different urls. how I can use them in ocelot so I can have one url for both of them and use them in angular. only tell me the tools that I can use, or any hint.

[@MilanJovanovicTech]

Here's what Claude says: To address your situation with two microservices (A and B) using SignalR hubs behind an Ocelot API gateway, and your desire to use a single URL for both in Angular, here are some tools and hints that could help: Ocelot WebSockets support: Ocelot has built-in support for WebSockets, which is the underlying technology used by SignalR. You can configure Ocelot to route WebSocket connections. SignalR scale-out: Consider using a SignalR scale-out provider like Redis or Azure SignalR Service to handle multiple server instances. Sticky Sessions: Ensure your load balancer (if used) supports sticky sessions, as SignalR requires client requests to be routed to the same server. URL Rewriting: Use Ocelot's URL rewriting capabilities to map different hub URLs to a single endpoint. SignalR JavaScript client: In your Angular application, use the SignalR JavaScript client to connect to the unified endpoint provided by Ocelot. CORS configuration: Ensure proper CORS (Cross-Origin Resource Sharing) settings in both your microservices and Ocelot gateway. WebSocket routing in Ocelot: Configure WebSocket routing in your Ocelot configuration file to properly direct traffic to the correct microservice. SignalR Hub inheritance: Consider creating a base hub class that both of your microservices can inherit from to standardize some functionality. These tools and hints should provide a starting point for integrating your SignalR-based microservices behind Ocelot and accessing them through a single URL in your Angular application. Would you like me to elaborate on any of these points?

[@miyanorozu]

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?

[@MilanJovanovicTech]

Does it work without authorization from Azure Functions?

[@miyanorozu]

@@MilanJovanovicTech I change the AuthorizationLevel and then it works now. Thanks!

[@shahidnoor1984]

Sir i have confusion about how to get this connectionId from outside of the hub class

[@MilanJovanovicTech]

Use the User ID instead

[@vrnz2]

Amazing! Work's worderfull! Thank's a lot!

[@MilanJovanovicTech]

Glad it helped!

[@vrnz2]

@@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!

[@williangalvez4648]

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 🙌

[@MilanJovanovicTech]

No idea how that is happening

[@YehorBachurinDev]

Thank you very much, Milan

[@MilanJovanovicTech]

Happy to help :)

[@narantsatsraltdavaadorj4728]

Amazing video, full of knowledge

[@MilanJovanovicTech]

Glad it was helpful!

[@PritamPaul-y1h]

do i need to add any nuget packages in api side also?

[@MilanJovanovicTech]

SignalR. You can grab the source code from the pinned comment.

[@franciscolacerda666]

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.

[@MilanJovanovicTech]

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.

[@franciscolacerda666]

@@MilanJovanovicTech Thanks for the reply. Will try it. Once again, congrats for the content. Cheers!

[@SonuKumar-ur5tn]

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

[@MilanJovanovicTech]

SignalR does all that automatically

[@yogij17]

Thanks a lot Milan Can we use signalr with web api?

[@MilanJovanovicTech]

Yes

[@agnieszkagrzymska8672]

Why are you using two separate projects for the api and the client? Can't it all be done in one?

[@MilanJovanovicTech]

Because it's two separate applications? ASP.NET Core and Blazor

[@andredamasoslb]

Could do similar with graphql and subscriptions

[@MilanJovanovicTech]

Cool!

[@parsalotfy]

do you have a video about background service?

[@MilanJovanovicTech]

Check out Quartz: kzbin.info/www/bejne/n3WWm6WgaLd1q8U

[@parsalotfy]

@@MilanJovanovicTech your videos are perfect

[@parsalotfy]

@@MilanJovanovicTech thank you

[@EverythingAndDaily]

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.

[@friedohonyiglo8009]

It is possible for sql server but i'm not sure for other databases. Search SqlTableDependency.

[@anilkarasahh]

Rather than using a BackgroundService, you can send a signal inside the corresponding endpoint, maybe 🤔 Front-end can listen and react to it.

[@matthewrossee]

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

[@sergiobazan1095]

@MilanJovanovicTech can you make a video on this please? It'll be very usefull

[@MilanJovanovicTech]

Use a database that already supports something like this. Supabase has subscriptions for example, and it's a PostgreSQL database under the hood.

[@mtranchi]

11:35 How did you bring up that emoji dialog?

[@MilanJovanovicTech]

Windows + .

[@zaferavc2003]

Thank you Bro

[@MilanJovanovicTech]

Any time

[@arsenius4870]

thank you so much!)

[@MilanJovanovicTech]

You're welcome!

[@sohrabhashed1488]

nice

[@MilanJovanovicTech]

Thanks

[@loam]

You mean Blyatzor?

[@MilanJovanovicTech]

Lol

[@andrewbeeman84]

Yet another video that ignores the most obvious issue of using any kind of auth whatsoever with the signalR connection.

[@MilanJovanovicTech]

Which is?

[@techpc5453]

🔥🔥🔥🔥

[@MilanJovanovicTech]

🔥🔥🔥🔥