How To Create A Messaging App With Socket.io And React
HTML-код
- Опубликовано: 12 июн 2024
- 🚨 IMPORTANT:
Get started with Embold.io for free: embold.io/products/overview?u...
Use code US21F29A for 20% off a paid account (Only applicable in India)
Whatsapp is an incredibly popular application, but the technology behind it is actually pretty simple. In this video I will show you how to create a messaging app similar to Whatsapp with React.
📚 Materials/References:
GitHub Code: github.com/WebDevSimplified/W...
useRef Tutorial: • Learn useRef in 11 Min...
useState Tutorial: • Learn useState In 15 M...
useContext Tutorial: • Learn useContext In 13...
🧠 Concepts Covered:
- How to use Socket.io
- How to create custom React hooks
- How to create custom React contexts
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00:00 - Introduction
00:00:34 - Demo
00:02:20 - Code Setup
00:03:51 - Login Page
00:13:47 - Custom Local Storage Hook
00:18:50 - Dashboard
00:20:21 - Sidebar
00:29:50 - Create Contact Modal
00:36:01 - Contact Context
00:41:18 - Contacts Sidebar
00:43:01 - Conversation Modal
00:48:43 - Conversation Context
00:54:12 - Conversation Sidebar
00:59:11 - Current Conversation Component
01:04:50 - Send Message
01:13:45 - Displaying Messages
01:23:43 - Server Setup
01:28:28 - Socket.io On Client
01:37:26 - Outro
#Reactjs #WDS #WhatsappClone
I can't believe that 8 months earlier I couldn't understand how a simple function with parameters works. And now I'm watching your video in React at 1.5 speed. To everyone who might be struggling: time and effort will take you where you want!
Congratulations!!! Keep up!
This is becasue of shitty instructors. There's a lot of them now.
Same
same here brother
OH SAME
I really appreciate your videos so far because you cut out all of the unnecessary crap that makes learning a new concept more confusing. More coding tutorials should be like this!
this is amazing, but I feel like without the tutorial I woud never be able to do something like this. Beyond words. No way I would do this by myself
Kyle, you have made learning web dev soooo much easier for me and I appreciate all the hard work you put into this long video. There are so many people out there who are brilliant developers/engineers but who are really bad at explaining things. I'm sorry :P
You are so good at what you do. Thank you for providing this knowledge for free. You are the most consistently helpful dev RUclipsr I have encountered.
This is exactly what I need for my college project. Thanks, Kyle
Happy teacher's day Kyleeeee
Lol.
yes
@@pizzapanni what Lol?
@AmazingFacts No Fiance. 😜😜😜😝😝😝😝😝😝😝😝😝😝😝😝😝😝
How will you eat if you are not hungry. Similarly, how will you learn when you are not interested.
Teaching is not that special. Many try to spit knowledge, but most do it in the wrong manner. A real teacher guides you, not leaves you confused after telling facts. Teacher is a business, a trade of satisfaction for knowledge. We are happy after learning from someone but then we are unhappy to know we have to guide ourselves further and become our own teachers.
Teacher's day is actually a celebration of our own selves, not others who incompletely guide us. We are our own masters, our destiny is in our own hands.
Man, you're at God level w/ the react. Excelsior, mate.
As always Kyle, amazing content!!!
FYI... For anyone that happens to be using Bootstrap 5, some of the classNames may not work. For example, at 10:54, "mr-2" (margin right) would instead be "me-2" (margin end).
This is also the case with "border-right" needs to be "border-end" at timestamp 27:14.
you are the best! thank you)
Lifesaver mate
@@verdyguo recomended bs5 documentation, it's changing any class...
Life saver!!!!❤❤❤
Thanks for saving our lives
You're the best teacher man! You taught me a lot ❤️
Happy teachers day man! Thank you so much for your videos!
bro, i finally got around to following this tutorial. and i learned so much more than i expected. The fast paced coding made me sweeet at times
this is solid. almost broke my remote hitting that pause button so many times but def learned a lot with this one. Thanks bro!
Great effort, Kyle
almost 2 h of recording and hours of searching and coding THANK YOU , I liked the (useState, useContext, useEffect) combination,
however I distracted a bit with bootstrap and styling but I think it is useful for guys want to tie it all up together.
Thanks for this tutorial Kyle. Looking forward for a MERN project tutorial.
This was exactly what i was looking for! Btw, your code is extremely clean and elegant. Cheers!
Hey Kyle!
Love all your tutorials, you explain everything so well
You should do a Trello Clone!
True
You and Ben Awad are classic gem
I love this concept. I’m waiting much much more like a project from u. Just keep going
kyle you know you have a grown a lot!!
Have been watching your videos since the beginning. Love from India. 🎊
Thank you for being the mentor we all needed !
WOW! This was awesome. I know it was simple but I loved the "New" button verbiage switch. Some times it's the little things 😄 Thanks Kyle!!
I really love your coding style.
I learned Javascript while watching your channel regularly and now I have become a snob I think.
At 17.07 there is a mistake in the code, which will lead to the error "Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development." to fix this use => if(jsonValue !== 'undefined' && jsonValue !== null ) return JSON.parse(jsonValue)
This helped me out, any idea as to why it doesn't work as shown in video?
thank you so much! I almost gave up after going to the google doc page and the react link for debugging, and still not being able to fix it.
Wow! Thanks, this didn't even come into play until the end.
You should just go to Applications, LocalStorage and clear it out.
@@adamhardie506 maybe a recent update
I just realized Kyle grew a beard by the end of the video :D. To do all this in a single shot, you are a monster! Respect++
the speed of narration is breathtaking
Hey, have some love from India. One of the best teachers and tutorial makers!
I instantly subscribed when I saw the project. following along now.
i was here just to take hints for the backend... but now I realised there's a lot for me to learn in client side as well. I developed something similar to what you are doing here but mine looks way to complicated , isn't well optimized and have way more line of codes even tho ultimately my code dose the same thing as yours... Now I'll watch your vids and refactor my app to make it as clean and optimized as i can.
You are a lion my guy. This is every Software Developer's dream
It seems InputGroup.Append is not in React Bootstrap anymore, just a Button in InputGroup after From.Control will do.
MVP
Only channel I play the video and the first second I hit the like button.
This taught me so much I'm astounded.
thank you kyleeee with this chat app now I use this my own version in my local area network!!!!!! to chat with my only family and friends
Another Awesome video Kyle! Can you make a video on making a weekly scheduler app?
On 17:12 , “ && jsonValue != ‘undefined’” should be added to the ‘if’ parentheses because the browser has returned the error of ‘undefined’ which is a string not a undefined data type. I have tried on Chrome, not sure how other browsers react under this issue.
thanks
@@clrs8995 No problem 😇
Happy teacher's day Kylee sir. ❤️Love from India ❤️
Mannn, This is lit 🔥🔥🔥 That's what i'm looking for !
Jesus christ this channel is a gem
you do a very good job of explaining everything along the way thanks!
Huge fan of your videos Kyle, keep it up!
Are the seven dislikes bots? Honestly, what's there to dislike. Thanks for this great video Kyle.
some people just had a bad day, and want to share it with the world 😃
Wow in 2 weeks the dislikes grew almost 4 times.
heavy usage of bootstrap, needless usage of local storage, and his face
Not to be rude and i really don't think these things are enough to dislike a video,
but kyle has a bad habit of not following naming conventions,
he names many variables with little to no difference like for say contacts,contact or something simmilar
hence it becomes very difficult to follow along some times
@Luke Mwenda same, I cant keep up with how fast he does things, this is supposed to be a tutorial? I got sooo many errors copying his code, insane
nicee! good to see new React projects
you're the best Teacher. Happy teachers day!!!!
Finally, It runs Kyle Thank you for the video.
wish y luck for 1M 🔥 you work really hard 👍
You're one of my favorite Sir
Lots of love from India😍
At 50:12:00 hold alt and you can set multiple marks at any point in vs code; this way you save yourself from writing the same all over again.
There are helpful snippets for importing modules and using hooks as well...Great video. Thanks for your effort much appreciated.
I so love this channel
Good luck on your interview!
wow! the hooks for local storage is really helpful, gotta apply them in my work..
O my god i don't believe that you made a big tut. Well done body! In my tut i make many hours videos tut. The biggest is 8 hours. Is really very difficult to make big tuts! Again well done!!!
Thanks a lot Kyle that was great
Awesome video man, thank you for sharing, very useful indeed. Congratulations, you rock!
Awesome video! I always learn something from each one of them. Thank you :)
From your videos ,I think you were a pro at javascript
Facebook: *stealing data from users of whatsapp
Kyle: hold my beer
Damn man, your videos are so awesome!! Thanks.
I strongly support this handsome guy, sounds good. Simple ,short and precious 🤴.i don't have time to watch this video now see you later.
AMAZING video. You are an absolute beast and I consider you Kyle as one of my primary coding mentors.
I'm struggling a little bit to understand the solution to the message scrolling problem at 1:24:00 ... is passing setRef as the ref to the message component automatically pass the element as the node parameter to the setRef callback? and that callback only gets executed if on component re-render, the node has changed?
React docs also say that the dependency array in useCallback should include parameters. But here we leave it empty... and it works! Lol
Kylee love u brother, keep doing it more brother
Damn... I spent literally 10 hours following this... thanks a lot for making this free!
There are two things that I want to spot out:
- I think the approach of setting the receivers in an array and group them without a "group id" makes very troublesome all the process. Setting a group code allows to identify inmediatly the group without need to set a ArrayEquality function, and also will save a lot of logic process in the ConversationsProvider component. Also, in the server you just can let the user Join the group code and socket io will do all the send message task.
- I don't understad why the socket server is working without the CORS implementatio... I did't use CORS params in my local server and it doesn't work, server just refuses conection. Is it perhaps version changes?
I'm also unable to make a connection, how did you solve this?
Awesome video bro!!! Thanks a lot for sharing your knowledge
Great content man. Thanks for sharing your knowledge.
Amazing work, thanks!
at 17:54 is there any reson for returning the function while calling it?
i know that this happens in useState also
if we have [function, setFunction] = useState()
we dont do setFunction(nameOfTheFunction)
we do setFunction(() => nameOfTheFunction)
Keep up all your good work!
Super content! You're very good at what you do man. Your channel is invaluable!
Great stuff, I followed this using TS, so it took some extra time, but it was worth it!
Wow. Awesome!!! TQVM!
This is a fantasic tutorial, I wonder why Kyle doesnt use nextjs to create project ? It gives you ssr right out of box, anyway, this is a practical and useful project, you just need to add webrtc to show the live stream !!!
nice vid man , appreciate the hard work
You are perfect . Awesome content 👏👏
Awesome masterclass :D
Great work, bro❤️
man you are talented at everything
another great project!
i can't keep up with ur speed, i do understand the syntax but i am not able to join the threads, what is working for what, man i need hell lot of practice and reasearch for doing something like this.....salute to you Kyle, u r GOD
u r the best teacher
nice work hope you could do a slack clone next
THIS IS CRAZY! I was literally thinking about building this but had no idea how to do it! I love you Kyle!
Thanks heaps for your videos! Would also love some tutorials that include Typescript with React to get some more TS practice :)
Happy teacher's day sir😇😇😊😊😊
youre the man. this is great
Amazing tutorial, you rock it bro
It's here!! ❤️❤️
Great video kyle.
is it possible to open the page with a browser of another computer connected with lan cable?
This is sick, thanks
Happy teachers day ❤
Thank you for all your content! This stuff is definitely not for beginners. But I have a question. If I take your course "Learn React Today" , is it for advanced ones, or I can comprehend there all the stuff with basic knowledge of React? Thanks in advance!
you need to use same bootstrap version as kyle if you want all classes and boilerplates work.
so if you have problem first uninstall latest react-bootstrap/bootstrap
yarn remove react-bootstrap bootstrap (or npm uninstall react-bootstrap bootstrap)
then
yarn add react-bootstrap@1.3.0 bootstrap@4.5.2
and finally restart react server
Life saver!
Hi Kyle !!!! I love you 🤟 keep making awesome stuff
Happy teacher day sir.In India teacher is god where there is culture where we facilitating teacher and bows down and touch feet because we believe teacher is god for us.so bows down and touch you feet because you are teacher for me.
Please kindly request you to create it by angular also.
Great content!!! thank you so much..
Thanks for the tutorial! I do feel this would have been easier with Redux but that's another tutorial lol
Kyle: I am speed
Happy Teachers day Kylee.Please tell where are you from?
You are jus awesome,🔥😍
this is what I needed for my next project.
Bruh ur like that osas Guy XD
@@StratexMedia 😂
#githubFollowerGang , knew this video's coming.
Learnt so much very advanced should definitely do this project again to full understand. But thanks learn how to use useCallback and custom hooks