WebSocket Tutorial with Spring Boot | Build One On One Chat Application

[@BoualiAli]

🔥 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

[@JanNdungu]

Thank you so much for bringing these tutorials closer

[@mohamedtaher3605]

Thank you so much . the frontend with Angular please

[@davidxcode]

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!

[@pablomagnavachi2961]

Hi, i have the same problem, could you solve it?

[@davidxcode]

@@pablomagnavachi2961 No bro, at the time I didn't succeed and then I didn't try anymore.

[@aadiraj6126]

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.

[@vinimaciel]

@@aadiraj6126 Hi, I tried this but now the users dont recieve any messages, have you solved this issue?

[@lilinh9631]

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

[@danielgobina9430]

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. 😇

[@BoualiAli]

Great to hear!

[@Robcuisimplu]

Also I'm interested in the angular's websocket imp. Please do a video

[@vadimmychkov4887]

Thanks for this tutorial! Would be great to see the frontend written on Angular

[@BoualiAli]

Sure, coming soon

[@anisghadhab2863]

​@@BoualiAli we are still waiting for the angular adaptation :D

[@ahmedhassine5837]

@@BoualiAli we are still waiting 😒

[@ubevangrimbergen7553]

@@BoualiAli Still waiting :P

[@goddenmass736]

Thank you very much @Bouali Ali do the frontend with Angular plz🥺

[@redwanemahjoubi7065]

We are anticipating a similar example using angular

[@user.java200]

Thanks a lot bro! Appreciate it🤝

[@cheikhmohamedmamyzeine2402]

Great video! We are eagerly anticipating the Angular implementation.

[@BoualiAli]

soon

[@mohamedtaher3605]

@@BoualiAli Can't wait for the Angular implementation. 🤞

[@AnghamJbeli-jv7ds]

@@BoualiAli hello thank you so much this tutorial is so helpful please we are waiting for the angular implementation

[@LUITEN1]

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!!

[@user-xg5iv6lo2i]

thank you for this special tutorial and we wait for angular or react frontend implementation

[@BoualiAli]

Very soon

[@dennis_benjamin]

Exactly what I am building right. Just on time 😀

[@BoualiAli]

Enjoy!

[@MyEvghenii]

Hello, thank you for your videos. Would be great to see implementation with Angular!

[@BoualiAli]

Noted

[@balticspirit3082]

Thanks for your awesome work! Your videos actually helped me to solve a coding challenge and get a job offer!

[@BoualiAli]

Great to hear!

[@ibrahim-ry6sn]

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❤❤

[@BoualiAli]

Sure, soon

[@vandyun5175]

Thank you Ali for always sharing an interesting content.

[@oussemaayari1460]

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 )

[@BoualiAli]

soon

[@GmrSChannel]

Greatest Teacher Of All Times ♥

[@BoualiAli]

I really appreciate that ❤

[@kevintchato2990]

Thanks for the video. Waiting for one with angular please

[@BoualiAli]

Soon

[@user-iz1ew1im8g]

Amazing course and i just wanna know if you prepare version 2 with angular . I hope, it's already on the way

[@BoualiAli]

Glad you liked it!

[@pawezakrzewski6279]

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!

[@saikumardasari1887]

Looks good I'm waiting for react js example

[@BoualiAli]

Soon!

[@martijnhiemstra]

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.

[@MrBluu-pu2mt]

Great video! I am eagerly waiting for the frontend with Angular!

[@BoualiAli]

Coming soon!

[@marytraore1561]

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

[@BoualiAli]

I will make Frontend with Angular soon if I find enough people interested

[@Mark-he1nr]

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!

[@BoualiAli]

Honestly, not planning to do that for now

[@ManishHarit]

Superb content... how about replace ui with react

[@BoualiAli]

Glad you liked it. I will provide one for React / Angular

[@rohanreddy2067]

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?

[@arindampodder9294]

great content .... need react in FE

[@DeepakSharma-to1xh]

My websocket is not connecting on uat server but on local its working fine.can you help

[@yogenderkoppu915]

