Spring Boot WebSocket: Chat Example

Writing a simple messaging system using Spring Boot, WebSocket, STOMP, StompJS, SockJS libraries.
In this video • Web socket chat with s...
we created a simple chat using the above-mentioned technologies. This time we complicated our code a little bit:)
Link to github: github.com/caligula95/spring-...

[@chriseteka]

Hi, Nice tutorial, I have been looking out for this, am glad someone finally did it. Looking forward to more videos from you.

[@chriseteka]

...I was able to implement websocket to a project i was working on after seeing this today, although i went a little futher to add auth by intercepting every incoming request and handing them over to another class, I had confusions during implementation and this video cleared it all. Thanks man, am grateful.

[@scooljoluwajuwonlo8300]

@@chriseteka please how do you go about auth? i need this to work on a project. you can reach me on [e-mail] thanks

[@4l35]

Amazing tutorial! thank you very much for share your work

[@GROOVETECHSETS]

Really apreciate it! Thank you for the tutorial :)

That’s very helpful! Thank you very much

[@hoangtuan4592]

Thanks for your Tutor, That's exactly what I need

[@sc5shout]

Why getMapping, instead of post, is used to add a new user?

[@shalsteven]

If you are using Spring Boot 2.4 don't forget to change this: registry.addEndpoint("/chat").setAllowedOriginPatterns("*").withSockJS();

[@gafarolanipekun1202]

change to what?

[@rashedaakter5093]

Thank you so much.

[@kassymbekoff]

Thank you very much )

how to specific user ? and error throing " No 'defaultDestination' configured"

[@javohirquziboyev1120]

very good bro. its great

[@xavieromondi2153]

will it still wotk if you host the site and are not using localhost anymore?

[@slovpunk208]

Спасибо вам, видео помогло! И английский очень доступный. Успехов!

[@Javamaster-tutorials]

Спасибо!

[@ashkanzanjani6444]

Hi , Thank you So much for this great tutorial

[@Javamaster-tutorials]

Welcome 😊

[@guillexd2128]

Nice video! But i have a problem and i dont know why, when i have everything working and i try to send the message y replies back with the error: "Cannot read properties of undefined (reading 'send')". Why could it be? I'm sure i got everything as you did

[@akshaymohite5144]

Whoops! Lost connection to localhost:8080/personalChat getting error on sendMsg

[@jean-baptistedioli1692]

Hello Thanks for the teaching. Do you have also, the "same teaching" but for a specific user in a secure mode ?

[@Javamaster-tutorials]

Hi. Thanks. Not yet. Maybe in future

[@antoniohenriquedev]

good job!

[@seyhaseng1077]

Hi everyone! Do we need internet to use this chat app?

[@mpingale]

