.NET 6 Blazor 🔥 Chat with SignalR using WebSockets

🔥 Blazor E-Commerce Course: www.udemy.com/course/blazor-ecommerce/?couponCode=KZread
📧 Newsletter: newsletter.patrickgod.com/
❤️ Ko-fi: ko-fi.com/patrickgod
☕ Coffee: www.buymeacoffee.com/patrickgod
💻 GitHub: github.com/patrickgod/BlazorChatSignalR
🐦 Twitter: _PatrickGod
🔥 Blazor Bootcamp: www.udemy.com/course/blazor-webassembly/?referralCode=647B4EAACD6D8E4E6872
🚀 .NET Jumpstart Course: www.udemy.com/course/net-core-31-web-api-entity-framework-core-jumpstart/?referralCode=CA390CA392FF8B003518
Table of Contents:
00:00:00 Intro
00:02:18 Create the Project (Blazor WebAssembly ASP.NET Core hosted)
00:03:15 Add the SignalR NuGet Package
00:04:11 Create a SignalR Hub
00:08:52 Add Services & the ResponseCompression
00:11:09 Add the SignalR Hub Endpoint
00:12:09 AddRazor Component Code to the Index Page
00:22:39 Implement the HTML Part (Input Field, TextArea, Buttons, ...)
00:28:29 Send a Chat Message with "Enter"
00:29:30 Test the Chat App
00:33:00 Show the Username on Connect & on Disconnect
00:39:28 Another Test of the Chat App
00:40:43 Scroll to Bottom Implementations
00:46:24 Create the GitHub Repository
00:46:40 Outro
🙏MANY THANKS TO THESE LOVELY PEOPLE:
Joaquim
Alain Legrand
Per Rieland
@prodrigu75
Greg
Brendan Maunder
Stageoner
Andrew Campbell
pascalditzfeld
PovilasSimanskas
Ameet Jayawant
jenö
Marco Otilli
Mark
FastTrak
l33ter
alibux
@mgrainger231
g.dassel
Luke Vincent
mrcl
Alain Legrand
Thomas Werner
István Csibor
Grant Burdon
@gianluigiconti
Gerrit Esmeijer
Illia
Németh-Pók István
Michael Mel
Marko Zdilar
GerryB
@DADA_universe
Domen Hren
@heroesch
Carey
Peter De Tender
Baris Keskin
@Big_Bear_27390
Mathias
walter e watkins
Günther Dassel
Axel
Josh
Daniel Huber
Fredric Adell
Juan Carlos
Manolis
Pajani
P.
Jonas Granlund
Bobby
Kristina
@xamarin007
#SignalR #Blazor #PatrickGod

