Real-Time Notifications Using Blazor and SignalR from scratch

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

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

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

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

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

    Just wanted to give a quick thanks for the straightforward and well explained tutorial. Gave me exactly what I needed to get started.

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

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

      I have a getting started video also :)

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

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

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

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

    Amazing video, full of knowlegde

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

    Awseome Signal R and Awesome video~

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

    Really great video Milan, much appreciated

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

    Excellent video! Great starting point.

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

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

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

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

    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.

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

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

    Thank you, Milan for the amazing video.

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

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

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

    Amazing video, full of knowledge

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

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

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

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

      Glad it helped!

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

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

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

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

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

    Thank you very much, Milan

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

      It's the best place to _start_ the connection.

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

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

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

    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 🙌

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

  • @davidjackson148
    @davidjackson148 28 дней назад +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  28 дней назад

      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 23 дня назад

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

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

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

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

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

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

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

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

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

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

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

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

  • @AbuBakrSadiqi-b7t
    @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
      @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?

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

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

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

    thank you so much!)

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

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

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

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

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

    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

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

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

      Does it work without authorization from Azure Functions?

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

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

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

    Could do similar with graphql and subscriptions

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

    nice

  • @parsalotfy
    @parsalotfy 9 дней назад

    do you have a video about background service?

    • @MilanJovanovicTech
      @MilanJovanovicTech  9 дней назад

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

    • @parsalotfy
      @parsalotfy 9 дней назад

      @@MilanJovanovicTech your videos are perfect

    • @parsalotfy
      @parsalotfy 9 дней назад

      @@MilanJovanovicTech thank you

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

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

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

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

    You mean Blyatzor?

  • @andrewbeeman84
    @andrewbeeman84 27 дней назад

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

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

    🔥🔥🔥🔥