Spring boot & WebSockets: Build a Real-Time Chat App From Scratch

Spring boot & WebSockets: Build a Real-Time Chat App From Scratch

Bouali Ali

1 год назад

107,214 Просмотров

Buy me a coffee: https://ko-fi.com/boualiali 🔥 Secure your spot now and embark on your journey to becoming a Spring Boot master!🔥
https://aliboucoding.com/p/spring-boot-in-depth?coupon_code=EARLY_BIRD_30&product_id=4985811
🎁 🚀 COUPON Code: EARLY_BIRD_30

#websockets #springboot3 #Java #Tutorial #WebDevelopment

Unlock the power of real-time communication in web development with our comprehensive and interactive tutorial on WebSockets! In this step-by-step guide, you'll learn to build a fully functional chat application from scratch, perfect for beginners and intermediate learners alike.

🎁 Spring Data JPA course: https://aliboucoding.com/p/the-full-guide-to-master-spring-boot-data-jpa
🎁 🚀 COUPON Code: EARLYBIRD20

🔗 Source code: https://github.com/ali-bouali/spring-boot-websocket-chat-app

🎟 Join this channel to get access to perks: https://youtube.com/@Boualiali

Recommended Courses:
🎬 Spring Boot security & JWT token: https://www.youtube.com/watch?v=BVdQ3iuovg0
🎬 Spring security - Roles and permissions: https://www.youtube.com/watch?v=mq5oUXcAXL4
🎬 Spring Boot - Microservices architecture: https://www.youtube.com/watch?v=KJ0cSvYj41c
🎬 DevOps - Github Actions CI/CD: https://www.youtube.com/watch?v=a5qkPEod9ng
🎬 Spring Security - KeyCloak integration: https://www.youtube.com/watch?v=vmEWywGzWbA
🎬 DevOps - Docker for Beginners: https://www.youtube.com/watch?v=LNL0h66FXu0
🎬 DevOps - AWS EC2 deployment: https://www.youtube.com/watch?v=ua0cb2LjCW4
🎬 Angular - Full course from scratch: https://www.youtube.com/watch?v=VTEDh2pNSBQ
🎬 Websocket - Chat application one to one: https://www.youtube.com/watch?v=7T-HnTE6v64
🎬 Spring Security - Two Factors Authentication 2FA (TFA): https://www.youtube.com/watch?v=NzuC52eLGKo
🎬 Spring Boot - Swagger UI & OpenApi Decomentation :https://www.youtube.com/watch?v=2o_3hjUPAfQ
🎬 Spring Boot - Reactive programming & WebFlux:https://www.youtube.com/watch?v=EnUsNVHveyU
🎬 Spring Data JPA & Hibernate: https://www.youtube.com/watch?v=eY9riN5Y2mQ&list=PL41m5U3u3wwkS8BU0fIeRQwY3hK4VlFlX&pp=gAQBiAQB
🎬 Apache Kafka: https://www.youtube.com/watch?v=KQDTtvZMS9c

CONNECT WITH ME:
👨‍💻. Website: https://aliboucoding.com
👨‍🏫 Facebook: https://www.facebook.com/groups/589612651142975
📸 Instagram: https://www.instagram.com/alibou_coding
🎮 GitHub: https://github.com/ali-bouali
🏘️ Discord: https://discord.gg/Ded93eKfAB

This tutorial is designed to simplify complex concepts and guide you through the entire process of creating a real-time, two-way communication system. We start from the basics of WebSocket technology, how it enables seamless data flow between clients and servers, then quickly delve into the hands-on coding part.

Here's what you'll gain from this video:

1️⃣ Clear understanding of WebSockets and their role in real-time web applications.
2️⃣ Practical knowledge of how to set up WebSocket connections.
3️⃣ Implement a chat application, learning to send and receive messages in real-time.
4️⃣ Deal with real-world challenges like connection errors and system failovers.
5️⃣ Best practices for security and scalability when using WebSockets.

By the end of the tutorial, you will not only know the theory but also have a fully functional chat app that you have built yourself!

Our unique, student-friendly approach makes this the perfect video for those new to WebSockets or those looking to solidify their understanding. It's a must-watch for aspiring web developers, full-stack engineers, and computer science students.

If you've been searching for a comprehensive, easy-to-follow guide on WebSockets and real-time application development, your search ends here!

Don't forget to subscribe for more such insightful tutorials and hit the bell icon for updates on future videos.

Be sure to like, share, and comment if you found this tutorial helpful. Your feedback drives our content. Happy coding!

