🔥 Secure your spot now and embark on your journey to becoming a Spring Boot master! Use promo code "EARLY_BIRD_30" during registration to enjoy this incredible 30% discount. Don't miss out on this opportunity! 🔥 Course link: aliboucoding.com/p/spring-boot-in-depth?coupon_code=EARLY_BIRD_30&product_id=4985811
I'd love to follow the Angular tutorial for this! Thank you! Also, next time, can you explain a little more about stomp, broker and stuff... I a newbie to WS and I don't really understand that
Thank you very much, I've always wanted to create websockets in some of my applications without success. I'm really happy to have seen this video and I'm learning a lot by following your courses. I'm interested in an Angular websocket implementation. 😇
Thank you very much for the clear explanation !! I'm looking forward for the Angular Implementation (meanwhile I'll make an attempt on my own after learning Angular from your tutorials )
Thank you very much for this amazing demo. I only have one observation, every time a user connects you can see in the spring log the message "WebSocketAnnotationMethodMessageHandler : Unhandled exception from message handler method" Caused by: java.lang.IllegalArgumentException: Expected destination pattern "/user/{userId }/**". I don't know if it's something from the front or the back but I'm going to check it out. However the application works. Thanks Ali!
In your WebSocketConfig.java class at line number 24, Alibou forget to add complete path. Remove this line=> registry.setUserDestinationPrefix("/user"); Add this line=> registry.setUserDestinationPrefix("/user/{userId}/**"); And now you won't get any error. Program executes and output comes smoothly too.
In min 32 you retrieve a Optional of class user and there is no point in throwing null if its empty. In if statement that follows in my opinion it should be isPresentCheck because current implementation is prone to null pointer exception and does not use the advantages of Optional. But anyways a great tutorial. Currently going through it with my chat app project. Thanks!
Hi Ali! I want to thank you for this content!!! It brings up a lot of insight and cool tips that are helping me, all the little details like breaking lines or getting back and forth between the modules explained really sets your content appart.Keep up the good work!! I'll be happily waiting for the angular or react implementation, mainly because of the curiosity of your code design approach!!
@@BoualiAli i just want to share this thing with you sir. i am creating an Instagram's clone in vue.js as front end spring-boot as backend and i was stuck around building chat function.Your previous video was very help-full but this one is soo amazing i never worked with websocket but your explanation was sufficient for me thank you
Thank you Bouali！I learn a lot from your video! I am just curious that if there is group chat video later, so that I can create multiple groups and keep the message in their own group channel, I will explore by myself first, but really looking forward to seeing your next video! Really appreciate your working!
Thank you very much, WebSocket chats in applications interest me a lot, however it is possible that you make a video in which a project done in nestjs for the backend, angular for the frontend and MongoDb for the database. THANKS
Its one of the best video and highly appreciated the efforts you put .can you make a full stack real world application type following react with springboot using all industry best practices with advanced Libraries?
Thanks for the tutorial. Just some points that aren't needed. You don't have to register the default message converter. All json messages are converted to and from objects, just like in @RestController with requestbody, without any configuration. Also the @payload annotation is not needed.
I'm new so I don't know much. I have a stupid question: I'm implementing jwt security for http api. And the websocket part, if I make the chatapp function like in the video tutorial, will it be safe? Do I need jwt for it? it, if so, what else do I need? thank you bouali for many instructions
Hi friend, thank you very much for share your knowledge with us! I have a question here. When you say you organize the app by domain, does it mean that you are applying DDD?
This is good for initial leraning concepts, But How this Queue bases architecture scale when we have millions of users ? Will we create queue for each user?
Hey i downloaded your source code and did mvnw clean install. Now it says 'Build Success', but it doesn't run in my browser. How should i do that ? I want to show this project in my school. I don't have a mongodb, i have a mysql !
I tried to use MYSQL for it but I am getting this error when I tried to make a chat "ChatMessage' must be manually assigned before calling 'persist()',". This error is actually from the ChatMessage Entity. please how can I resolve it?
Hi, thank you for this tutorial! I have a question. You currently do it in a "monolithic" style by serving html from the server. How would you do it in REST API style? Like when you have React frontend independent from the backend?
Anyone getting an error while doing connection using stompClient? Failed to load resource: the server responded with a status of 404 Whoops! Lost connection to the server. Any fix for this?
Hi! Thanks for this wonderful guide, now i have spring security configured in my application and i am using JWT authentication (bearer token). and because of this, i am getting a 404. how do i fix this?
Hi Bouali, Thanks for the tutorial, I am just wondering if there is a way to work around the exception message indicating an IllegalArgumentException caused by an expected destination pattern of "/user/{userId}/**". I tried a few things but it didn't work. edit: To fix it I had to add another prefix registry.enableSimpleBroker("/user", "/topic"); and change the javascript subscribe and UserController, not sure if this would be the best approach tho.
Excuse me ! How can you call the GetMapping inside the same controller with MessageMapping I have tried several times but it not working, and how can you display user login logout real-time, hope you'll answer. Thanks!
Hello, can we implement the Spring security to this app? Is it hard? I really need to make an authenticated users and provide secure messaging chat app. Thank You!
Sir, I am using a MySQL database. The chat application runs successfully, but it have not create a table in the database.The database connection is correct; I am using the application.properties file.The UI page displays a successful login page, but the input box is not showing. What could be the problem, sir?
I am having similar issue, though mine created the table successfully but when I tried to send a message to another user, the thing returns back to the login page with this error that says websocket.chat.entities.room.ChatRoom' must be manually assigned before calling 'persist()'. I don't know how to resolve it. I am using MYSQL also
hello ali I am currently clone coding your chatapp, but my mongodb can't get nickname and real name, and server error 500 shows up, saying Uncaught (in promise) TypeError: connectedUsers.filter is not a function at findAndDisplayConnectedUsers (main.js:50:37) what should I do? and thx for the video
there tons of security videos in my channel. Follow carefully and you will be able to implement it yourself. Otherwise wait for the coming videos and you will get your answer
@@BoualiAli secure websocket though microservice . is that possible ? i am facing CORS error and it's quite impossible for me to sort it out no information over internet even nothign i can found into spring documentation too
Hello, please, help me, When starting a project Caused by: java.lang.IllegalArgumentException: Expected destination pattern "/user/{userId}/**" And org.springframework.messaging.MessageDeliveryException: Failed to handle GenericMessage [payload=byte[58], The project is completely copied
@@sebastiane.r.4195 Hey Guys, I think I have this one figured out. I ran into it as well. (Someone correct me if I am wrong) So the reason this seems to be happening is because in the WebsocketConfig.java we are doing this: registry.enableSimpleBroker("/user"); Now it seems like Spring Boot expects specific destination patterns by default, so since we only registered the one endpoint and the one we used happened to use was "/users". When we try to hit the controller endpoint "/user.addUser" from the client we are point to @SendTo("/user/public") as the endpoint to send to. And SpringBoot sees this and thinks. Um... that doesn't look right, the endpoints going to "/user" should look like this: "/user/{userId}/**" To fix this error from popping up, i just created a new endpoint for the non-user specific public broadcast endpoints. So In the config i replaced the original with this: registry.enableSimpleBroker("/chatbroadcast","/user"); now we have two broker endpoints, and we can use the new endpoint name instead of /user when calling the @sendto in the controller. like this: @MessageMapping("/user.addUser") @SendTo("/chatbroadcast/public") public User addUser(@Payload User user){ userService.saveUser(user); return user; } @MessageMapping("/user.disconnectUser") @SendTo("/chatbroadcast/public") public User disconnectUser(@Payload User user){ userService.disconnect(user); return user; } And dont forget you have to change this in the main.js also function onConnected() { stompClient.subscribe(`/user/${nickname}/queue/messages`, onMessageReceived); stompClient.subscribe(`/chatbroadcast/public`, onMessageReceived); ---- I Modified this from "/user" to "/chatbroadcast" Also, i just called it chatbroadcast, because i needed to call it something. The name doesnt matter.(well, unless i picked a name that also happened to be some kind of default, lol) Hope this helps, it fixed it for me.
In your WebSocketConfig.java class at line number 24, Alibou forget to add complete path. Remove this line=> registry.setUserDestinationPrefix("/user"); Add this line=> registry.setUserDestinationPrefix("/user/{userId}/**"); And now you won't get any error. Program executes and output comes smoothly too.
@@BoualiAliHere after going through your previous video. I must say that both of your videos lack explanation. You are mostly reading the code you are going to write. You are not explaining why you are doing these things in the first place. It's like you have some other window opened with the full code and you are just copying and writing into this project. Please try to explain more in detail for the next upcoming React.js front end video with Web socket. Looking forward to it sir.
🔥 Secure your spot now and embark on your journey to becoming a Spring Boot master! Use promo code "EARLY_BIRD_30" during registration to enjoy this incredible 30% discount. Don't miss out on this opportunity! 🔥
Course link: aliboucoding.com/p/spring-boot-in-depth?coupon_code=EARLY_BIRD_30&product_id=4985811
Thank you so much for bringing these tutorials closer
Thank you so much . the frontend with Angular please
I'd love to follow the Angular tutorial for this! Thank you! Also, next time, can you explain a little more about stomp, broker and stuff... I a newbie to WS and I don't really understand that
We are anticipating a similar example using angular
Thank you very much @Bouali Ali do the frontend with Angular plz🥺
Great video! We are eagerly anticipating the Angular implementation.
soon
@@BoualiAli Can't wait for the Angular implementation. 🤞
@@BoualiAli hello thank you so much this tutorial is so helpful please we are waiting for the angular implementation
@@AnghamJbeli-jv7ds hello bro, please provide me your contact number I have to ask some questions.
Thanks for this tutorial! Would be great to see the frontend written on Angular
Sure, coming soon
@@BoualiAli we are still waiting for the angular adaptation :D
@@BoualiAli we are still waiting 😒
@@BoualiAli Still waiting :P
hello bro, please provide me your contact number I have to ask some questions.
Thank you very much, I've always wanted to create websockets in some of my applications without success. I'm really happy to have seen this video and I'm learning a lot by following your courses. I'm interested in an Angular websocket implementation. 😇
Great to hear!
Also I'm interested in the angular's websocket imp. Please do a video
Thank you very much for the clear explanation !! I'm looking forward for the Angular Implementation (meanwhile I'll make an attempt on my own after learning Angular from your tutorials )
soon
Thank you very much for this amazing demo. I only have one observation, every time a user connects you can see in the spring log the message "WebSocketAnnotationMethodMessageHandler : Unhandled exception from message handler method" Caused by: java.lang.IllegalArgumentException: Expected destination pattern "/user/{userId }/**". I don't know if it's something from the front or the back but I'm going to check it out. However the application works. Thanks Ali!
Hi, i have the same problem, could you solve it?
@@pablomagnavachi2961 No bro, at the time I didn't succeed and then I didn't try anymore.
In your WebSocketConfig.java class at line number 24, Alibou forget to add complete path.
Remove this line=>
registry.setUserDestinationPrefix("/user");
Add this line=>
registry.setUserDestinationPrefix("/user/{userId}/**");
And now you won't get any error. Program executes and output comes smoothly too.
@@aadiraj6126 Hi, I tried this but now the users dont recieve any messages, have you solved this issue?
Greatest Teacher Of All Times ♥
I really appreciate that ❤
thank you for this special tutorial and we wait for angular or react frontend implementation
Very soon
Great explanantion! Thank you!
In min 32 you retrieve a Optional of class user and there is no point in throwing null if its empty. In if statement that follows in my opinion it should be isPresentCheck because current implementation is prone to null pointer exception and does not use the advantages of Optional. But anyways a great tutorial. Currently going through it with my chat app project. Thanks!
You make the comment function have notification like facebook, thank you
Hi Ali! I want to thank you for this content!!! It brings up a lot of insight and cool tips that are helping me, all the little details like breaking lines or getting back and forth between the modules explained really sets your content appart.Keep up the good work!!
I'll be happily waiting for the angular or react implementation, mainly because of the curiosity of your code design approach!!
Coming next week
Thanks for your awesome work! Your videos actually helped me to solve a coding challenge and get a job offer!
Great to hear!
Hello, thank you for your videos. Would be great to see implementation with Angular!
Noted
Thanks for the video. Waiting for one with angular please
Soon
Thank you Ali for always sharing an interesting content
We need a full new course of angular 17 and whats new and what is ssr added lately in angular sir ??❤❤thank you by the way yaychaaak❤❤
Sure, soon
Thank you Ali for always sharing an interesting content.
My pleasure
Looks good I'm waiting for react js example
Soon!
Exactly what I am building right. Just on time 😀
Enjoy!
hello bro, please provide me your contact number I have to ask some questions.
Great video! I am eagerly waiting for the frontend with Angular!
Coming soon!
Amazing course and i just wanna know if you prepare version 2 with angular . I hope, it's already on the way
Glad you liked it!
Thank you so much I have been waiting for this for so long
Hope you like it!
thanks for this video. Timing of this video is perfect.
Glad it was helpful!
@@BoualiAli i just want to share this thing with you sir. i am creating an Instagram's clone in vue.js as front end spring-boot as backend and i was stuck around building chat function.Your previous video was very help-full but this one is soo amazing i never worked with websocket but your explanation was sufficient for me
thank you
I love BouAli. I watched Türkiye. Spring Blood ❤
Love from Tunisia
Thank you Bouali！I learn a lot from your video! I am just curious that if there is group chat video later, so that I can create multiple groups and keep the message in their own group channel, I will explore by myself first, but really looking forward to seeing your next video! Really appreciate your working!
Honestly, not planning to do that for now
Thanks a lot bro! Appreciate it🤝
Happy to help
Very good explanation my vote for react js
Sure!
We are anticipating a similar example using angular
Coming next Monday
Superb content... how about replace ui with react
Glad you liked it.
I will provide one for React / Angular
great content! i wanna see in action for angular!
Thank you very much, WebSocket chats in applications interest me a lot, however it is possible that you make a video in which a project done in nestjs for the backend, angular for the frontend and MongoDb for the database. THANKS
I will make Frontend with Angular soon if I find enough people interested
Its one of the best video and highly appreciated the efforts you put .can you make a full stack real world application type following react with springboot using all industry best practices with advanced Libraries?
Awesome! We want to see angular imlementation
Coming soon!
Thanks for the tutorial. Just some points that aren't needed. You don't have to register the default message converter. All json messages are converted to and from objects, just like in @RestController with requestbody, without any configuration. Also the @payload annotation is not needed.
Thank you man >
hello bro, please provide me your contact number I have to ask some questions.
I'm new so I don't know much. I have a stupid question: I'm implementing jwt security for http api. And the websocket part, if I make the chatapp function like in the video tutorial, will it be safe? Do I need jwt for it? it, if so, what else do I need?
thank you bouali for many instructions
Hi friend, thank you very much for share your knowledge with us!
I have a question here. When you say you organize the app by domain, does it mean that you are applying DDD?
Hope the angular implementation will release soon !
I will provide it in the Book Social Network serie
@@BoualiAli Thank you sir...
Thank you so much. 😍😍😍
You're welcome 😊
using var in java is a cardinal sin
great video tho, thanks for sharing
Cool, thanks
This is good for initial leraning concepts, But How this Queue bases architecture scale when we have millions of users ? Will we create queue for each user?
need this as a microservice so we can use it in multiple platform to create cross platform apps
you are my hero🤩
Happy you liked it!
hello ali a great work from u,
please can we link it with postgresql ?
Hey i downloaded your source code and did mvnw clean install. Now it says 'Build Success', but it doesn't run in my browser. How should i do that ? I want to show this project in my school. I don't have a mongodb, i have a mysql !
I tried to use MYSQL for it but I am getting this error when I tried to make a chat "ChatMessage' must be manually assigned before calling 'persist()',". This error is actually from the ChatMessage Entity. please how can I resolve it?
Please,you can create a voice chat(real-time) on the spring?
Hi, thank you for this tutorial! I have a question. You currently do it in a "monolithic" style by serving html from the server.
How would you do it in REST API style? Like when you have React frontend independent from the backend?
Already planned soon
Looking forward to it !@@BoualiAli
great content .... need react in FE
Good idea
great expanation
Can you also do the front end with react?
sure
Thank you 🙏
You’re welcome 😊
My websocket is not connecting on uat server but on local its working fine.can you help
Can i ask what you would do without docker ?
Anyone getting an error while doing connection using stompClient?
Failed to load resource: the server responded with a status of 404
Whoops! Lost connection to the server.
Any fix for this?
hello bro, please provide me your contact number I have to ask some questions.
Would it be easy to put the front end part in a separate react project?
yes you can
mine doesn't show notifications and messages if I don't click to user again even though I coded everything same...
I have the same problem, if you find the solution please let me know. If I find the error I'll let you know here.
@@nicolasdmartin89 I realized the path is wrong and after debugging I deleted registry.setUserDestinationPrefix from configureMessageBroker method
@@CemretheFangirl could you give your Repo GutHub link.
I'm waiting for react front-end
Would it be appropriate to use a relational db in this project?
yes you can
Not working for me. can anyone guide me this with postman. working cURL or any suggestion for postman.
thank you
You're welcome
thanks you very much sir. i'm interested this projet with angular frontend and pring boot backend database mysql. thanks
Will upload soon
Hi! Thanks for this wonderful guide, now i have spring security configured in my application and i am using JWT authentication (bearer token). and because of this, i am getting a 404. how do i fix this?
I will provide a video for it
Hi Bouali,
Thanks for the tutorial, I am just wondering if there is a way to work around the exception message indicating an IllegalArgumentException caused by an expected destination pattern of "/user/{userId}/**".
I tried a few things but it didn't work.
edit: To fix it I had to add another prefix registry.enableSimpleBroker("/user", "/topic"); and change the javascript subscribe and UserController, not sure if this would be the best approach tho.
thanks for sharing
Hi, what did you change in the controller and subscribe functions?
we are wating this example with react js
Soon!
@@BoualiAli Any updates on react? :) Thanks so much for everything!
Greet video , Can you make a kahoot clone in angular and spring boot
good idea
doest it have to be no sql? i want to do it in postgres
It does not.
Feel free to implement it with a relational database
Excuse me ! How can you call the GetMapping inside the same controller with MessageMapping I have tried several times but it not working, and how can you display user login logout real-time, hope you'll answer. Thanks!
just call the method
But do you need that?
@@BoualiAli I figured it out, btw thanks a lot
Hello, can we implement the Spring security to this app? Is it hard? I really need to make an authenticated users and provide secure messaging chat app. Thank You!
I already published many security video using spring boot. Check them out
Nice🎉
Happy you liked it!
Do you plan a sub-version with sessionConnect/Disconnect/Subscribe to manage the logon/logoff users?
I already did it in the other Websocket video.
The link is in the desccription
@@BoualiAlisorry I missed :)
do you have the angular application of this please?
will be released next week
How hard would it be to implement this but with MySQL instead of MongoDB?
not hard at all
Hi, I have a problem whenever I reload my page It will come to the starting page
the state needs to be handled because refreshing the page will re-initialize everything
Can you implement it using a relational database?
It should be the same, just moving from nosql to sql db.
I did that many times in different videos
Can this also work using postgreSQL and React js?
yes
how to increase file uploads
Sir, I am using a MySQL database. The chat application runs successfully, but it have not create a table in the database.The database connection is correct; I am using the application.properties file.The UI page displays a successful login page, but the input box is not showing. What could be the problem, sir?
I am having similar issue, though mine created the table successfully but when I tried to send a message to another user, the thing returns back to the login page with this error that says websocket.chat.entities.room.ChatRoom' must be manually assigned before calling 'persist()'. I don't know how to resolve it. I am using MYSQL also
Is it easy to implement Group Chats with this App???
Yes
1:48:00
Is it easy to implement this in sql instead of mongodb?
Yes
in this tutorial, can i message users that are not online at this time?
You can adjust the method that return the users list and get all the users (online and offline) and you will be able to send messages
@@BoualiAli thank you, great video
Angular
create in react js
can you use this in production?
yes with security
Thank you
Most of the members are waiting for react js frontend
Sure! Soon
Angular pls 🙏
soon
hello ali I am currently clone coding your chatapp, but my mongodb can't get nickname and real name, and server error 500 shows up, saying
Uncaught (in promise) TypeError: connectedUsers.filter is not a function
at findAndDisplayConnectedUsers (main.js:50:37)
what should I do? and thx for the video
Did you add this one correctly?
let connectedUsers = await connectedUsersResponse.json();
wihtout security it's nothing
there tons of security videos in my channel.
Follow carefully and you will be able to implement it yourself. Otherwise wait for the coming videos and you will get your answer
@@BoualiAli secure websocket though microservice . is that possible ? i am facing CORS error and it's quite impossible for me to sort it out no information over internet even nothign i can found into spring documentation too
is anyone can test these apis with postman ?
yes, use websocket instead of using HTTP
Why not use kafka for chatting.... A perfect example for a real world project to teach kafka better and you waste this chance
Kafka is coming next week
Banco el video pero que uses mac🤢
I'm already using a Mac
I'm lost,,, MySQL ver PLS 🥺🥺🥺🥺
Speak Louder + Correct your Pronunciation
It was pretty understandable for most of us.
I providing technical content not english course
Hello, please, help me, When starting a project Caused by: java.lang.IllegalArgumentException: Expected destination pattern "/user/{userId}/**"
And
org.springframework.messaging.MessageDeliveryException: Failed to handle GenericMessage [payload=byte[58],
The project is completely copied
Bro.. I have the same issue ... could you solve it?
@@sebastiane.r.4195
Hey Guys, I think I have this one figured out. I ran into it as well. (Someone correct me if I am wrong)
So the reason this seems to be happening is because in the WebsocketConfig.java we are doing this:
registry.enableSimpleBroker("/user"); Now it seems like Spring Boot expects specific destination patterns by default, so since we only registered the one endpoint and the one we used happened to use was "/users". When we try to hit the controller endpoint "/user.addUser" from the client we are point to @SendTo("/user/public") as the endpoint to send to. And SpringBoot sees this and thinks. Um... that doesn't look right, the endpoints going to "/user" should look like this: "/user/{userId}/**"
To fix this error from popping up, i just created a new endpoint for the non-user specific public broadcast endpoints. So In the config i replaced the original with this:
registry.enableSimpleBroker("/chatbroadcast","/user"); now we have two broker endpoints,
and we can use the new endpoint name instead of /user when calling the @sendto in the controller. like this:
@MessageMapping("/user.addUser")
@SendTo("/chatbroadcast/public")
public User addUser(@Payload User user){
userService.saveUser(user);
return user;
}
@MessageMapping("/user.disconnectUser")
@SendTo("/chatbroadcast/public")
public User disconnectUser(@Payload User user){
userService.disconnect(user);
return user;
}
And dont forget you have to change this in the main.js also
function onConnected() {
stompClient.subscribe(`/user/${nickname}/queue/messages`, onMessageReceived);
stompClient.subscribe(`/chatbroadcast/public`, onMessageReceived); ---- I Modified this from "/user" to "/chatbroadcast"
Also, i just called it chatbroadcast, because i needed to call it something. The name doesnt matter.(well, unless i picked a name that also happened to be some kind of default, lol)
Hope this helps, it fixed it for me.
@@sebastiane.r.4195++
In your WebSocketConfig.java class at line number 24, Alibou forget to add complete path.
Remove this line=>
registry.setUserDestinationPrefix("/user");
Add this line=>
registry.setUserDestinationPrefix("/user/{userId}/**");
And now you won't get any error. Program executes and output comes smoothly too.
Thanks bro
The Video lacks explanation. Seems as if you are just reading texts on teleprompter.
I mentioned that for better understanding for websocket, go and watch the previous one which is in the same playlist as this video.
Enjoy
@@BoualiAliHere after going through your previous video. I must say that both of your videos lack explanation. You are mostly reading the code you are going to write. You are not explaining why you are doing these things in the first place. It's like you have some other window opened with the full code and you are just copying and writing into this project. Please try to explain more in detail for the next upcoming React.js front end video with Web socket. Looking forward to it sir.