🔥 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 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.
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, 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. 😇
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!!
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
@@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
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?
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?
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 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?
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?
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 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!
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 !
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?
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 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?
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.
🔥 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
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.
We are anticipating a similar example using angular
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?
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 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, 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 @Bouali Ali do the frontend with Angular plz🥺
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!
Thank you Ali for always sharing an interesting content
Thanks for the video. Waiting for one with angular please
Soon
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
Greatest Teacher Of All Times ♥
I really appreciate that ❤
Hello, thank you for your videos. Would be great to see implementation with Angular!
Noted
Thank you Ali for always sharing an interesting content.
My pleasure
Thanks for your awesome work! Your videos actually helped me to solve a coding challenge and get a job offer!
Great to hear!
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!
Would it be appropriate to use a relational db in this project?
yes you can
Looks good I'm waiting for react js example
Soon!
Can you also do the front end with react?
sure
Would it be easy to put the front end part in a separate react project?
yes you can
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!
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
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
great content! i wanna see in action for angular!
Thank you so much I have been waiting for this for so long
Hope you like it!
Superb content... how about replace ui with react
Glad you liked it.
I will provide one for React / Angular
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?
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
Thanks a lot bro! Appreciate it🤝
Happy to help
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 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
You make the comment function have notification like facebook, thank you
Very good explanation my vote for react js
Sure!
What if we dont use docker!? Whats the purpose of it
Can i ask what you would do without docker ?
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 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
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
Awesome! We want to see angular imlementation
Coming soon!
We are anticipating a similar example using angular
Coming next Monday
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?
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?
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.
hello ali a great work from u,
please can we link it with postgresql ?
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.
same here
I love BouAli. I watched Türkiye. Spring Blood ❤
Love from Tunisia
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?
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
do you have the angular application of this please?
will be released next week
Hope the angular implementation will release soon !
I will provide it in the Book Social Network serie
@@BoualiAli Thank you sir...
Thank you man >
hello bro, please provide me your contact number I have to ask some questions.
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 :)
My websocket is not connecting on uat server but on local its working fine.can you help
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
Please,you can create a voice chat(real-time) on the spring?
Can this also work using postgreSQL and React js?
yes
Is it easy to implement Group Chats with this App???
Yes
can you use this in production?
yes with security
Thank you
Thank you so much. 😍😍😍
You're welcome 😊
great content .... need react in FE
Good idea
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 !
How hard would it be to implement this but with MySQL instead of MongoDB?
not hard at all
Not working for me. can anyone guide me this with postman. working cURL or any suggestion for postman.
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
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
thanks you very much sir. i'm interested this projet with angular frontend and pring boot backend database mysql. thanks
Will upload soon
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?
you are my hero🤩
Happy you liked it!
Is it easy to implement this in sql instead of mongodb?
Yes
need this as a microservice so we can use it in multiple platform to create cross platform apps
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
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
using var in java is a cardinal sin
great video tho, thanks for sharing
Cool, thanks
how to increase file uploads
Thank you 🙏
You’re welcome 😊
we are wating this example with react js
Soon!
@@BoualiAli Any updates on react? :) Thanks so much for everything!
great expanation
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
I'm waiting for react front-end
1:48:00
Greet video , Can you make a kahoot clone in angular and spring boot
good idea
thank you
You're welcome
create in react js
Nice🎉
Happy you liked it!
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();
Most of the members are waiting for react js frontend
Sure! Soon
Angular
is anyone can test these apis with postman ?
yes, use websocket instead of using HTTP
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
Banco el video pero que uses mac🤢
I'm already using a Mac
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
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