Table of Content:
00:00 Introduction
01:44 What is Websocket
06:34 HTTP VS Websocket
09:12 Websocket Hanshake
11:43 Future application
12:24 Create a new Spring boot project
13:41 Add Websocket broker config
17:44 Add disconnect event listener
20:02 Implement the char controller
27:09 Finish the disconnect event listener
30:36 Add the HTML page
36:56 Implement the Javascript
55:30 Test the chat application
58:20 Outro

Тэги:

#spring #jpa #data_jpa #mapping #onetoone #one_to_one #spring_data #many_to_one #manytoone #class #generatedvalue #persistence #repository #service #jparepository #jpa_repository #uml #class_diagram #design #software #engineer #software_engineer #java #jakarta #javax #spring_boot #springboot #security #spring_security #aliboucoding #spring_boot_3.0 #spring_boot_3 #spring_3 #jwt #filter #authentication #authorization #bearer #jjwt #oauth2 #github #social_connect #social_login #websocket #javascript
Ссылки и html тэги не поддерживаются


Комментарии:

Bca walah  1M😍
Bca walah 1M😍 - 27.09.2023 20:13

Script src ka path kha se copy kiya

Ответить
Sudhanva Patil
Sudhanva Patil - 27.09.2023 12:04

explaination is missing in lot of places

Ответить
SuggestionsOfHusseni
SuggestionsOfHusseni - 20.09.2023 12:43

sir do u create order tracking for e-commerce website using
springboot can u make a series on it

Ответить
Pal Palych
Pal Palych - 19.09.2023 18:00

one more 1001 hello-world tutorial... how to send message to exact specific user/connection?

Ответить
Sakshi Vinchurkar
Sakshi Vinchurkar - 12.09.2023 09:27

I properly wrote code still still showing error that "Received a message with null or undefined sender sender: null" what's the reason behind this error

Ответить
zalson channel
zalson channel - 11.09.2023 18:46

Thanks very much Ali

Ответить
Sakshi Vinchurkar
Sakshi Vinchurkar - 09.09.2023 15:57

In my web socket I completely followed steps told by you but still showing error that could not connect to web socket server what's the reason behind it

Ответить
Vahan Sahakyan
Vahan Sahakyan - 08.09.2023 05:30

you sound like AmigosCode :)

Ответить
Eldorado
Eldorado - 04.09.2023 18:21

This is not working for me. The chat page does not show up for some reason and therefore websocket connection will never open, it just redirects me to localhost:8080/? after submitting the username.

Ответить
boris dimitrijevic
boris dimitrijevic - 01.09.2023 02:04

Hello bouali could u help me with my chat application please?

Ответить
Bo Terham
Bo Terham - 24.08.2023 06:49

can you make an extension to this video with how to implement SimpMessagingTemplate so that users can have private chats with 1 other user directly and only?

Ответить
Payal Nichat
Payal Nichat - 23.08.2023 08:52

I'm creating a chat application using WebSocket. Text chatting is done, but I want to add an attachment feature. How can I do that using WebSocket

Ответить
Firas Chebil
Firas Chebil - 19.08.2023 19:08

it says invalid url whenever i type /ws as url in sockjs

Ответить
Somesh Sahu
Somesh Sahu - 13.08.2023 22:25

Very nice explanation thank you so much sir 🙏🏼🙏🏼🙏🏼

Ответить
Fahim Naseem
Fahim Naseem - 10.08.2023 02:46

downloaded the source code but its not working, can you please mention the steps before running the source code.

Ответить
Ilya Lisov
Ilya Lisov - 09.08.2023 12:09

Thank you very much!

Ответить
YURI
YURI - 07.08.2023 09:31

Thank you for teaching me the web socket method.

Ответить
9 SSAFY
9 SSAFY - 01.08.2023 20:14

Thank you very very much❤
I have one question!
How can I use websocket with react😅😅

Ответить
Prashant
Prashant - 28.07.2023 04:40

Thank you for making this.
I have learnt a lot

Ответить
Yash Jain
Yash Jain - 27.07.2023 16:46

Hey, could you tell me which plugin you used for Javascript

Ответить
Rituraj Pandey
Rituraj Pandey - 26.07.2023 17:12

Hey,
If i want to use spring boot for transfering messages and for front end I want to use React. How can i do that?

Ответить
Pardeep Saini
Pardeep Saini - 25.07.2023 04:35

❤ Great experience God bless you. Keep sharing knowledge.

Ответить
Derek T
Derek T - 24.07.2023 17:26

