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

แชร์
ฝัง
  • เผยแพร่เมื่อ 17 ธ.ค. 2024

ความคิดเห็น • 256

  • @mikealejandro3938
    @mikealejandro3938 2 ปีที่แล้ว +77

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

    • @navedoesthings
      @navedoesthings 2 ปีที่แล้ว +2

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

    • @mohamedali9249
      @mohamedali9249 ปีที่แล้ว +3

      It will never end

    • @VinayTandale
      @VinayTandale ปีที่แล้ว

      same

    • @krishnaprasanna3032
      @krishnaprasanna3032 2 หลายเดือนก่อน

      Hello Mike , I am fresher candidate aspiring to become Developer. I have learned MERN Stack, SQL , JAVA etc... Could you please tell me which technologies and tools I have to learn to crack a Developer role .

    • @Arcane_Dragon878
      @Arcane_Dragon878 หลายเดือนก่อน

      ​@@krishnaprasanna3032 try to get good at a few rather than be mediocre at many
      Try and improve a lot in the things you know right now and as time goes on add things to it

  • @miladbannourah7798
    @miladbannourah7798 ปีที่แล้ว +8

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

  • @mdabdurrahman7626
    @mdabdurrahman7626 2 ปีที่แล้ว +21

    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.

  • @ShadyRonin
    @ShadyRonin ปีที่แล้ว +10

    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
      @cheapcyclist7824 11 หลายเดือนก่อน

      100% agree with this comment. Thanks Pedro

  • @KiprutoR
    @KiprutoR ปีที่แล้ว +2

    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

  • @freedebris
    @freedebris ปีที่แล้ว +1

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

  • @supersaiyan2
    @supersaiyan2 8 หลายเดือนก่อน

    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.

  • @dweebycat9929
    @dweebycat9929 2 ปีที่แล้ว +1

    Thanks again!

  • @theartisticjs
    @theartisticjs 2 ปีที่แล้ว +6

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

  • @medhabibbenyoussef9391
    @medhabibbenyoussef9391 7 หลายเดือนก่อน

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

  • @snackdonw
    @snackdonw 2 ปีที่แล้ว +1

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

  • @natnael-oqp5082
    @natnael-oqp5082 2 ปีที่แล้ว +37

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

  • @NOTHING-en2ue
    @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 ❤

  • @minhthien8651
    @minhthien8651 2 ปีที่แล้ว +3

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

  • @kimberlyvillarmente8239
    @kimberlyvillarmente8239 2 ปีที่แล้ว +1

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

  • @bryanronnie6765
    @bryanronnie6765 ปีที่แล้ว

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

  • @madhanrock5390
    @madhanrock5390 2 ปีที่แล้ว

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

  • @chandruloganathan3725
    @chandruloganathan3725 11 หลายเดือนก่อน

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

  • @sagarvavadiya5252
    @sagarvavadiya5252 ปีที่แล้ว

    best video to understand concept of socket io in half hour

  • @dinghanlim7735
    @dinghanlim7735 2 ปีที่แล้ว +9

    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 :)

  • @misterfreezeur4622
    @misterfreezeur4622 ปีที่แล้ว +1

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

  • @subhamshaw1726
    @subhamshaw1726 ปีที่แล้ว

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

  • @minhbaotran180
    @minhbaotran180 2 ปีที่แล้ว +1

    thank you very much, this will help me do my hard project at my university, thank youu

  • @ĐiệpXuan-g9u
    @ĐiệpXuan-g9u 2 หลายเดือนก่อน

    very detailed, I find it very easy to understand and helps me go deeper into it more easily, thank you bro😘

  • @sudo_ayush
    @sudo_ayush 2 หลายเดือนก่อน

    This was exceptionally to the point explanation, really the best @Pedro Tech

  • @ankushchavhan1332
    @ankushchavhan1332 2 ปีที่แล้ว +3

    Really waiting for it 🙂

  • @irahazda
    @irahazda ปีที่แล้ว +1

    At 21:53, are you sure using 'socket' as dependency to useEffect is the right thing? I am getting warning that having socket as dependency doesn't actually do a thing. The socket variable actually sits outside of the App component so I am not sure how using it as a dependency even make sense.

    • @xsova113
      @xsova113 11 หลายเดือนก่อน

      for me it works because if i don't put socket in the dependancy, when I click the button, frontend won't make any update and show the alert message because the socket recieve_message function in the useEffect is not running until it sees the socket thats in the dependency has been triggered.
      EDIT: Actually now it works without the socket dep. interesting

  • @prathamesh3299
    @prathamesh3299 2 ปีที่แล้ว +1

    You made my life easy my man your so great🤞

  • @ayushdumasia
    @ayushdumasia 6 หลายเดือนก่อน

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

  • @poojatikhe2046
    @poojatikhe2046 8 หลายเดือนก่อน +1

    WOWWW, simply a nice explaination. Thank you

  • @TheOceanLoader
    @TheOceanLoader 2 ปีที่แล้ว

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

  • @k303k
    @k303k ปีที่แล้ว

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

  • @Ali-Aziz-official
    @Ali-Aziz-official ปีที่แล้ว

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

  • @mohitvishwkarma9391
    @mohitvishwkarma9391 ปีที่แล้ว

    Great, simple, crisp explanation❤

  • @samialvi4226
    @samialvi4226 ปีที่แล้ว

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

  • @funfunfun18
    @funfunfun18 2 ปีที่แล้ว

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

  • @dedon45
    @dedon45 ปีที่แล้ว

    Perfect introduction, thanks a lot man :D

  • @namtranhai8150
    @namtranhai8150 ปีที่แล้ว

    Short but really informative! Thanks a lot

  • @Mast3rBruc31
    @Mast3rBruc31 2 ปีที่แล้ว

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

  • @matheustran8009
    @matheustran8009 2 ปีที่แล้ว

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

  • @BROOKnim
    @BROOKnim ปีที่แล้ว +1

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

  • @ThColinPereira
    @ThColinPereira 2 ปีที่แล้ว +1

    This is amazing! Great looking thumbnail btw

  • @billblair3155
    @billblair3155 2 ปีที่แล้ว

    Super Cool. Thx another Pedro!🤓

  • @Lagtcham
    @Lagtcham 2 ปีที่แล้ว +1

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

  • @blackwolf542
    @blackwolf542 ปีที่แล้ว

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

  • @matheuscorreiadarocha1801
    @matheuscorreiadarocha1801 ปีที่แล้ว

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

  • @vicsystems
    @vicsystems 11 หลายเดือนก่อน

    Thanks for taking the time to really break this down

  • @dryoldcrabman6890
    @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.

  • @rogermax8063
    @rogermax8063 2 ปีที่แล้ว +2

    Pedro, ótimo vídeo, porém estou com um problema, não estou conseguindo fazer o chat funcionar fora do local host, tenho uma hospedagem para onde mandei o site, alterei onde estava localhost pelo meu domínio, porém não funciona, você sabe como posso fazer com que o chat funcione na minha host, fora do localhost, para pessoas poderem usar o chat em dispositivos diferentes?

  • @bentoby2123
    @bentoby2123 10 หลายเดือนก่อน

    I love you bro LMFAO
    Learned so much in 30mins

  • @amitnino
    @amitnino ปีที่แล้ว +1

    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?

  • @ursuadrian2880
    @ursuadrian2880 2 ปีที่แล้ว +3

    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.

  • @rasul3d
    @rasul3d ปีที่แล้ว

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

  • @ZadSoleimaninia
    @ZadSoleimaninia ปีที่แล้ว +1

    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!

  • @webapi5513
    @webapi5513 2 ปีที่แล้ว

    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

  • @KondzioTVstudio
    @KondzioTVstudio ปีที่แล้ว

    I have never used sockets but its look great, thanks for video

  • @mohammedjazeel585
    @mohammedjazeel585 6 หลายเดือนก่อน

    best tutorial about socket io, thank u sir 👍👍

  • @Epsio0
    @Epsio0 ปีที่แล้ว +1

    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

  • @AbhishekKumar-md2zq
    @AbhishekKumar-md2zq 2 ปีที่แล้ว

    Hey thanks, your sokcet video is best over the internet

  • @musm404
    @musm404 2 ปีที่แล้ว

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

  • @malikmukhtar1711
    @malikmukhtar1711 2 ปีที่แล้ว

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

  • @AliColak
    @AliColak ปีที่แล้ว

    Pedro what is the const http = require("http"); doing @ 6:38 ? I'm trying to understand the process

  • @iMrM7mdx
    @iMrM7mdx 2 ปีที่แล้ว

    this is an awesome tutorial. well done pedro

  • @d4tto92
    @d4tto92 2 ปีที่แล้ว +1

    მადლობელი, კარგი ვიდეო იქნება.

  • @dhriteshkumar1786
    @dhriteshkumar1786 2 ปีที่แล้ว +1

    thanks bro for amazing explanation !!

  •  10 หลายเดือนก่อน

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

  • @siphillis
    @siphillis ปีที่แล้ว

    Absolutely superb content and delivery.

  • @mihantharindaedirisinghe9532
    @mihantharindaedirisinghe9532 2 ปีที่แล้ว

    this tutorial really helped me out, thankyou so much

  • @Adnan-rz9gm
    @Adnan-rz9gm 2 ปีที่แล้ว

    thank you for the tutorial, though you seem to have missed out on clearing socket.on listener by returning socket.off in the useEffect (memory leak?)

  • @easonhuang4031
    @easonhuang4031 2 ปีที่แล้ว +1

    nice tutorial, subscribed!

  • @ItsMrxSean
    @ItsMrxSean 2 ปีที่แล้ว +1

    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?

  • @MaduVerdinhas
    @MaduVerdinhas 9 หลายเดือนก่อน

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

  • @tomasbuzeta3591
    @tomasbuzeta3591 ปีที่แล้ว

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

  • @junaid_arif
    @junaid_arif 2 ปีที่แล้ว

    great and very helpful tutorial
    Thanks Pedro

  • @스테디-k6b
    @스테디-k6b 2 ปีที่แล้ว +1

    very goood explanations thanks

  • @abhaytiwari6411
    @abhaytiwari6411 2 ปีที่แล้ว +2

    Big fan 😉 Bro you never disappoint us.

  • @discoverthecode2286
    @discoverthecode2286 2 ปีที่แล้ว +2

    Thanks bro you are a legend i leart ot of from you dear

  • @p1k1m4ru
    @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?

  • @RV-kl2wl
    @RV-kl2wl 2 ปีที่แล้ว

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

  • @zainulkhan8381
    @zainulkhan8381 ปีที่แล้ว

    Great explanation, keep up the good work

  • @hafezfhmi
    @hafezfhmi 2 ปีที่แล้ว

    Awesome! Keep it up with the videos!

  • @vamsirayapaneni
    @vamsirayapaneni 5 หลายเดือนก่อน

    Loved this one. Thank you

  • @elliotheath9408
    @elliotheath9408 2 ปีที่แล้ว

    chillhop ending, i like

  • @pierovicenti9297
    @pierovicenti9297 ปีที่แล้ว +1

    what if I want to publish it live? What should I use instead of port 3000 and 3001? I am a bit confused on this

  • @jaeivanromero2109
    @jaeivanromero2109 ปีที่แล้ว

    🕺 gREAT Vid !!!!!

  • @loulou81400
    @loulou81400 2 ปีที่แล้ว +1

    Eu, another great tutorial, I actually made a social network with the help of your series on nodejs react and mysql.. Do you think it's possible to add this kind of app with all the code I have already.. I was thinking about adding this kind of functionality but it's not easy with an existing front-end and back end already created.. Thanks for your amazing job here.. Greetings from France!

  • @pinkladychannel834
    @pinkladychannel834 9 วันที่ผ่านมา +1

    Means a lot bro...❤

  • @dweebycat9929
    @dweebycat9929 2 ปีที่แล้ว

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

  • @ilirbajrami2902
    @ilirbajrami2902 2 ปีที่แล้ว +2

    Very nice explanation! But, can you make a tutorial implementing this with Nextjs API routes and using another use case (receiving data from a streaming API for instance) since literally every socket io on internet is about building a chat app.

    • @navedoesthings
      @navedoesthings 2 ปีที่แล้ว

      you can pretty much follow along with this video since there is a more traditional way of starting your express server and initializing the next build.

  • @juanluiss2526
    @juanluiss2526 2 ปีที่แล้ว

    Very nice explanation, thank you! 😄

  • @fahadzidan8591
    @fahadzidan8591 2 ปีที่แล้ว +1

    Well understood !

  • @andikakurniawan4188
    @andikakurniawan4188 2 ปีที่แล้ว

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

  • @ShrikrishnagopalSharma
    @ShrikrishnagopalSharma ปีที่แล้ว

    very nice explanation pedro brother'

  • @Joseph-do9ue
    @Joseph-do9ue 2 ปีที่แล้ว

    Keep going man, very cool

  • @jeff1571
    @jeff1571 2 ปีที่แล้ว +1

    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 :)

  • @josephuzuegbu7431
    @josephuzuegbu7431 11 หลายเดือนก่อน

    So easy to understand 🎉

  • @karantandekar1181
    @karantandekar1181 2 ปีที่แล้ว +1

    can u implement little chat app in firebase with socket and react it would be very helpful

  • @banjotola4898
    @banjotola4898 2 ปีที่แล้ว

    Great one there! Thanks

  • @aleksandrar7955
    @aleksandrar7955 ปีที่แล้ว

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

  • @ethangordon3935
    @ethangordon3935 ปีที่แล้ว

    Great video thank you Pedro!