How to implement read recipient of message in websocket from UI to server. so that user can see when the particular message read by another user like in whatsApp or Teams. Please respond :(

[@arpitgoel9959]

Hi great tutorial, but if I use same code in angular , while registration I'm getting subscribe error. Please help

[@angiyaz7491]

if i want to send photo message how i can do ?

[@HYR0720]

how can you get the page address to test ?

[@bidhyasapkota2234]

my code is not wrong but when it run its show half only not properly work

[@mini_developer]

hello can you teach how to use netty socketio?

[@smorcich3443]

чел, большое спасибо за уроки

[@volodymyrrozdolsky1008]

Hi, Can you please share how you got SimpMessagingTemplate to work? it's giving me error Bean not found. Parameter 0 of constructor in com.example.chatexample.controller.MessageController required a bean of type 'org.springframework.messaging.simp.SimpMessagingTemplate' that could not be found. i have same spring boot version?

[@Javamaster-tutorials]

Hi. Did you add @Autowired annotation? Take a look at the source code. Maybe you missed something

[@ayushkumarsingh2985]

hey javamaster, this tutorial is great, but I am getting -' Invalid SockJS path '/ayush/info' - required to have 3 path segments ' error, and in console it says - ' Whoops! Lost connection to localhost:8080/chat/ayush ', please help if you can

[@Javamaster-tutorials]

Hi. Please check the sock path configuration in the WebSocketConfig file.

[@raniabouzid321]

when I try to do this(43:55) i get this error : xhr.send( ( options.hasContent && options.data ) || null ); can you please help me

[@Javamaster-tutorials]

The error can be because you haven't initialized data. Please, refer to code source and check once again you code and code on github: github.com/caligula95/spring-websocket-chat

[@miriansouza2548]

thank you very much, you just helped me to, probably finish college with this video !!!

[@aahadqureshi2183]

heyy im getting white label error can u help me sort out this

[@himanshu901109]

how to run UI application i.e front end chat window

[@trygoboi4790]

How did you map your application to the url localhost:63342/web-socket-project/frontend/index.html? Because inside you code I couldn’t find this url. Just localhost:8080

[@Javamaster-tutorials]

I have my backend and frontend separately. localhost:63342 - its just my inteliji idea created server to run my frontend. You can just open you index.html file in browser on your computer without any additional servers and other stuff. it maps with localhost:8080 inside the js file.

[@trygoboi4790]

@@Javamaster-tutorials but can we map it to another url? I mean like localhost:8080/chat or something like this? And if we can, please say me how to do this

[@Javamaster-tutorials]

put you index.html under resources folder of your application. make sure you have thymeleaf dependency. and then by default when you navigate to localhost:8080/ it will open your index.html page.

[@trygoboi4790]

@@Javamaster-tutorials thank you very much. I already investigate that index.html is opened by default. and if I want this html page be opened only on exactly url, not dafeult, I just need to give another name to this html file and then return it from the controller on necessary mapping.

[@youssefennaciri7932]

@@trygoboi4790 can you show me how actually i'm really stuck

[@mohammedjoubba318]

thank you

[@shrik2306]

HI, how send message working. whenever I click on send message button, no activity is performed. no event or action is getting called in index.html

[@Javamaster-tutorials]

Please, take a look at custom.js. It has a button even listener which triggers send message click

[@chamansos7895]

nice, how can implement a server for websocket with apache xamp?

[@Javamaster-tutorials]

Hi. I guess you should use some PHP approach for this implementation. Java applications can't be started with apache xamp.

[@harshavardhan-kv6wm]

I tried the code but it shows a white label error while running on local host.can you help me solve this problem as soon as possible.

[@Javamaster-tutorials]

You don't have a localhost:8080 mapping in your application. In this tutorial you have backend and frontend separately. If you want your application open some welcome or main page by default, you need to add thymeleaf dependency and put your index.html under resources/static folder. You can check this video as an example: kzbin.info/www/bejne/bZzVlqClqc-tmq8

[@luckyratnawat3755]

Good Job, Master. How do you propose to hide the previous conversation when the logged in user selects a new user to send a message?

[@Javamaster-tutorials]

Hi. It's no so easy to do but possible. For this purpose you can store all conversations in map. Key of your map is user id and value is list of messages. Then you can check if user clicks on user id which is already in map you display messages which are in value. If not then you put a new user id to the map. It's one of the possible solutions.

[@abdimalikovdoniyor2844]

@@Javamaster-tutorials hello sir. I am junior java backend developer. this is good content

[@techavidususer4058]

How to implement this chat system into spring boot as rest API. because we are using fronted as reactjs that's why we need to API. and how to test that API from swagger UI or postman ?

[@Javamaster-tutorials]

websocked is not the same as REST api. It's different approaches between the network communication. If you need a chat but with reactjs it's easy to enable websockets on reactjs. as reactjs is just a framework of javascript. just google reactjs websocket and I guess you can find a solution.

[@w1d3r75]

I have not started yet but it looks really nice. Can I do this project in eclipse editor?

[@Javamaster-tutorials]

Sure, you can do it) The editor you choose doesn't matter. kzbin.info/www/bejne/ZqLZhWZ7qs-djdk this video according chat I made using eclipse

[@mylaptop4582]

Hello sir ! Thanks for your clear tutorial, it has helped me a lot. Now in my project, I want to implement websocket security. Would you please give me some light on this?

[@alittley2hard]

Spring security is very good

[@ahmadalghali90]

i dont understand why there so many tutorials on nodjs and javascript but java lacks in tutorials... quite sad

[@hosu1034]

Great video, i want more content like it. Finally i understand a websocket. Can you make a film about rabbitmq?

[@Javamaster-tutorials]

Possibly!

[@adrianharmann2955]

Hey mate, that is some great content! will help me a lot with my first job as a junior developer.. I have a question regarding the @CrossOrigin annotation you add at 44:17. In my program, the error is still there after adding the annotation. I tried some google and stackoverflow search but didn't come far.. Would appreciate any insights you might have on this. cheers

[@bruhther6260]

What type of error?

[@adrianharmann2955]