Hi Bouali, do you know if we would be able to add encryption to this Chat App? Maybe a future video idea alongside publishing to AWS

Ответить
Kha NGUYEN DINH
Kha NGUYEN DINH - 23.07.2023 21:13

I think you should credit the source you are copying to make this video. "callicoder"

Ответить
Sporksto
Sporksto - 19.07.2023 16:04

Hi! Thanks for creating this video. I was wondering if I could use Blazor in lieu of JS, as the prospect of coding in JS does not particularly appeal to me.

Ответить
Houcem Eddine Mabrouki
Houcem Eddine Mabrouki - 12.07.2023 10:11

Thank you for the tutorial , Totally Worth IT

Ответить
adlhbgreqk
adlhbgreqk - 11.07.2023 23:41

The most un-understandable guide of my life

Ответить
David Baimurzayev
David Baimurzayev - 10.07.2023 19:04

Thank you for your content, I really enjoyed it
Please keep doing it!
I am going to go through all of your videos from now!

Ответить
Syed Ibrahim
Syed Ibrahim - 08.07.2023 17:51

Thank u

Ответить
Humble_Learner
Humble_Learner - 07.07.2023 22:01

I really like your teaching style and I'd really appreciate it if u made a tutorial on the following. I really need it 😊😊❤❤

I was wondering if it'd be possible to create a tutorial on
👉🏻(Spring WebFlux Project with -> {
i. JWT Authentication and with multiple Role-based user, communicating with a db?
ii. It'd be really cool if you could teach both functional and basic approach of endpoints.
iii. Also how exception handling works in spring webflux; adding this into the security tutorial would be nice. That'd be also a really great content.
});

Ответить
taha ahmadi
taha ahmadi - 07.07.2023 15:25

thank you so much for this video;
I want to build a Real-Time voice App
Is It deferent from this video?

Ответить
chigite manmath
chigite manmath - 07.07.2023 12:27

which tool you have used for this

Ответить
TikTok Trends
TikTok Trends - 02.07.2023 12:28

Can you make a video to transform this example into angular/react and also with private messaging instead of public rooms like this?

Ответить
vvs
vvs - 30.06.2023 04:13

Thanks for the content! In my application i have two types of user that need to be connected in a private chat. Can i implement that securely using your tutorial as a start point? How hard would it be to implement a secure chat app between two users in my API?

Ответить
Donald Wisdom
Donald Wisdom - 26.06.2023 15:01

Good morning, Ali. I'm most grateful for this. I really needed this now, and you delivered it perfectly. Although, I'd like to know how to make it between just 2 users and also keep it private

@BoauliAli

Ответить
AcedAndBilled
AcedAndBilled - 20.06.2023 03:35

This was a magnificent tutorial, thank you so much. Please show us how to push to AWS and the benefits of doing so.

Ответить
John Mark Fabros
John Mark Fabros - 19.06.2023 16:32

anyone having a problem with the navigator.UserAgent? if so, how can I solve the problem?

Ответить
Nader Ayed
Nader Ayed - 19.06.2023 00:14

I would like to express my sincere gratitude for your assistance. Your guidance and motivation have been truly inspiring to me. Thank you very much for all your help.

Ответить
mahmoud zghal
mahmoud zghal - 17.06.2023 16:03

Very good Guide. But i have a question : Can i test my websocket controller in postman for example ?

Ответить
Subhashis Mollick
Subhashis Mollick - 17.06.2023 13:12

Thanks @Bouali
Very helpful

Ответить
manes hipocrates
manes hipocrates - 17.06.2023 11:36

+1 for you: not seen much from video streaming using spring boot. Can someone use this in production? I hear 3rd party tools are kinda better.

Ответить
amara ali
amara ali - 17.06.2023 01:53

Can websoket do live videos call?

Ответить
Hlib Astashev
Hlib Astashev - 16.06.2023 22:21

Very well done guide! Thank you!

Ответить
Oğabek Hamdamov
Oğabek Hamdamov - 16.06.2023 12:46

Hi! I liked your content. Have you worked with Kafka ? I cannot any project or tutorial that explains exactly when and why to use Kafka

Ответить
Jose Julian
Jose Julian - 16.06.2023 02:19

Dammmmnn. Thank Youuuuu❤️

Ответить
khalil lakhdhar
khalil lakhdhar - 15.06.2023 11:25

such a wonderfull content keep going

Ответить
Viacheslav Chudnovskyi
Viacheslav Chudnovskyi - 15.06.2023 02:55

TY, waiting for AWS tutorial

Ответить