Socket.io + ReactJS Tutorial | Learn Socket.io For Beginners

In this video I will be introducing the SocketIO Library in React. We will be using NodeJS and Express to build out the HTTP Socket server, and ReactJS for the frontend.
Code: github.com/machadop1407/socke...
Join our Discord: / discord
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/learn/reactjs-pr...
🐙 GraphQL Course: codedamn.com/learn/graphql-fo...
► Buy Crypto on Coinbase: coinbase-consumer.sjv.io/PedroTech
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/machadop1407
Business Email: [e-mail]
Tags:
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial
Timestamps
00:00 | Intro
01:15 | Setting Up Socket Server
11:04 | Socket Io In React
27:23 | Socket IO Rooms
#reactjs #socket.io

[@miladbannourah7798]

literally the best tutorial on youtube, thanks for making it short and not complecating anything, great job bro

[@ShadyRonin]

Wow man this was very easy to follow, thank you so much! I've seen other tuts and it was sooo overwhelming. You kept it focused on the core fundamentals and basics, and that's exactly what I needed!

[@cheapcyclist7824]

100% agree with this comment. Thanks Pedro

[@KiprutoR]

So easy and straight forward ...other tutorials just throw you off. I've understood socket. Will now try and work on a simple project to test what I've learnt. Thank you, you've earned my sub

[@mikealejandro3938]

Got a job as a dev some months ago, but learning process never stops, thanks for this brother !

[@navedoesthings]

been at it for quite some time...this is a constant in our field, a constant that keeps me focused and excited!

[@mohamedali9249]

It will never end

[@VinayTandale]

same

[@mdabdurrahman7626]

Hello sir, am from Bangladesh. As a web development learner, this is my first visit to your channel. And this is first tutorial I have seen on your channel. I just fall in love with your teaching ability and your tutorial. I'm So impressed. All tutorials are so standard and your teaching ability is so so so good...Take love from Bangladesh. Your pronunciation is very clear which is very convenient for non-English people like us.

[@mdotmungai]

Thank you so much Pedro .. I've been looking for a socket io tutorial for the past week and I'm confident in this one

[@PedroTechnologies]

Hope you like it :)

[@theartisticjs]

Thank you so much. Just what I needed. Not too overwhelming, very informative and helpful. Great job

[@dinghanlim7735]

Thank you for this Pedro! recently subscribed and watched so much of your videos! Was hoping for some content that goes through real time servers, i.e. a simple online game with multiplayer online features; and how we could implement it online instead of just on localhost! once again thank you for the wonderful content :)

[@freedebris]

You are an incredible teacher. Hands down best tutorial on this subject that I have found yet! Thank you.

[@supersaiyan2]

This is the best socket and react tutorial I've ever seen. I like how you explained every basic thing (like the hooks and server) because as a beginner I had no idea what they did.

[@TheOceanLoader]

Brilliant tutorial video. Served me well as a refresher course. One of the few videos I enjoyed watching!

[@minhthien8651]

Cool ! I learned a lot of things from this channel. Thank you Pedro

[@bryanronnie6765]

Wow, ce tutoriel is too good man. Sooo concise and neat. Maintenant je peux développer mon multiplayer game in no time. Merci!

[@kimberlyvillarmente8239]

Hats off! I owed you a lot, this tutorial was the best!!

[@user-sj2pg7tz7i]

Pedro thank you so much for all the tutorials and efforts going to each and every one of your videos, really appreciate your help, it has helped me tremendously!
Quick question:
Would you place a chat app and and api on the same express server? or create 2 different express instances with different ports obviously so that we have different express servers for different purposes?
I've been a frontend dev for quite many years and start getting into backend quite recently and your videos has helped me quite a lot, so thank you so much!

[@medhabibbenyoussef9391]

The only useful socket tutorial in youtube, big thanks bro wish you all the best !

[@subhamshaw1726]

wow really good video. I was struggling with this for last 2 days for implementing in a project. Thank you pedro.

[@madhanrock5390]

This is one of the important topics should be known by web developers! Thanks for this video!

[@misterfreezeur4622]

great video mate, straight to the point & well explained!

[@Mast3rBruc31]

Awesome video! Pedro you have some of the best content on YT! Keep it up!

[@funfunfun18]

Great video Pedro. Exactly what I was looking for - many thanks

[@ItsMrxSean]

Thank you! This is super helpful. Cleared things up for me that I've been stuck on for weeks.
I'm kind of curious what the io information looks like from component to component. Should the client-side socket only be managed in the highest level component (App), or are there other methods?

[@chandruloganathan3725]

Awesome bro it is worked for me I have been tucked in this for more than 2 months

[@natnael-oqp5082]

bro please please make full-stack video using mern stack + AWS S3

[@samialvi4226]

Great Job man that was one of the best tut i ever had.
Keep the great work up

[@Ali-Aziz-official]

Great tutorial, I don't have words to praise your content.

[@NOTHING-en2ue]

before i start i just hated the socket and said why should i use the socket to message then when found your tutorial i loved the sockets, thanks a lot ❤

[@iMrM7mdx]

this is an awesome tutorial. well done pedro

[@snackdonw]

Bro you've saved my job so many times! ♥️

[@poojatikhe2046]

WOWWW, simply a nice explaination. Thank you

[@k303k]

Thanks a lot for this tutorial pedro! Very easy to follow along.

[@mohitvishwkarma9391]

Great, simple, crisp explanation❤

[@jeff1571]

Hey Pedro! Thanks for the tutorials and guides, you really helped me stepped up my coding skills. I'm wondering if you could do Docker tutorial also as I want to deploy a couple of my projects. Have a great day :)

[@prathamesh3299]

You made my life easy my man your so great🤞

