Build A Realtime Chat App In ReactJS and NodeJS | Socket.io Tutorial

[@dexcoder1207]

if anyone receive the msg twice you can solve that issue like this: useEffect(() => { socket.off("receive_message").on("receive_message", (data) => { setMessageList((list) => [...list, data]); }); }, [socket]); And thank you so much for this video i was really looking to understand the concept of chatting waiting for the second part.

[@olexandrsokolyk4690]

Thank you )

[@rokibgyimah8675]

Thank you very much. But please why we should add "socket.off("receive_message")" ?

[@ine_kid]

thanks

[@cryptofolks67]

thanks heaps

[@fanifrancs]

wow, you are doing great bro. I have been searching for react videos and your videos usually pop up. I have been loving your tutorials.

[@brilliantatosam]

Best video on the internet about this topic. You're a wonderful tech teacher

[@PedroTechnologies]

Glad you think so!

[@lakkuntlanaveen1678]

​@@PedroTechnologiesin this vedio u didn't connect with mongodb

[@maxwong4657]

Awesome tutorial as always!! very clear and elaborated! However, when I tested my app, there was an issue that when. I send a message, and the message is displayed twice. The solution is : in the useEffect() hook, we have to write the cleanup function below: return () => socket.removeListener('receive_message') It will fix the problem.

[@denisjunior1086]

Can you explain why we have to put this ?

[@jonelbarrientos7057]

thanks bro

[@thequang9234]

thanks bro

[@nikhilvijayan3411]

Thanks for this, Max

[@ankurgoswami4441]

thanks bro

[@spondoolie6450]

If anyone is having problems with the messages double-rendering.... React v18 (which came out after this video) now double-renders the useEffect hook and you'll see the messages double-feed in the chat. To solve this problem use the useMemo hook.... and still use "socket" in the dependency array.

[@codevanie-misery]

In what part do I put the useMemo hook?

[@programmingrush]

thanks bro, i was figuring it out

[@saisushanth8507]

bro, why was that happening and how can useMemo hook solve the issue??

[@jotaroisdarius1918]

@@saisushanth8507 it's because of react strict mode, and it only happens in dev and not prod, if you check the index/main file of your react app you're gonna notice that's it's wrapped around StrictMode tags, just remove them ( not recommended )

[@lucas-kg7bj]

@@jotaroisdarius1918 this is the fix

[@MyRc16]

Hi Pedro! Great Video. Just in case someone need it i was having an issue where messages where being sending twice, i couldnt explain why, wasted 1 hour of my time comparing my code with pedro's and at the end it was the React.StrictMode wrapping my App, stric mode renders components twice that was why n.n

[@SilkroadBower]

Aaahhhhh thank you mate I didnt know that!

[@Webbi_Trax]

life saver!!

[@muhammadfurqan7799]

thanks!!!!!

[@youssefhisham4923]

how to solve then ?

[@datkumar1024]

Thanks brotha🤝

[@sohamkadam5018]

Best KZbin channel for beginners as well as intermediate developers.

[@PedroTechnologies]

Wow, thanks!

[@penelopejungreis9355]

Thank you so much, I was still confused after your video from last year but this one really cleared that up about the Server class, cors object settings, and the use of the localhosts!

[@PedroTechnologies]

I'm always trying to improve old videos hahaha i am happy that this one helped :)

[@vasukhandelwal2233]

@@PedroTechnologies Can you explain why when you send a message from left pane of google chrome tab why does it only console.log only on right pane when both have joined a room??

[@ayushdedhia25]

Bro really needed this.... 💯🔥❤️

[@TheNamesJT]

57:05 i'm getting double scroll bars? Update: Fixed this issue by removing the overflow:scroll on line 85 in the css file. Because the npm package react-scroll-to-bottom already adds the scroll bar.

[@LeeanRepzTraining]

BROO the best tutorial of this sooo far lets go!

[@PedroTechnologies]

Glad you think so!

[@hyrixlele8959]

Some people are just meant to be teaching ! clean explanation Thank you

[@god2be]

it's so easy to explain, I understood right away =) but before that I looked at other chat examples and the guys there couldn't really explain how the websocket works! so thanks!

[@PedroTechnologies]

Great to hear!

[@samyf8949]

This is one of the clearest tutorial i've seen. really love your content and appreciate what you do !

[@P.D.V.J]

