.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
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
Great video Patrick! Thank you so much!
Excellent. you are a very very good teacher, excellent one. I really enjoyed.
Excelent video man! I really appreciate all your work!
@PatrickGod
Жыл бұрын
Thank you so much! 😊
Great tutorial! Thank you!!
@PatrickGod
2 жыл бұрын
Glad I could help. Thanks a lot for your feedback! 😊
Good video we looking forward to more videos on signalR 👍
@PatrickGod
2 жыл бұрын
Alright! Thanks for your feedback! 😊
@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
Great Tutorial. Now i can start my own work with SignalR
@PatrickGod
Жыл бұрын
Go for it! Happy to help. 😊
what luck i wanted to search for videos about web assembly using signalR. thanks alot!
@PatrickGod
2 жыл бұрын
Glad I could help! Thanks for your feedback. 😊
Great starting point for signalr👍
@PatrickGod
2 жыл бұрын
Thank you! 😊
Great!!❤
@PatrickGod
2 жыл бұрын
Thank you very much! 😊
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
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
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.
Great!!! Best regards from Brasil
@PatrickGod
2 жыл бұрын
Thank you so much! 😊
Nice, great tutorial!👍
@PatrickGod
Жыл бұрын
Thank you! Cheers!
Thanksss😍
@PatrickGod
2 жыл бұрын
Glad I could help! Thanks for your feedback! 😊
Cool Content I like it .
thanks for the example. is it possible to notify clients about new data using minimal api?
@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
Thanks!
@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! 😊👩💻👨💻
This is amazing, Please also create video on how to debug Blazor app and WebAPI
nice
Can Blazor web assembly have a signal IR hub and communicate to other clients running the app so it’s decentralized?
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
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!
love you videos. how about a blazor push nofication app?
@PatrickGod
2 жыл бұрын
Thank you! Great idea! Added it to my bucket list. 😊
Hello, can you tell me to develop a messenger like a telegram, it's better to use SignalR or regular web sockets?
Good video. Dankeshoen Bitteshoen.
Build chat with database and identity framework.
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
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
HubConnection StartAsync() not useful in pattern(error 405), url maybe what to modification
@user-hg5bq3ps6z
Жыл бұрын
Http is ok but https is defeated
how to do a private chat? pls
@PatrickGod
2 жыл бұрын
Please checkout "Groups" for that. This is the best way to open private chat rooms.
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.
Dude you’re the only person using Blazor😂
@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. =]