Create Chat Application using Angular and .Net (SignalR) | Group Chat Feature | Angular Project |
HTML-код
- Опубликовано: 27 сен 2023
- 🚀 Welcome to another exciting tutorial on building real-time chat applications! In this video, we'll guide you through the process of creating a powerful chat application using Angular and .Net, with SignalR for seamless real-time communication.
🔧 Whether you're a beginner looking to expand your web development skills or an experienced developer seeking to add a group chat feature to your project, this tutorial is designed to help you every step of the way.
Here's what you can expect to learn in this tutorial:
🛠️ Setting up the Angular environment: We'll start by setting up our Angular development environment and creating a new Angular project to kick things off.
🌐 Building the backend with .Net and SignalR: You'll learn how to create a robust backend using .Net and SignalR to handle real-time messaging, user authentication, and group chat functionality.
🎨 Creating the front-end UI: We'll dive into Angular components, services, and templates to create a user-friendly interface for our chat application.
👥 Implementing group chat: Discover how to add group chat capabilities, allowing users to create, join, and manage chat rooms for collaborative conversations.
📬 Real-time messaging: We'll demonstrate how to establish real-time communication between users, ensuring instant message delivery and updates.
By the end of this tutorial, you'll have a fully functional chat application that you can customize and integrate into your own projects. Join us on this coding journey, and let's build an impressive Angular and .Net chat application together!
Don't forget to like, share, and subscribe for more exciting web development tutorials. If you have any questions or need assistance along the way, feel free to leave a comment, and we'll be happy to help. Happy coding! 🚀
Github: github.com/yshashi/ChatApplic...
📢 Connect with us on social media for more exciting tutorials and updates:
Support me: / letsprogram
Connect with me on the below Social links:
RUclips: / @letsprogram30
Instagram: / lets.program
LinkedIn: / sashikumar-yadav
Telegram: t.me/letsprogramYt
Twitter: / yshashi30
Let's Program Blog: letsprogram.in/
Angular Signals
• Signals in Angular | H...
Angular 14 Login and Signup Page | Part 1
• Angular 14 Login and S...
Angular 14 Form Validation| Part 2
• Angular 14 Reactive Fo...
Login & Signup API creation & integration with Angular | Part 3
• Login and Signup using...
Encrypt Password in .NET 6 | Password strength checker in Angular
• Encrypt Password in .N...
Angular Authentication with Hashed Password | Part 5
• Angular Authentication...
Create JWT token in .NET 6 | Angular + .NET authentication | Part 6
• Create JWT token in .N...
Implement JWT token in Angular 14| Interceptors in Angular | Part 7
• Implement JWT token in...
Angular News Application
• Angular 14 News Applic...
Crypto Currency Application
• Angular Project - Cryp...
Angular TODO Application
• TODO Application in An...
Angular 13 CRUD using Material UI
• Angular 13 CRUD with A...
Angular QUIZ Application
• Angular 12 Quiz Applic...
Angular Add-to-cart app
• Add to Cart in Angular...
#Angular #DotNet #SignalR #ChatApplication #WebDevelopment #GroupChat #RealTimeCommunication
To display the notification I will create a new video to demonstrate 😊
if you created that video please put the link to us
Wonderful. You always amaze me with your amazing tutorials
I’m glad you liked it bro ❤️
Lets go❤
Yeah ❤
Hi Sir
I have implemented in angukar 14, everything is fine connection is established, but connection.on method is not triggered
can you help me on this
wonderful work as usual !!!!
Thank you ❤️
Interested
Good Keep it up brother
I will try my best
Cool stuff
Thanks 🙏
Thankyou so much sir ❤❤❤
You’re welcome 😉
Hi, could you make also a video about using Azure Blob Storage (images) in projects done with Angular and .NET? :D
Hi, Love your content. Just a small improvement you can do is zoom in to the the file. The font will be bigger and it will improve our video experince. Thnx.
Sure, thanks for the feedback 🙂
Could you create a tutorial for uploading files in .NET?
Все видео с SignalR только о создании чатов. Неужели нельзя показать примеры другого использования?
Lots of love sir please bring one to oneprivate chat also ❤❤❤
Noted!
Thanks ❤️
i am using web api in dotnet core 6 for angular project.. so can i implement signalR in that web api ?
Yes of course
Bro can you pls create video for connect with assistant agent using asp. Net core with angular
is there a chance we could get the code used in this video? It would really help me follow along. Thanks!
Sure I will update the link in the description
Did everything as the tutorial said but at the part in 50:30 I get this error:
Error: Connection disconnected with error 'Error: Server returned an error on close: Connection closed with an error.'.
I have no real clue how to tackle this issue and where something went wrong. I'm using Angular 17 with .Net 7, could it be because of the Angular version?
You can DM on insta let’s fix it together!
I am using windows for Visual Stuido, Can i use the same source code which you used it above ?
Yes
Hi I am unable to run the application after getting source code, should i install anything npm etc, or could you help me out please ?@@letsprogram30
what should someone do if he doesnt know backend?
I have did it step by step, so you can try to do it by your own. if you are facing any issue during your learning you can connect with me on Instagram will help you with all your doubts
thx@@letsprogram30
Please upload angular with dotnet ecommerce application
Cant we make one to one also?
Yes we can just make sure to add them as separate group with only two connectionIds
I'm currently 1h and 36 sec in the video i came across this error saying
join-room.component.ts:30 Error: Cannot send data if the connection is not in the 'Connected' State.
at HttpConnection.send (HttpConnection.js:90:35)
at _HubConnection._sendMessage (HubConnection.js:296:32)
at _HubConnection._sendWithProtocol (HubConnection.js:307:25)
at HubConnection.js:361:39
at new ZoneAwarePromise (zone.js:1422:21)
at _HubConnection.invoke (HubConnection.js:339:19)
at _ChatService. (chat.service.ts:45:28)
at Generator.next ()
at main.js:18:61
at new ZoneAwarePromise (zone.js:1422:21)
it has something to do with chat.service & join-room
okay actually i took a look at it right and basically its because when I leave the chat it i think makes it go offline and cant be rejoined unless I restart the entire page
i solved the problem by reloading the page when i pressed leave chat just to find out that's what you did at 1:15:46