Real-Time Notifications Using Blazor and SignalR from scratch

Поделиться
HTML-код
  • Опубликовано: 29 янв 2025

Комментарии • 122

  • @MilanJovanovicTech
    @MilanJovanovicTech  Год назад +4

    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

  • @chadelz
    @chadelz 2 месяца назад +3

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

  • @rafa_guitar
    @rafa_guitar Год назад +2

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

  • @LordMuro
    @LordMuro Год назад +3

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

  • @Lagendy
    @Lagendy Год назад +1

    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.

  • @alexmadnix
    @alexmadnix Год назад +3

    Awseome Signal R and Awesome video~

  • @davidjackson148
    @davidjackson148 5 месяцев назад

    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
      @MilanJovanovicTech  5 месяцев назад

      I have a getting started video also :)

    • @davidjackson148
      @davidjackson148 5 месяцев назад

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

  • @julius7824
    @julius7824 Год назад +4

    Amazing video, full of knowlegde

  • @EldonElledge
    @EldonElledge Год назад +2

    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
      @MilanJovanovicTech  Год назад +1

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

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

  • @jamesevans6438
    @jamesevans6438 Год назад +1

    Really great video Milan, much appreciated

  • @gurolgencel
    @gurolgencel Год назад +2

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

  • @rubberuk
    @rubberuk Год назад +1

    Excellent video! Great starting point.

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

  • @kodindoyannick5328
    @kodindoyannick5328 10 месяцев назад

    Thank you, Milan for the amazing video.

  • @CRBarchager
    @CRBarchager Год назад +1

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

  • @JeremyAlpha
    @JeremyAlpha 6 дней назад

    Excellent tutorial, thank you so much.

  • @sushilb7994
    @sushilb7994 Год назад +1

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

    • @MilanJovanovicTech
      @MilanJovanovicTech  Год назад

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

    • @sushilb7994
      @sushilb7994 Год назад +1

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

  • @feinirl
    @feinirl Год назад +1

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

  • @romancalderon
    @romancalderon Год назад +1

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

  • @PritamPaul-y1h
    @PritamPaul-y1h 7 месяцев назад +1

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

    • @MilanJovanovicTech
      @MilanJovanovicTech  7 месяцев назад

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

  • @VF7RM
    @VF7RM Год назад +3

    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
      @MilanJovanovicTech  Год назад +1

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

    • @IQEGO
      @IQEGO Год назад

      I have the same question

    • @volibita8902
      @volibita8902 Месяц назад

      +1, a lot of time i try to implement notifications in server blazor app but without success, unfortunately

  • @narantsatsraltdavaadorj4728
    @narantsatsraltdavaadorj4728 8 месяцев назад +1

    Amazing video, full of knowledge

  • @yogij17
    @yogij17 Год назад

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

  • @niel6939
    @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?

  • @peteriehl
    @peteriehl 11 месяцев назад +1

    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
      @MilanJovanovicTech  11 месяцев назад

      It's the best place to _start_ the connection.

    • @peteriehl
      @peteriehl 10 месяцев назад

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

  • @miyanorozu
    @miyanorozu 10 месяцев назад +1

    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
      @MilanJovanovicTech  10 месяцев назад

      Does it work without authorization from Azure Functions?

    • @miyanorozu
      @miyanorozu 10 месяцев назад

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

  • @YehorBachurinDev
    @YehorBachurinDev 11 месяцев назад

    Thank you very much, Milan

  • @vrnz2
    @vrnz2 Год назад

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

    • @MilanJovanovicTech
      @MilanJovanovicTech  Год назад +1

      Glad it helped!

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

  • @crazyfox55
    @crazyfox55 Год назад +1

    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
      @MilanJovanovicTech  Год назад

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

    • @crazyfox55
      @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?

  • @tu_terenneco_fiu_fiu
    @tu_terenneco_fiu_fiu Год назад

    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 🙌

  • @shahidnoor1984
    @shahidnoor1984 Год назад +1

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

  • @ahmadaskar3360
    @ahmadaskar3360 Месяц назад

    what is the name of the theme you are using ?

  • @davidjackson148
    @davidjackson148 4 месяца назад +1

    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
      @MilanJovanovicTech  4 месяца назад

      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
      @davidjackson148 4 месяца назад

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

  • @parsalotfy
    @parsalotfy 3 месяца назад

    do you have a video about background service?

    • @MilanJovanovicTech
      @MilanJovanovicTech  3 месяца назад

      Check out Quartz: ruclips.net/video/iD3jrj3RBuc/видео.html

    • @parsalotfy
      @parsalotfy 3 месяца назад

      @@MilanJovanovicTech your videos are perfect

    • @parsalotfy
      @parsalotfy 3 месяца назад

      @@MilanJovanovicTech thank you

  • @andredamasoslb
    @andredamasoslb Год назад +1

    Could do similar with graphql and subscriptions

  • @mtranchi
    @mtranchi Год назад +1

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

  • @AbuBakrSadiqi-b7t
    @AbuBakrSadiqi-b7t 4 месяца назад

    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
      @MilanJovanovicTech  4 месяца назад

      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?

  • @franciscolacerda666
    @franciscolacerda666 10 месяцев назад

    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
      @MilanJovanovicTech  10 месяцев назад +1

      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
      @franciscolacerda666 10 месяцев назад

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

  • @agnieszkagrzymska8672
    @agnieszkagrzymska8672 9 месяцев назад

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

    • @MilanJovanovicTech
      @MilanJovanovicTech  9 месяцев назад

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

  • @SonuKumar-ur5tn
    @SonuKumar-ur5tn 11 месяцев назад

    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

  • @zaferavc2003
    @zaferavc2003 2 месяца назад

    Thank you Bro

  • @troffeecoffeemachines719
    @troffeecoffeemachines719 2 месяца назад

    How can I pass this HubContext to a class where I have the Business Logics ?

  • @arsenius4870
    @arsenius4870 8 месяцев назад

    thank you so much!)

  • @EverythingAndDaily
    @EverythingAndDaily Год назад +1

    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
      @friedohonyiglo8009 Год назад

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

    • @anilkarasahh
      @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
      @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
      @sergiobazan1095 Год назад

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

    • @MilanJovanovicTech
      @MilanJovanovicTech  Год назад

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

  • @sohrabhashed1488
    @sohrabhashed1488 11 месяцев назад

    nice

  • @loam
    @loam 8 месяцев назад

    You mean Blyatzor?

  • @andrewbeeman84
    @andrewbeeman84 4 месяца назад

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

  • @techpc5453
    @techpc5453 Год назад +1

    🔥🔥🔥🔥