React Chat App Using Socket.IO | Socket IO Tutorial

📞 If you would like to schedule a mock interview with me, you can email me at

AFFILIATE / REFERAL LINKS
--TP-Link AC1900 Smart Wireless Router - Beamforming Dual Band Gigabit WiFi Internet Routers for Home, High Speed, Long Range, Ideal for Gaming (Archer C9)

--Blue Yeti USB Mic for Recording & Streaming on PC and Mac, 3 Condenser Capsules, 4 Pickup Patterns, Headphone Output and Volume Control, Mic Gain Control, Adjustable Stand, Plug & Play - Midnight Blue

--Acer R240HY bidx 23.8-Inch IPS HDMI DVI VGA (1920 x 1080) Widescreen Monitor,Black

--USB C Hub HDMI Adapter for MacBook Pro, Multi-Ports Mac Dongle with 4K USB C to HDMI, 7 in 1 USB C Hub, USB C to HDMI SD TF Card Reader 3 USB 3.0 and USB C Power Pass-Through Port Adapters.

--Turtle Beach Recon 70 Gaming Headset for Xbox One, PlayStation 4 Pro, PlayStation 4, Nintendo Switch, PC, and Mobile - Xbox One

[suleyman.gunduz]

The first thing I did was checking the video play speed and after I realized that is your normal talking speed :), great video thanks.

[VedantBorkar-wf]

Thanks for the amazing tutorial!!
I built the chat app and it is working fabulously but the only thing is that the message gets sent and received twice after hitting the send button only once

[rob]

Thank you very much! I was struggling with updating the messages on all instances for days.

[manoj-k]

Thank you very much. Very contentfull video with crystal clear explanation.

[alexskinner]

Hey Chaim! This was a great video on Socket.io, as expected. One quick question about the key being assigned index values when you mapped the messages around the 18 minutes mark. It is my understanding the using an index value is essentially equivalent to just not assigning a key at all. The reason being that React will default to assigning index positions of the array being mapped should the key be left out. So when a user deletes a message in our app it would trigger React's reconciliation algorithm to re-render much more than needed.

So question one, is my understanding correct here?

Question two, if I do understand this correctly, what is a good general solution to assigning unique keys here? I've heard of something called UUID before, maybe that would work well for messages here?

[carefree_ladka]

Can you also add private chat to it ? Like when a user search for another user if they're online, should be able to talk to them (1-1).

[buraktorman]

in the useEffect, your id is returning undefined from the server. Even though connection is good, its not getting what the server is sending on connect. do you know why this might be ?

[kierrboy]

dudeee, thank you so muchh. I learned alot!

[MarsTheProgrammer]

Im not able to get this to work at all... i keep getting polling errors from both the client and server side. both the socket.io version 3 and socketio-client are bugged according to the docs, and the docs for both sucks...

[ishaqorakzai]

where can i get the styles of this project?

[dhairyawadhwani]

can you integrate this chat application with all types of files i.e. images, videos, pdfs etc with socket.io

[ahmadhaidar]

Hello bro, again I need your help... I am using this chat app with nodejs react app and I am finding a lot of problems settings the socket id the same as user id, any help ?

[kusumapakalapati]

That's a great tutorial!!.Can u please help me out ?? While I am running the localhost I got UI, but when I hit send no message is displayed

[yashgoyal]

why u did not show terminal part in react webrtc videos. plz guide me about that

[SilentDrifts]

all youtuber share the same code. one component in the client side + without rooms in the server side.
write some advanced code bro !!

[hidehirookayama]

very nice video, but for some reason, all messages are displayed as sent messages. meaning even incoming messages are display on the right side with pick background....

[symbianizemember]

Can you do a tutorial for a Private message and a Room? Instead of a Global chat.

[thegeeksides]

yo dude nice video, however, i wish you were using a bigger font size for the video, also speaking SLOWER lol.

[adityamysore]

Bruh, you need to talk at a slightly slow pace, english is not my first language :) Otherwise very good tutorials!

[shinji]

Nice video~ thanks for the tutorial~
but man... Try not to listen to Eminem that much...