Пікірлер: 51

  • @saadbilal9519
    @saadbilal9519 Жыл бұрын

    Great video. Can you make another more in-depth video on SignalR with authorization implemented? In this way you can send messages to a particular client. It would be great if you could implement the group feature as well. Thanks

  • @labebe2197
    @labebe2197 Жыл бұрын

    Great video Patrick! Thank you so much!

  • @mzriryh
    @mzriryh Жыл бұрын

    Excellent. you are a very very good teacher, excellent one. I really enjoyed.

  • @DanielTames
    @DanielTames2 жыл бұрын

    Excelent video man! I really appreciate all your work!

  • @PatrickGod

    @PatrickGod

    Жыл бұрын

    Thank you so much! 😊

  • @Phantom1037
    @Phantom10372 жыл бұрын

    Great tutorial! Thank you!!

  • @PatrickGod

    @PatrickGod

    2 жыл бұрын

    Glad I could help. Thanks a lot for your feedback! 😊

  • @muralikrishnachowdarypolin5601
    @muralikrishnachowdarypolin56012 жыл бұрын

    Good video we looking forward to more videos on signalR 👍

  • @PatrickGod

    @PatrickGod

    2 жыл бұрын

    Alright! Thanks for your feedback! 😊

  • @muralikrishnachowdarypolin5601

    @muralikrishnachowdarypolin5601

    2 жыл бұрын

    Hi how to send messages to single user we just mentioned user ID in hub class or we can do anything in client side if u have any tutorials or any blog please refer to me

  • @MarcusRedmann
    @MarcusRedmann Жыл бұрын

    Great Tutorial. Now i can start my own work with SignalR

  • @PatrickGod

    @PatrickGod

    Жыл бұрын

    Go for it! Happy to help. 😊

  • @fadidib8516
    @fadidib85162 жыл бұрын

    what luck i wanted to search for videos about web assembly using signalR. thanks alot!

  • @PatrickGod

    @PatrickGod

    2 жыл бұрын

    Glad I could help! Thanks for your feedback. 😊

  • @nove1398
    @nove13982 жыл бұрын

    Great starting point for signalr👍

  • @PatrickGod

    @PatrickGod

    2 жыл бұрын

    Thank you! 😊

  • @moshiurshohel
    @moshiurshohel2 жыл бұрын

    Great!!❤

  • @PatrickGod

    @PatrickGod

    2 жыл бұрын

    Thank you very much! 😊

  • @jonasgranlund4427
    @jonasgranlund44272 жыл бұрын

    Hi Patrick, a few years ago I made a Line of business app for an insurance company in Sweden where I used SignalR together with knockoutJs to disable buttons for saving while one of the workers already had started with the claims process. It would be very nice and useful to see something similar with Blazor, where a clickevent "Start to process customer" or something will make it so everyone else that open that customer will have that button disabled until the "Save changes" button is clicked by the first user. :) I like this pro active way of not letting users overwrite their individual data changes, compared to Optimistic concurrency failure when the second change arrive towards db with wrong eTag (CosmosDb). An alterative way would be to push the changes from first user, towards all users that have the same object in their browser so it pushes changes but I don't like that solution as much. :)

  • @PatrickGod

    @PatrickGod

    2 жыл бұрын

    Hey Jonas, Interesting! Maybe I could build a small EditForm with Blazor and add two users using this form to a SignalR Hub and disable the button for the user that opened the form second? Or I display a list of entries (superheroes, for instance😅) and disable the "edit" button as soon as another user is currently on the edit form of this entry. Maybe that would work. How would you call such a tutorial? Can't think of a great title for now. 😉 Thanks for sharing! Take care, Patrick

  • @jonasgranlund4427

    @jonasgranlund4427

    2 жыл бұрын

    @@PatrickGod Hey Patrick, either of your suggestions would be absolutely awesome. Good question regarding name, functionality wise it is locking form for concurrent edit, but a good name for a tutorial I'm not sure of :( , but the functionality is very nice, especially in a distributed system where there is eventual consistency and 2 different users can overwrite each others changes in worst case.

  • @jonathanloth9128
    @jonathanloth91282 жыл бұрын

    Great!!! Best regards from Brasil

  • @PatrickGod

    @PatrickGod

    2 жыл бұрын

    Thank you so much! 😊

  • @enmingwang6332
    @enmingwang6332 Жыл бұрын

    Nice, great tutorial!👍

  • @PatrickGod

    @PatrickGod

    Жыл бұрын

    Thank you! Cheers!

  • @hastifallah73
    @hastifallah732 жыл бұрын

    Thanksss😍

  • @PatrickGod

    @PatrickGod

    2 жыл бұрын

    Glad I could help! Thanks for your feedback! 😊

  • @furious385
    @furious3859 ай бұрын

    Cool Content I like it .

  • @Saveaaa
    @Saveaaa2 жыл бұрын

    thanks for the example. is it possible to notify clients about new data using minimal api?

  • @PatrickGod

    @PatrickGod

    2 жыл бұрын

    Hey there! As far as I know, SignalR (WebSockets) and a Minimal API are two different concepts. If you would want to use a Minimal API project, you can totally do so and also add a SignalR Hub to inform all the connected clients about new data. And then you could either send the new data via WebSockets to the clients or they would have to click on a refresh button, for instance, to get the new data. Hope this helps! Take care, Patrick

  • @carlgoran6602
    @carlgoran660210 ай бұрын

    Thanks!

  • @PatrickGod

    @PatrickGod

    9 ай бұрын

    Thank you so much for the $5 Super Thanks! Your support is greatly appreciated and it helps keep the channel running. I'm glad you found the content helpful! If you have any questions or topics you'd like to see covered, feel free to let me know. Happy coding! 😊👩‍💻👨‍💻

  • @oveskhan687
    @oveskhan6879 ай бұрын

    This is amazing, Please also create video on how to debug Blazor app and WebAPI

  • @user-le5ur4fj6g
    @user-le5ur4fj6g2 жыл бұрын

    nice

  • @efexzium
    @efexzium2 жыл бұрын

    Can Blazor web assembly have a signal IR hub and communicate to other clients running the app so it’s decentralized?

  • @muralikrishnachowdarypolin5601
    @muralikrishnachowdarypolin56012 жыл бұрын

    hi please provide any documentation about sending real time messages to user to user i refer so many documents but all are shown same examples like clients.all.send if suppose I tried clients.User(userid).send but how to implement for client to catch single user messages

  • @ricksanchez207
    @ricksanchez207 Жыл бұрын

    how does running the server, that executes the program.cs on that project, actually loads the client application and renders the blazor wasm? sorry im confused :D Great Vid BTW!

  • @rivaldovola9896
    @rivaldovola98962 жыл бұрын

    love you videos. how about a blazor push nofication app?

  • @PatrickGod

    @PatrickGod

    2 жыл бұрын

    Thank you! Great idea! Added it to my bucket list. 😊

  • @exception_
    @exception_ Жыл бұрын

    Hello, can you tell me to develop a messenger like a telegram, it's better to use SignalR or regular web sockets?

  • @JamesHarcourt
    @JamesHarcourt Жыл бұрын

    Good video. Dankeshoen Bitteshoen.

  • @souravsingha3340
    @souravsingha33402 жыл бұрын

    Build chat with database and identity framework.

  • @rivaldovola9896
    @rivaldovola98962 жыл бұрын

    Hey Pat!! how are you? Question i'm want to build a email api service. where a app sends the body, to, from ect info to the mail api and sends the mail. now where i'm having issues is: I want to send a JWT token to make sure the user is authorized to send a mail. lets say I have the token how can I authorize the user? there should be a authentication header to send via httpclient but it doesnt seem to work or i'm not doing it right. idk if ur willing to help i'm just shooting my shot here lol. BTW fan from Suriname, South America

  • @PatrickGod

    @PatrickGod

    2 жыл бұрын

    Hey Rivaldo, Thanks, I'm great! How are you? 😉Maybe my "JSON Web Tokens" (kzread.info/dash/bejne/qGulldJ-e5SrcZM.html) and ".NET 6 Authorization" (kzread.info/dash/bejne/hniNwaathKjRldY.html) video is something for you among others. Hope this helps! Take care, Patrick

  • @user-hg5bq3ps6z
    @user-hg5bq3ps6z Жыл бұрын

    HubConnection StartAsync() not useful in pattern(error 405), url maybe what to modification

  • @user-hg5bq3ps6z

    @user-hg5bq3ps6z

    Жыл бұрын

    Http is ok but https is defeated

  • @comroec
    @comroec2 жыл бұрын

    how to do a private chat? pls

  • @PatrickGod

    @PatrickGod

    2 жыл бұрын

    Please checkout "Groups" for that. This is the best way to open private chat rooms.

  • @unkn0wnrge189
    @unkn0wnrge189 Жыл бұрын

    I thought God was your nickname since you say jesus all the time, but I see your mom gave u birthname god, amazing, at least in name you are in heavens.

  • @JakubSK
    @JakubSK2 жыл бұрын

    Dude you’re the only person using Blazor😂

  • @StandStillRushing

    @StandStillRushing

    2 жыл бұрын

    Re-visit this comment in 5 years. Blazor is going to take over and be the most widely used app development framework, I promise. =]