Very good explanation my vote for react js

[@BoualiAli]

Sure!

[@jeveuxque3020]

Thank you so much I have been waiting for this for so long

[@BoualiAli]

Hope you like it!

[@143_nimit6]

thanks for this video. Timing of this video is perfect.

[@BoualiAli]

Glad it was helpful!

[@143_nimit6]

@@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

[@mohamedosmanhassona7487]

Thank you Ali for always sharing an interesting content

[@girishanker3796]

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?

[@Yourclassmate]

great expanation

[@legendnic6339]

great content! i wanna see in action for angular!

[@huseyinaydin1002]

I love BouAli. I watched Türkiye. Spring Blood ❤

[@BoualiAli]

Love from Tunisia

[@replicant9611]

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?

[@BoualiAli]

Already planned soon

[@snbwcs]

Looking forward to it !@@BoualiAli

[@JuanR.Guerra]

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?

[@emilbeyerov3278]

Awesome! We want to see angular imlementation

[@BoualiAli]

Coming soon!

[@CemretheFangirl]

mine doesn't show notifications and messages if I don't click to user again even though I coded everything same...

[@nicolasdmartin89]

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.

[@CemretheFangirl]

@@nicolasdmartin89 I realized the path is wrong and after debugging I deleted registry.setUserDestinationPrefix from configureMessageBroker method

[@mubasherusman3943]

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?

[@ukemeelijah6336]

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?

[@don_omar0]

Can you also do the front end with react?

[@BoualiAli]

sure

[@hamzaaissami5102]

hello ali a great work from u, please can we link it with postgresql ?

[@sytien492]

Thank you so much. 😍😍😍

[@BoualiAli]

You're welcome 😊

[@SurajPandey-vi9gr]

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 !

[@tusharrawat8843]

need this as a microservice so we can use it in multiple platform to create cross platform apps

[@3VishalSingh]

Not working for me. can anyone guide me this with postman. working cURL or any suggestion for postman.

[@mona9741]

Would it be easy to put the front end part in a separate react project?

[@BoualiAli]

yes you can

[@mona9741]

Would it be appropriate to use a relational db in this project?

[@BoualiAli]

yes you can

[@fitnessholicmallu3588]

Hope the angular implementation will release soon !

[@BoualiAli]

I will provide it in the Book Social Network serie

[@fitnessholicmallu3588]

@@BoualiAli Thank you sir...

[@AnghamJbeli-jv7ds]

do you have the angular application of this please?

[@ArsenFesiuk]

Please,you can create a voice chat(real-time) on the spring?

[@msh6783]

you are my hero🤩

[@BoualiAli]

Happy you liked it!

[@marcosribeiro2304]

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.

[@BoualiAli]

thanks for sharing

[@vinimaciel]

Hi, what did you change in the controller and subscribe functions?

[@MutantBikers]

Thank you 🙏

[@BoualiAli]

You’re welcome 😊

[@rafaou68]

thanks you very much sir. i'm interested this projet with angular frontend and pring boot backend database mysql. thanks

[@BoualiAli]

Will upload soon

[@peachezprogramming]

using var in java is a cardinal sin great video tho, thanks for sharing

[@BoualiAli]

Cool, thanks

[@appscastle]

doest it have to be no sql? i want to do it in postgres

[@BoualiAli]

It does not. Feel free to implement it with a relational database

[@ezeraphael542]

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?

[@BoualiAli]

I will provide a video for it

[@nelsonjoseanselmo1549]

how to increase file uploads

[@AnvarbekTurdaliyev]

thank you

[@BoualiAli]

You're welcome

[@TrungPham-ol7is]

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!

[@BoualiAli]

just call the method But do you need that?

[@TrungPham-ol7is]

@@BoualiAli I figured it out, btw thanks a lot

[@edwardhanson8039]

Can you implement it using a relational database?

[@BoualiAli]

It should be the same, just moving from nosql to sql db. I did that many times in different videos

[@ethanhamilton4494]

Is it easy to implement Group Chats with this App???

[@BoualiAli]

Yes