@@bruhther6260 oh completely overseen that. It's the same error happening to him at exactly 44:00 on the html page. that error doesn't go away even after adding the annotation

[@Javamaster-tutorials]

Hi. If you added CrossOrigin and still have the same error, please, check that you added CrossOrigin from the right package as I did in the video. Maybe you imported this annotation from somewhere else. Also, please, make sure your path to the url is correct. I suggest you just copy paste my code and check it out. If issue is gone with my code, just try to find the differences in the example code and in your.

[@chitrangsharma]

@@Javamaster-tutorials sir after doing all these.. I'm still getting the same cors error. I am having my front-end separate from spring boot

[@Javamaster-tutorials]

@@chitrangsharma Hi. Please try to google around cors for websocket app.

[@tusharmonirul2045]

Any android client library where users can subscribe to a topic

[@JohnSmith-lb2sw]

I think you missed websocket dependencies at the initial project

[@truongthecong508]

Hi, how to deploy in heroku ?

[@Javamaster-tutorials]

backend part deploy using this tutorial kzbin.info/www/bejne/eXS7Z2eehq2dmrs frontend part deploy on free hosting

[@SONUKUMAR-vu3dn]

At the time of run project and when I am giving url : localhost:8080 It's not came

[@SONUKUMAR-vu3dn]

Can you give me suggesition plz

[@aahadqureshi2183]

@@SONUKUMAR-vu3dn what error

[@gabrielamaral9567]

@@SONUKUMAR-vu3dn were you able to solve this problem? I'm in the same situation

[@fuadshirinov2116]

Hi,firstly, thanks for this tutorial,i am working in a project and i have a comment service.I have to send comment text and input file.and I have to save that comment in database and return to all users via the websocket.But there is not any tutorial showing file upload via web sockets

[@Javamaster-tutorials]

You don't need to upload file via web socket. You can upload file using the common REST API approach for example. You can send comment via web socket and file via rest.

[@SONUKUMAR-vu3dn]

It's not showing main page when I am using url : localhost:8080 Can you suggest me how to run

[@Javamaster-tutorials]

It shouldn't. You don't have a localhost:8080 mapping in your application. In this tutorial you have backend and frontend separately. If you want your application open some welcome or main page by default, you need to add thymeleaf dependency and put your index.html under resources/static folder. You can check this video as an example: kzbin.info/www/bejne/bZzVlqClqc-tmq8

[@SONUKUMAR-vu3dn]

@@Javamaster-tutorials I tried but it's not work. Is it pssible to send code with thymeleaf Email : [e-mail]

[@qudratjonkomilov]

fine

[@DavisTibbz]

Why use GET for register instead of POST?

[@Javamaster-tutorials]

Most probably it's a mistake

[@theankitdabhi]

How can i openc frontend in browser i'm using Spring-tool-suites

[@Javamaster-tutorials]

You can open index.html file like a simple file from your computer. Just right click on file -> open with -> Chrome. Or you can just drag and drop index.html to the browser.

[@gabrielamaral9567]

​@@Javamaster-tutorials But how i can open the index.html in localhost:8080 ? I start the application but show me the error status 404. "This application has no explicit mapping for /error, so you are seeing this as a fallback.". help me pls

[@Javamaster-tutorials]

@@gabrielamaral9567 With the current implementation, you can't open index HTML in localhost:8080. If you want to do so, just create the static folder under the resources and place your index.html there. That should help.

[@bharathirv8479]

It's really awesome, it's very helpful to complete my mini-project. Master, I have one doubt about how can we do for group chat. can we have any tutorial for that or do u have any ref, please share it will be beneficial to all. Thanks in advance.

[@aytachuseyn3810]

Did u find something?

[@blackbirdJ]

​@aytachuseyn3810 did you find something 😅

[@aahadqureshi2183]

hey ur message are showing in a same page for all users can u help me to make a private for every user so that every user can chat in different chat pages or just tell me how to do it

[@Javamaster-tutorials]

Hi. Use the same approach as in the video, but also connect spring security for protecting user pages. You can take a look at this video: kzbin.info/www/bejne/eGGWhqWrq7SfaZI

[@aahadqureshi2183]

@@Javamaster-tutorials hey everything is clear I just want all the user to chat in seprate view coz every user's chat are showing in a single view plzz help......

[@Javamaster-tutorials]