Amazing tutorial! Was able to get through every step, can't wait to expand on it

[@shivamkhandelwal2707]

the way u teach people is tooooo cool for everyone who is beginner.Thanks for ur amazing tutorial

[@Asia_life_explorer]

Man haven't seen a guy who explains like you, I'm wondering why aren't you having millions of sub?

[@thushithamanokaran2040]

This is really awesome.. If you end up making the part two, could you please include saving messages in a database, deploying etc?

[@PedroTechnologies]

Im thinking that maybe saving in a database would be cool!

[@ronaldc8634]

Seconding the deployment part!

[@한준규-e1e]

@@PedroTechnologies Hey Pedro, seconding this!! that's gonna be super awesome man

[@asthadad9879]

@@PedroTechnologies when you are creating second part ?

[@volanddevil8015]

@@PedroTechnologies do it please!

[@ThColinPereira]

I was thinking of doing a project using socket io and your video shows up! It’s like you read my mind!!

[@PedroTechnologies]

Colin

[@cesaralanis4213]

This is exactly what i was looking for dude!! Yo have some skills to teach, so detailed and easy to understand!! thanks and congrats!!

[@Odidi_Bee6ix]

Awesome stuff 💯. Anyone planning to watch this in 2023 and above pls use vite to create the client side of the application. It'll save you a lot of hassle

[@dxrk81]

this ^

[@sohamganmote7998]

Man Your Teaching Skill are on next level i learned more here than my collage

[@artimgashi6024]

Man this is a fantastic tutorial, keep doing this !! Also wanted to ask if u can make a video for making chat apps with SignalR, i'm sure you've heard of it.

[@michaelmyers717]

God damn Bro! I had a cors problem and tried to fix it literally a week, i'm so thankful to u :*

[@aphmaia1]

Hi Pedro! Amazing video, I learned a lot from it! Could you make a separate video showing how to use a database with this chat? Hugs from brazil!

[@josephchimebuka4143]

This guy is crazy how did he do this in 1 hr?... Thanks a lot man you're awesome!

[@brunogbrito]

Very well done man, um dos melhores tutoriais, super bem explicado! Rolou a parte 2?

[@someone9493]

Thanks!

[@PedroTechnologies]

Thank you Yaroslav!

[@whatsinaname3837]

Perfect tutorial. LoL. Thanks, Pedro for remaking videos when these libraries get updated.

[@sagarchawla4926]

41:30 i am doing the same way as you did, i am also console logging data ones, but its getting logged twice

[@wfgundam]

thank you! was able to deploy with less of a struggle with CORS. thanks for the updated video!

[@marcoberry5541]

Please how did you deploy this

[@redabekka5940]

thanks for tutorial for those who have face problem with message that shows twice the solution is to do a cleanup function to useEffect like this : useEffect(() => { let test = false; socket.on("receive_message", (data) => { if (!test) setMessageList((list) => [...list, data]); }); return () => { test = true; }; }, [socket]);

[@Xavier-jf7wd]

Still getting twice the solution

[@matrix_prime739]

👍👍👍 thank you very much .I was searching for this kind of any video on youtube and this video really very good explained and one of the clearest tutorial i've seen.

[@ilaymorozoff4113]

It is the amazing tutorial, thanks! Your channel is the best!

[@PedroTechnologies]

Wow, thanks!

[@shahipapon833]

Your 18 mins just blowed me. ❤️ and rest of the sec to sec I was impressing 🥰 impressing ❤️ impressing 😍😍 ad finally boommm,💥💥💥.. I can't express my thought in these few words. Just You will be in my heart ❤️❤️. You unbelievably make socket clear than water ❤️❤️❤️❤️

[@PedroTechnologies]

Hahaha I appreciate it!!

[@matthewfisher1874]

great video thank you so much, ive been looking for how to make a react chat app without using external apis, and this video is a perfect

[@Switchfusiontech]

thanks pedro this is lovely, i have alittle challenge with mine, the messages seem to deliver twice and i cant seem to pinpoint where the problem is coming from in the server area

[@virgiliolopez3843]

Hi. Just wanna share the solution I found after an hour of trying to fix the same issue. The solution is to go to 'index.js' in your client folder (NOT the index.js file in the server folder) and remove just the and line. This is actually a new feature in React 18, which was just released in March 2022, which is why the behavior in the video is different.

[@agathahelenafariasmoratogo9614]