[@kedilervekuslar8791]

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!

[@BoualiAli]

I already published many security video using spring boot. Check them out

[@mona9741]

I'm waiting for react front-end

[@danielc.6644]

How hard would it be to implement this but with MySQL instead of MongoDB?

[@BoualiAli]

not hard at all

[@ganszkyb]

Do you plan a sub-version with sessionConnect/Disconnect/Subscribe to manage the logon/logoff users?

[@BoualiAli]

I already did it in the other Websocket video. The link is in the desccription

[@ganszkyb]

@@BoualiAlisorry I missed :)

[@master-le5cd]

Can this also work using postgreSQL and React js?

[@BoualiAli]

yes

[@faisalaleissa2012]

Greet video , Can you make a kahoot clone in angular and spring boot

[@BoualiAli]

good idea

[@softdev8229]

Nice🎉

[@BoualiAli]

Happy you liked it!

[@sachinmishra3301]

create in react js

[@pradeepnampally7809]

we are wating this example with react js

[@BoualiAli]

Soon!

[@bbcszone1]

@@BoualiAli Any updates on react? :) Thanks so much for everything!

[@akhicj9071]

Hi, I have a problem whenever I reload my page It will come to the starting page

[@BoualiAli]

the state needs to be handled because refreshing the page will re-initialize everything

[@saravanasaro9231]

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?

[@ukemeelijah6336]

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

[@axelrod-_-]

1:48:00

[@tenorio295]

Is it easy to implement this in sql instead of mongodb?

[@BoualiAli]

Yes

[@mona9741]

in this tutorial, can i message users that are not online at this time?

[@BoualiAli]

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

[@mona9741]

@@BoualiAli thank you, great video

[@valentineejakpomewhe4352]

can you use this in production?

[@BoualiAli]

yes with security

[@valentineejakpomewhe4352]

Thank you

[@saikumardasari4220]

Most of the members are waiting for react js frontend

[@BoualiAli]

Sure! Soon

[@rayoh7201]

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

[@slai2389]

Did you add this one correctly? let connectedUsers = await connectedUsersResponse.json();

[@ysacpebes1462]

Angular pls 🙏

[@BoualiAli]

soon

[@hkkabir2024]

wihtout security it's nothing

[@BoualiAli]

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

[@hkkabir2024]

@@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

[@quocdungdo321]

is anyone can test these apis with postman ?

[@BoualiAli]

yes, use websocket instead of using HTTP

[@suragaryen3578]

I'm lost,,, MySQL ver PLS 🥺🥺🥺🥺

[@franmoyano6224]

Banco el video pero que uses mac🤢

[@BoualiAli]

I'm already using a Mac

[@TikTokTrendsCompilation]

Why not use kafka for chatting.... A perfect example for a real world project to teach kafka better and you waste this chance

[@BoualiAli]

Kafka is coming next week

[@atomichub5049]

Speak Louder + Correct your Pronunciation

[@keremkarademir6101]

It was pretty understandable for most of us.

[@BoualiAli]

I providing technical content not english course

[@kazumasaytor6021]

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]

Bro.. I have the same issue ... could you solve it?

[@OnlyTrueBob]

@@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.

[@maxmmaxm1591]

@@sebastiane.r.4195++

[@aadiraj6126]

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.

[@sebastiane.r.4195]

Thanks bro

[@Multi159632478]

The Video lacks explanation. Seems as if you are just reading texts on teleprompter.

[@BoualiAli]

I mentioned that for better understanding for websocket, go and watch the previous one which is in the same playlist as this video. Enjoy

[@girishanker3796]

​@@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.

[@samarthporwal656]

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 Angular frontend independent from the backend?

[@BoualiAli]

I will create one soon

[@samarthporwal656]

also i am unable to sign in to localhost:8081 @@BoualiAli

[@samarthporwal656]

what username and password to give there

[@BoualiAli]

@@samarthporwal656 there is no password

[@samarthporwal656]

It is showing me a alert sort of popup to sign in when i go to localhost:8081 to add username and password@@BoualiAli