[@namtranhai8150]

Short but really informative! Thanks a lot

[@ayushdumasia]

Nice and short explanation , Love from India ❤❤❤❤

[@vamsirayapaneni]

Loved this one. Thank you

[@rahuldeshpande9997]

This was very helpful, thanks!

[@matheuscorreiadarocha1801]

Thank you for this video bro, saved me a lot of time reading documentation!

[@blackwolf542]

I really enjoyed your tutorial. It was very easy to follow and understand.

[@dedon45]

Perfect introduction, thanks a lot man :D

[@tomasbuzeta3591]

Awesome! Thanks for sharing and taking the time to explain :)

[@rasul3d]

This is great. I just wanted to learn this. Thanks a lot.

[@AbdallahAberouchA]

Thank you, that was really helpful.

[@gvbasov]

this is a great explanation! thx!

[@billblair3155]

Super Cool. Thx another Pedro!🤓

[@Epsio0]

Thanks for the tutorial. Just for my own curiosity, how would you print a message to all clients including the person who sent it? As you mentioned, the broadcast method emits an event to all client except for the initial sender

[@dweebycat9929]

Thank you so much, you've explained this video really well!!

[@vicsystems]

Thanks for taking the time to really break this down

[@aleksandrar7955]

That's just awsome! thanks a looot! :)

[@webapi5513]

That's really amazing tutorial for very beginner like me. Thanks a lot.
some videos I watched, They first finish server coding first then frontend coding. it was tap for me understand.
here he code step by step ,
Kindly Upload more details video on this socket io plz

[@mihantharindaedirisinghe9532]

this tutorial really helped me out, thankyou so much

[@ThColinPereira]

This is amazing! Great looking thumbnail btw

[@PedroTechnologies]

Thanks! 😁

[@bentoby2123]

I love you bro LMFAO
Learned so much in 30mins

[@ursuadrian2880]

Hi Pedro!
Nice video.
I have one question:
It is okay to put onChange handlers to inputs? If i console.log the state, after every keystroke the state is updated. Isn't a better idea to update the state in onClick handlers, so, we shouldn't update the state after every keystroke? I'm not sure, that's why I'm asking you this. ^^
Thank you.

[@musm404]

Bro. you are a lifesaver. keep up the good work.i

[@siphillis]

Absolutely superb content and delivery.

[@sagarvavadiya5252]

best video to understand concept of socket io in half hour

[@mohammedjazeel585]

best tutorial about socket io, thank u sir 👍👍

[@zainulkhan8381]

Great explanation, keep up the good work

[@matheustran8009]

I wish you posted this sooner, would’ve saved me a lot of time XD

[@avi_mukesh]

Very helpful tutorial, thank you so much

[@MaduVerdinhas]

Great class and very easy to follow, thanks @PedroTech!!
Regards from a fellow brazilian o/

[@ankushchavhan1332]

Really waiting for it 🙂

[@PedroTechnologies]

:)

thank you, you have an amazing approach to teaching! very inspiring

[@triumphadeniran7335]

very good, helped me so much, thanks

[@somecompany3506]

Thank man! You are great!

[@BROOKnim]

Thanks man , saw this any implemented online playing for my game

[@user-zh1om2bq3n]

Help me a lot. So many thanks.

[@dhriteshkumar1786]

thanks bro for amazing explanation !!

[@RV-kl2wl]

Very very good channel 👍👍. Keep up the good work.

[@juanluiss2526]

Very nice explanation, thank you! 😄

[@christopheanfry2425]

Thank you so much for your videos very helpful like the way you explain. Nice job 👍

[@malikmukhtar1711]

What a nice tutorial, keep up the good work.....damn your network is fast

[@osandaadithya]

love you bro.. You save my day

[@dryoldcrabman6890]

thank bro you are cool. This really help. I was mad at world. But now world less bad. All becaise video is good of qauility and now I do project. you are the goodness of the yourtube. and this make me happy day.

[@hafezfhmi]

Awesome! Keep it up with the videos!

[@ethangordon3935]

Great video thank you Pedro!

[@roykim9033]

thank you!! this is the perfect tutorial!

[@Lagtcham]

Greetings from Colombia! thanks for the video. One question, why put socket in the useEffect dependencies if its ref is never going to change?

[@josephuzuegbu7431]

So easy to understand 🎉

[@Jonsy]

Thank you so much for that. clean tutorial.

[@andikakurniawan4188]

great video. it's easy to follow and it's working....

[@kumaravelrajan]

Great tutorial. Thanks a ton :D

[@easonhuang4031]

nice tutorial, subscribed!

[@amitnino]

Hey, cool concept, never heard of SSE. How would you secure the connection and make sure the events you received are from a trusted source?

[@hustejnazef]

Awesome thanks man!

[@AbhishekKumar-md2zq]

Hey thanks, your sokcet video is best over the internet

[@ShrikrishnagopalSharma]

very nice explanation pedro brother'

[@Joseph-do9ue]

Keep going man, very cool

[@mohammedjoubba318]

Awesome course thank you very much

[@p1k1m4ru]

this is very good. Thank you for the stuff Pedro. I do have a quesiton. If i am connecting to external websocket do i need backend?

[@thatnaman]

Awesome tutorial. Thanks.

[@node_python_lover454]

awesome tutorial!
thanks so much!

[@minhhung-kimwy5004]

thanks for everything!!! thank you so much!!!

[@amirrezamoraveji5174]

Thank you for this excellent content, I found it very useful

[@elliotheath9408]

chillhop ending, i like

[@user-fg6wy6mc1q]

very goood explanations thanks

[@Suero]

Me ajudou bastante, valeu mano! Suceso com o canal top.

[@krishankumar-qw9bc]

thnks bro you've done great job