Got your point. Such approach requires strict knowledge of frontend part of programming. As you can see, from the backend part there is nothing to change. I suggest you to use some chat widget and connect it to your chat backend. For example this one: codepen.io/Momciloo/pen/bEdbxY

[@vermilinguas]

Привет, очень хорошее видео, то что искал! Не могли бы вы ещё пожалуйста объяснить, как сделать так, чтобы можно было отслеживать набор текста у собеседника? Или как гуглить) Спасибо заранее за ответ!

[@Javamaster-tutorials]

Hi. Try to google something like input typing action. And then you see the handler which is working on input typing. After you can send info about typing on server

[@RAHULPAWAR-jh3mk]

how to store chat in database. Any one know .

[@Javamaster-tutorials]

just create a connection to you'r db and store chat in it. you can check out this video to take a look how to work with db with spring boot kzbin.info/www/bejne/rKanpIlnrayJjJI&ab_channel=JavaMaster

[@sahargaiche5752]

this code i have problem 400 and 500

[@vigneshkannaa]

Hi ,The video is amazing. I have tried the steps, I can create the connection but while sending the data, there is no response on the backend, I think it is not hitting the /chat/{to} caz my Sysout is not printing. Kindly help me to resolve this issue

[@aahadqureshi2183]

mine is showing white label error

[@aahadqureshi2183]

can u help me out

[@Javamaster-tutorials]

Hi! Please make sure you pass userId instead of {to} placeholder.

[@quynguyenuc3081]

can you share code on github

[@Javamaster-tutorials]

github.com/caligula95/spring-websocket-chat

[@yevheniikozhevin5845]

Shouldnt messagecontroller be just a @controller (not a @restcontroller). Or even morr better @Service

[@aahadqureshi2183]

im getting white label error can u help me out

[@Javamaster-tutorials]

Hi! No it shouldn't be service. I haven't tried with @Controller, but I think it won't work with it.

[@youssefennaciri7932]

can someone tell me about the URL he's using i can't understand it

[@Javamaster-tutorials]

what exactly do you want to know? don't hesitate to ask in comments. I'll try to explain.

[@youssefennaciri7932]

@@Javamaster-tutorials when i run the project on my local springtoolsuite, icouldn't fina a way to lanch it in the navigator. i guess that you're using some special url the includes autorization token like this : index.html?_ijt=je9k7lbj6g330sbth48qj0e2gf

[@Javamaster-tutorials]

It's not a special tool:) It's just because I have IntelliJ idea enterprise edition. You can just open your html file in the browser like in the old fashioned way. Just navigate to the source directory where your html is located, right click, open with, select your preferred browser and that's it. I have IntelliJ idea enterprise edition so I just use this build-in tool for convenience. Token you can see in my URL generates IntelliJ itself. I don't use it on purpose.

[@youssefennaciri7932]

@@Javamaster-tutorials thnks that's really helped just one more question, who is it that you run the project on port 8080(HTTP) but you navigate the web page on port 63342. could you explain why ?

[@Javamaster-tutorials]

Our backend and frontend are not coupled. Server runs on 8080 port, Intellij Idea runs frontend on the other port (which is probably part of some embedded tool). The point is: you can run your backend and frontend even on different machines. With REST API it's easy because your server responds with JSON and anyone can consume the data from your server. Today you write a web application, but tomorrow you decide to create a mobile application. You don't need to change the server (backend). Just consume the REST API and display the data in any way you want.

[@aahadqureshi2183]

hey its showing a white label error,.... plzz help

[@Javamaster-tutorials]

Hi! You don't need to navigate to localhost:8080/ It's rest application. Not spring MVC. If you want you can connect thymeleaf and put frontend logic under resources directory. But it's unnecessary. Just download project from the link provided in video. Run the server and open index.html file with your browser

[@aahadqureshi2183]

@@Javamaster-tutorials I tried but it's appending same messages which I text them and also the localhost also not showing

[@aahadqureshi2183]

And how is your local host showing up when u run it on web browser

[@denisburda7160]

@@aahadqureshi2183 It's Intelijii idea tool. It's present only in the enterprise edition.

[@aahadqureshi2183]

@@denisburda7160 when i tried its appending same messages for example:- i send a message hi jack so its replying hi jack plzz reply as soon as possible

[@HelloWorld-sy4yc]

Респект за английский!

[@andreymanaenko1638]

Надо было фронт в static положить и раздать самим приложением. Получился бы фулстэк проект в одном пакете.

[@Javamaster-tutorials]

:)