@@virgiliolopez3843 It worked! Thank you so much!!

[@ismael.lastlevel]

Wow . I was struggling with the cors issue and now I fixed it. Thanks 👌🏾

[@whierthy2608]

amazing video ... was struggling to find a short project to learn something new this one really did the work thanks A lot

[@josephgitonga3739]

GREAT GREAT tutorial dude ....you've helped incredibly. Thanks so much

[@ayl247]

happily subbed awhile ago. Great vids for refresher and learning!

[@PedroTechnologies]

Thank You!

[@ranabirmandal8733]

please help, i'm unable to emit message from socket backend to client. I could console log the data coming from client but server is unable to emit. nothing in the console of browser

[@AliAkbar-zv4jv]

did you find a sol?

[@bbunited_pvp]

This is certainly what I need. Thank you so much.

[@francescoPace27]

You are the best man! Thank you very much for this amazing tutorial

[@pcalozen]

Very nice Pedro, congrats, helped me a lot . I also didn't know that Hughie from The Boys' super power was coding so well.. kkkk!

[@chintalapudirohitmanikanta4492]

Can't see output in my brave browser console and getting this error in console Failed to load resource: net::ERR_CONNECTION_REFUSED I'm stuck at 41:00 in the tutorial Can someone help..

[@henrykibocha5224]

Great Tutorial no CORS errors

[@prayascsa6601]

I'm on the 100daysofcode challenge and i was feeling super down and didn't feel like coding, I saw this vid while scrolling and decided i'll do this, and I'm ashamed to say that i kinda just copied what you did while watching the video, but I still understood a lot of things so I guess I still did something good

[@mohammedmehdi1940]

this is the best video for this topic 🛐

[@ayushprajapati9486]

works fine in 2023 .. great vid

[@hazelcaling]

The best!! Thanks Pedro!

[@subhajitadhikary-99]

The issue with two times showing message on screen is due to react strictmode from version 18. Either you could go to index.js file and remove the wrapper from , but I will not recommend as its given for a purpose to check issues in dev mode. The next thing which is ideal and given in react docs for useEffect hook as well -> which is using return statement with useEffect and inside that, you can write socket.off('event-name', methodName) , which should resolve the issue. Btw, thanks PedroTech for such great content.

[@ishikaagrawal262]

Can you please give the code please what you exactly want to say about useEffect over here..

[@ShadyRonin]

Incredibly helpful, thank you so much Pedro!!!

[@ludisinfo1048]

Thank you very much Pedro !! Excellent Tutorial, very well explained, easy to follow and very useful ... As Thushitha mentioned It would be great to see a second part with database connection (may be Mysql or Mongo) as well as deploying in Heroku perhaps ? ... in any case It was a fantastic video ! Best Regards from Germany ! :)

[@yilinliu9687]

For saving data to database, in my point of view, after building and connecting database, you could add a query function under the socket io receive message. For instance, mongoDB, ``` findOneAndUpdate()```it will get it saved to database. Then deploy to Heroku, Heroku has step by step documentation to follow

[@victorkipkoech3558]

wonderful had a problem with socket now imma do wonders🥳🥳

[@ВолодяЛеськів]

Nice tutorial. Thanks from Ukraine, mate!

[@prasanths8960]

Perfect bro...Like from india...👏👏👏

[@maciejromiszewski6954]

Dzięki! Tego szukałem!

[@uzndev2242]

Thank you for this perfect tutorial Pedro!

[@110Genesis]

You are awesome Pedro. Much appreciated

[@PedroTechnologies]

I appreciate that!

[@Zarinabaloch716]

Hi pedro! You did a great job!

[@akshatbarwal10]

Hi Pedro, great tutorial! I have a doubt or rather a bug in the code. When I send a message from another user to me, the message is being sent more than once. I did remove the React.StrictMode in the index.js file but it is still showing up multiple times. If anyone can help pls do. Thanks again : )

[@bencostas2033]

I’m having the same issue, if you find a solution can you let me know

[@vivekpaliwar7217]

Did you found any solution for that ?

[@georgi1559]

he is actually getting the same bug in the video and just ignores it like it is not obvious.. idk why he did not fix it, cuz it happened like 3 times

[@jayc6535]

found this on stack overflow: socket.off('recive-message').on("recive-message", (data) => { console.log(data,'recive'); setMessageList((list) => [...list, data]); });

[@morphine3016]

