Angular - WebSocket - Chat Application Example with Bootstrap
HTML-код
- Опубликовано: 7 сен 2024
- In this video we will implement front end for our chat application using Angular and Bootstrap. We will create chat UI which will allow user to read and send messages. After that we will implement Angular service which will comunicate with our server side application using WebSocket. I hope you enjoy and keep playing with code guys!
Code for this video: github.com/cod...
Back-end part video: • Java Spring Boot - Web...
Follow //CodefForgeYT on:
FB: / codeforgeyt
Twitter: / codeforgeyt
GitHub: github.com/cod...
Instagram: / codeforgeyt
Thankyou mann..you saved me in last day of project submission 👍👍
Cool! Glad you like it!
Thank you for a video. I searched for long time websocket implementation tutorial for angular and spring boot, but only this worked for me.
Wow! That is so great. Thank you too for sharing your feedback. Keep coding!
Looks very good, thank you for the easy and clear explanation! 👏👍
Thanks for feedback! Glad you like it! :D
Thanks for the good work with this video. Helped me a lot to undestand some angular concepts!
Very nice to hear that! Keep coding!
clean code well explained
Glad to hear that! Thanks!
hello,
very good Explanation.
I need to know how we connect with ws server in web using real url of the server instead of local host
Very helpfull! Thank you so much
You are welcome!
This video present simple code but very helpful. Thank you @CodeForgeYT !
Glad you like it! Thank you too!
hi im from colombia . it's a great video thanks, i hope you can do more videos about this topics
Hi! Thanks for feedback! You mean regarding front-end applications or specfically web sockets?
@@CodeForgeYT I mean web socktes.
@@ferneycaceres8301 I see. I hope to find some time to create application where only one row of the table can be edited at the same time by one user. I don't have anything prepared yet, but one day it will land on my channel!
@@CodeForgeYT I mean web sockets :D
@@ferneycaceres8301 Yes, app described by me will use web sockets
great explanation. Thanks
I am happy you like it!
please put more videos on this playlist sir 🙏
What you would like to see? :)
i got an error (discussion.component.ts:27 WebSocket connection to 'ws://localhost:8081/SpringMVC/servlet/chat' failed: ) and also if i try 'ws://localhost:8081/chat i don t know why i got this err and why you dont use the broker . need a help
Hey! Check out source code of this video on GitHub! You can find it in the video description. Keep coding!
I had the same Issue. If you have a guard Protection for your routes the us will be blocked by your guard. You have to enable the authorization for your chat route. That should fix the problem.
Hello please, i have do the same tutorial than you, but when i try to excute my code, i have this error : 'Firefox cannot establish a connection with the server at ws: // localhost: 8080 / chat' can you help me please
up
it works well
Awesome! Glad to hear that
Love you, bro
this really helpfull, but how to delete specific message? Thankyou
You will need somet identifier of the message. Rest is almost the same like in the case of sending message itself. You send the id to all clients and just delete the message.
Thanks, what I was looking for in one of my projects.Thanks.
Also, I need help with socket new WebSocket("url"), with jwt token. How to pass jwt token.
I am using spring boot for backend with spring security, and angular each request with JWT token in the header.
now it is failing with an authentication error.
Hi! I don't have any jwt videos in scope right now. Not sure what you wan't to implement, but for me it sounds like you want to pass token in handshake to authenticate. Happy coding!
@@CodeForgeYT yea, on handshake, want to pass jwt token, so it will pass authentication in the backend.
understand it is not in the scope of this video, but can help to suggest any reference. I tried a lot but didn't get any references.
@@Manu-in3zf Well it will be the best to look on the internet or find some tutorial. For sure someone had same need as you. You can also try on stackoverflow. Good luck!
thx
what version of angular is this? did you teach it along or should i learn it separately first
ngRx sir
Getting this error , i had changes to 80 also ,My server port is like 80,443 ,
WebSocket connection to 'ws://localhost:8080/chat' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
Hey! If you have problems with your code please share it on stackoverflow.
RUclips comments section is not that good for troubleshooting specific problems. You can try to rewatch video and make sure you haven't skipped any part. Keep coding!
how can i send a file ?? and how can i add notification like when i recieve a message ??
can i transform this application to one-to -one chat !!!!????
With some extra work, I think so!
@@CodeForgeYT can you give us a tuto about this issue .... i need it so urgent please
in my project im working with css from the beginning
How to add emojis in chat application
I had download your project from github and running but error was getting like that.
Have you installed dependencies?
@@CodeForgeYT No bro, Just i had downloaded and runs it, Please can u share the command for dependecies.??
@@gururaj7250 you need to run "npm install" in the project directory
this sucks 16:49
Error: src/app/services/web-socket.service.ts:9:3 - error TS2564: Property 'webSocket' has no initializer and is not definitely assigned in the constructor.
ok I got it - it should be: [ webSocket!: WebSocket; ]
@@TheEmilunio Good job!
Can u provide the source code please
I have uploaded code on GitHub you can find link in video description! :)
error
Module not found: Error: Can't resolve 'C:/Users/ILYES/Desktop/ESPITA/Gestionequipements/src/app/chat/chat.component.scss?ngResource' in 'C:\Users\ILYES\Desktop\ESPITA\Gestionequipements'
The loader "C:/Users/ILYES/Desktop/ESPITA/Gestionequipements/src/app/chat/chat.component.scss" didn't return a string.
hi! I like this video and I am trying, but I have a question about de "event", because when I send messages to Server Socket, this messages are read like event.data of Websocket.onmessage. This produce a conflic when I am catch the messages in the interface
Hey! Check out the source code. It is available on github and link is in the description. Try to compare it with your code. Hope you will find your solution. Keep coding!
web-socket.service.ts:20 WebSocket connection to 'ws://localhost:8000/chat' failed: can you help me on this
Make sure something is listening on your endpoint