in the useEffect() hook, we have to write the cleanup function below: return () => socket.removeListener('receive_message') It will fix the problem.

[@bencostas2033]

Hi thank you for the tutorial, I’m getting an issue when receiving messages, it appears twice. I checked the GitHub code and my code looks the same and went through the tutorial once again. Does anyone know how to fix this issue?

[@redabekka5940]

it's the same problem for me did you fix the problem

[@hamad5141]

Go to index.js, and remove . So you should only see. root.render(); This worked for me :)

[@alexzil2142]

This is so great. Used this for my react native project. Thanks

[@derekspecial1771]

Thanks pedro❤

[@ShivamGupta-oy8mu]

you have made things very easy to understand. This tutorial is really awesome.

[@md.sajedulislam580]

Thanks Pedro, this is an amazing tutorial.

[@josetuz]

Thank you very much from Argentina!

[@KingsleyOkeze]

At 18:00 I keep having issues there, it didn't display that a User is connected when I logged to the console, how do I fix it?

[@bartoszszmit]

PedroTech, is this course like full chat app course or maybe kind of your free youtube short version? Cause in nerest future I will need node.js full chat app course to learn. Are you?

[@chisomeze3884]

Pedro thanks so much , you saved my life frr ❤❤❤❤

[@yadhukrishnacu3004]

40:10 didn't get the message in client side

[@sahil007-d2h]

same problem bro , did you got any solution ?

[@yadhukrishnacu3004]

@@sahil007-d2h yeh bro i was just missed to join the id. Just make sure you joined the room or id whatever

[@tiny_mystery]

Great and helpful video bro ! Keep doing that.

[@shakilpendhari4525]

I love this video very nicely explains everything.

[@k303k]

Love you bro!!! I've learned so much from your channel

[@zude1100]

Thanks, I finally managed to fix the cors issue I faced for over a day.

[@Mani-fb3mi]

Practical AFFFFFFFF thx pedro

[@alexkoval2582]

You explain really clear! Amazing!

[@zeeshanlatif8751]

It's perfect. Informative and Interesting!

[@growthhacking9126]

Pedro my bro thank you for this lovely tutorial, can you please make a tutorial on real time location tracking like delivery apps. Where you can see real time product arrival.

[@apeiron4409]

love your tutorials always

[@aqsaazfa1687]

I subscribed this channel at first video cool channel

[@PedroTechnologies]

Thank you :)

[@porlearktuy4711]

Welp, I was bashing my head against the wall trying to make a chat app like this the other day and caved in to look for help today. Talk about a coincidence.

[@PedroTechnologies]

Hahaha glad you liked the video!

[@mansourmalekzadeh8728]

Amazing! thanks a lot dear Pedro.

[@rawansayed8707]

That was really really helpful. i learn alot from you! Thanks!!

[@valeriastorozhuk48]

thank you so much for your amazing tutorial! very specific! love it!

[@eddymono1724]

Nice video, It is clear and understandable.....I love this tutorial

[@kebabkent5884]

If I wanted to make my own website that anyone could access with this as the base code, how would I go about doing that? Ive tried with firebase but I just cant make any sense out of it. Please help!

[@nataliamikhieieva8131]

Thank you Pedro !! very cool !

[@JaiVang-b4q]

What extensions are you using to automatically space, add semicolons, and change ' to "?

[@nidhishettigar6981]

WARNING in src\App.js Line 4:7: 'socket' is assigned a value but never used no-unused-vars I am getting this warning at 17:49 from video and not able to connect to server. Please help.

[@quintonpangyixuan3990]

Check and see if this works for you?kzbin.info/www/bejne/jqe0mJaPZ9SNq8k

[@_dikay]

glad i found this video👍

[@VladBatalin]

hey thenks for perfect lesson! keep it up the good work!

[@nhatminh452]

i love this

[@ShubhamPatil-rr4on]

This is amezing ♥️♥️♥️♥️

[@sarthaksingh9183]

thanks brother you made my day

[@ruizhu5899]

it's very amazing video thank you, and can i know if you solve the small bug in the end, that the user will rerender 3 times after we used controll element for clearing value after emite event, thank you

[@nurhamsah_tech]

thanks bro, you r always be my favorite 💯💯

[@misfitgems]

This is dope bro!

[@arysetansy4966]

Oh Pedro, meu querido, cade a parte de desconectar? Especificamente um usuario...?