Realtime Chat With Users & Rooms - Socket.io, Node & Express 

This video is VERY underrated. Not only does Brad show you the code, he explains everything and even does some debugging. I know this comment came 3 years late. +1 like

Thanks, Brad! Your tutorial helped me to develop the skills of web development in a faster way and at last, I got a job from a company before being a graduate. Again Thanks a lot! You are the tutor of professional life for many students like us.

Our web development teacher did something like this. He opened the chat to the whole class so we could try it and I thought 'mmm I wonder if he's sanitizing HTML before broadcasting the messages', so I tried to send an H1 and... it worked. Not two minutes after the whole class was sending pictures (what kind I'll leave to your imagination), changing the CSS and even crashing the app. One of the funniest days in the course, for sure.

Thanks for a great tutorial. The "rooms" stuff which is what I really needed starts at 34:20. One quip (but it applies to all coding videos I've seen) is that I'd like to see a totally bare-bones explanation first and then, in a series of steps, build on that up to the final end product like was made here. That would help me separate the essential from the incidental, but other than that, this was a super useful and well thought out presentation of a difficult subject.

Brad: “Hello John” *John has left the chat.. John wanted none of that 😂

Hi Brad, I am curently on the MERN stack, will finish it later today and I can't wait to build with you this chat app :D, Thank you again for your work!

Ayyyy, I'm building a messaging app right now with the principles from your MERN course, and what do I see this morning? You put out a sockets video. Legend.

Hope everyone is staying safe and trying not to go nuts :) Here is a little project to keep you busy for a little bit and take your mind off of everything Also should be: const PORT = process.env.PORT || 3000;

Oooh refreshing some of my Node skills at the moment so this is perfect timing! Looking forward to it, keep up the awesome work Brad 💜

Brad you're honestly such a gift to the developer community! Your content has helped me more than anything else! Have the greatest 2021 and stay safe!

this is the only channel where I feel compelled to like the video before I've even watched it. keep up the great work

Spent about half an hour debugging it, turns out I had a "user", instead of "users". Great video thanks.

Amazingly well done tutorial! This was my first experience with web sockets and I had no issues understanding the process. I am excited to add more features. Thank you!

Thank you Brad! You're the man as always. Keep your head up and I'm looking forward to talking to you more on patreon.

i only found your videos lesson this week man you are the best, simple easy and very clear and u give all material for easy learn thanks too much, keep like that i recomend your channel 4 everyone

Oh god! My man Brad can read my mind or what? I just started to build a Chat app with Socket.io and Express yesterday.

So cool that you've actually debugged your app and showed it to us. I mean, it is very nice you didn't cut that part. Shows the real process as is

I'm sorry, but at 6:18 a mistake was made: PORT never will be equal process.env.PORT. Most likely Brad wanted to write the following: const PORT = process.env.PORT || 3000;

everyone says socket io is really hard to implement. seeing your this video took the fear out of me. thank you. your teaching style is so amazing. ❤

Hey Brad, you're awesome. I think you have a great positive impact on society with the free content you put out! It's also cool to see more backend tutorials like this coming. *Now* *to* *my* *Question* : In one of your last videos, you mentioned that you're planning to go a little more into *coding* *challenges* . I am currently looking to learn about Algorithms and Data structure but *in* *a* *practical* *and* *project-based* *way* . This could be something like cloning a repo on building a small example dataset/project to then implement some sorting algorithm or and learn how to make use of different algorithms and optimizations. I was wondering if you can recommend any *resources* in that realm or produce some content like this. I would be happy to help you to produce such content. Perhaps there is an open-source-way we can all collaborate on this. Cheers Mortiz ✌🏼

Hands down , The Best Teacher on RU-vid .

Cool. I will try to implement it in React and add to your DevConnector MERN stack course.

I'm so glad to find this tutorial, I was actually studying about websockets hours ago, and setting up a lot of documentations this lesson will probably make it easier to understand, thank you, your content had already reached Africa

I can't wait to go through this tutorial. Thanks, Brad! Government: "Coronavirus is out and ya'll gotta stay home and find something to do" Brad: " Ooo, I'm gonna teach people how to create a chat room so they can hang out online... 😁"

You are so helpful! I love you. Please never change. I can see that you are doing this for the sake of teaching and money is not a priority which reflects on your good quality work. I truly appreciate that!

You're the best, Brad! I just bought a bunch of your Udemy courses while I practice social distancing. I can't wait to do this project, too.

By far a better version of a good chat-app tutorial Ive looked so far. Subscribed.

Brad could you continue this tutorial by connecting everything to database. Also I'd never actually uploaded my projects to any kind of hosting so it worked online, I don't really know how to do that, could you use some free web-hosting to do tutorial of that?

Brad, you are awesome! I have been looking at similar tutorials all week and there is nothing as useful as this one by far. I wish RU-vid had a way to rank videos within categories, this one would top the Realtime chat list. I wish you all the success in the world.

wow, I don't know. But this is what I need now. Node Express Socket.io! Thank you!

just finished watching, really appreciate your excellence in building my mental models and muscle memories, not to mention the perfect way to jumpstart my project... after the tutorial, now my hard work begins 🤓

Possibility of XSS? innerHTML is used. Not much to be stolen but you can still execute stuff to like crash browser

The bast part of your videos is that you are always to the point and we always learn a lot from them.Thanks a lot!

Great job like always. Just can you add call/video feature to this project and how?

Great tutorial! I don't have much experience and could understand almost everything just by the video itself and a bit of documentation.

I'm new to coding, this project is helping me alot, the only help I need is how to store all message in database so that when a new user joins or old users join again they could see previous messages. Please help me with that, Thank you

Who could possibly downvote this. Thank you Brad!

Did I miss connecting with MongoDB ? Part ||

Just now finished the app Thanks so much really enjoyed learning from this keep up the good work.Stay safe and thanks once again for the distraction from crazy times. hope you and your family are save and all the subscribers are as well.

waiting for mongodb version please make it fast you are such a life saviour

Thanks Brad, I used this code to build a chat component for my React app. Instead of adding the tag I had to install socketio-client on the front end and change the submit actions of the index.html page and chat.html pages.

Haven't used express for a while since I am busy in school, I just realized I forgot a lot of simple things. Thanks for this I recalled some!!

how do you integrate a database to store the messages, users, etc.

This is a fantastic tutorial, instructions are clear and easy to follow, thank you Traversy Media! I followed on and was able to create a web chat that functions as expected. Now I'm going to build upon it, give it a database and hopefully add more functions to it. Thank you so much!

06:19 process.env.PORT should come first before the 3000

One of the best tutorials I ever have seen! Everything was neat and clean and I did not get bored at all. learned some interesting points. thank you.

Sir can teach this project as full stack that is with react and mongodb

Perfect timing to release this really interesting little project, thank you, lots of fun completing it.

Thank you! This is I was getting really frustrated trying to go through socketio documentation but this is 1000x better.

I just want to say, God bless you for the wonderful work

Aamazing stuff as usual! I've watched this video like 37 Times and I always get something new out of it. Thanks for sharing! Can't wait too see what you come up as a follow up. You're the man!

Wanted to learn about WebSocket for a while and this video is awesome!

If it wasn't for Brad Traversy I will never be a developer. Thanx a lot dude.

Hello Brad! Hope you are safe and healthy! We are all lockdown at home. Perfect time to watch all of your videos!

Thanks for your hand-to-hand sharing that how to build the chat room by Socket.IO, I learn a lot 😀 Hopefully, we're all good in this time. 💜

Brad, as always you are the MAN! Want to share a tweak I did - Instead of moment.js, I used this function for HH:MMap time format: function getTime() { const currTime = new Date(); return currTime.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true })// you can add .toLowerCase().replace(' ','') too }

Really helpful project to get into while you are quarantined. Thanks!

I've been looking for a good socket.io lesson so long!! thank you so much Brad!

just finish following the video. thank you, Brad. I can't wait to learn more about Nodejs contents from you!

I love the way you teach... Thank you so much sir for sharing indispensable knowledge.

Brilliant sir. I watched many videos on RU-vid, but this is very helpful.......

Wow!! You are amazing!! The explanation is so clear, and this exercises help a lot in the understanding of all those tools!! Thanks a lot for sharing!!

This was incredibly thorough and helped teach me a ton along the way, big noice.

I suggest this video for everyone! Waiting for similar videos!

mIRC revolved again with node and socket.io, Thanks Brad

this tutorial is very intuitive and easy to follow. Thanks for sharing.

Thank you for this tutorial! This is the first tutorial I have seen with this good explanation and help.

One of the best explanations and videos ever made on this topis Thanks a lot!!!!

This was wonderful needed this exact tutorial for a job. Thanks so much Brad... thanks so much for everything bro. Please Stay Safe :) we need you to keep helping us out after this craziness around the world ends. God bless you

This man is so good at explanation and writing code :)

Love your stuff man. Been watching you for years. Stay healthy!

At 56:40 I think everything was already working perfectly fine. It was just that one user was in Python and one in Javascript :) The Join method works without a string as well, although it would combine the values separated by a comma, so it would still look wonky.

Your videos are awesome helps to create a better cv thank you man

Brad, during this pandemic I am binge watching all of your tutorials! I hope you and your family stay safe and healthy as well

Hi Brad. I am your huge fan. I love your teaching style and your content. I humble request to you please make video on most commonly used rxjs operator in angular with practical guide. Rxjs operators are most confusing for me.

Who on Earth dislikes a video from Brad Traversy???

I wanted to build this yesterday, now brad gave me. Thnx

Appreciate that you spent your time for making this video. It is very helpful

Thank you! This was an awesome project and experience =D Had a really good time writing this, you're an awesome instructor ..

This is an amazing tutorial. Now i know a little about Socketio and can further research on it. Thank you sir !

Awesome tutorial as always! Would love to see you continue this chat app into a series. Possibly implementing a login system with Google, Facebook, and Twitter?

Very good presentation!!! Merci beaucoup, c'est très bien expliqué. Vous méritez des encouragement. Thank's for the explanations🙏

Just a tip to people who are just starting out. Even if tutorials like this might seem to advanced for you, just code along anyway. You might not understand everything, but you'll still pick up things here and there that will help you out in the long term.

my observation: you can write and execute HTML code in the chat for eg: type code in the input and press enter, u will see the chat has taken the role of HTML. i hope u understood :)

God bless you Brad. Been waiting for this for long.

Thank you for the tutorial! It took me awhile to figure out why I was getting bugs. But it all work out

Awesome i have my own chat app ......it took a while but listening to you has been quite the experience thanks yo!!

This was actually very helpful. Thanks for putting this together.

You are one of the best teachers Brad :)

" But we are doing this all vanilla javascript" - Brad 💪 Thank you so much!

Thank you brad, it's an amazing tutorial. You're so generous.

This video is really really great ! Your explanations are very clear and understandable, thanks a lot you saved my day :)

Just completed it, thanks for the tutorial. If you follow the instructions step by step, there is a little hickup between minute 10 and 14. Tthe check on 11:54 doesnt work without the complete io.on('connection',.... function on line 14 in server.js which is complete enough around minute 14.

Thanks for the tutorial Brad! This is a cool app using socket.io. Thanks for sharing it with the community and stay safe!

@25:59 this is what I been looking for, thanks so much

Hi I'm a follower of yours from Italy. This video gave me the idea to rebuild it using python and Django channels along with websocket. Anyway since node js remains pretty unknown to me PLEASE make another video with mongodb integration and so on. Hope you guys all over the best. Stay safe, here it's really no fun the situation.

Notification from Brad? This must be good ^^ Thanks Sir Brad. ^^ Love lots from Philippines.

Good god Brad you're a machine. Cheers from Spain, stay safe out there.

you are awesome for the web application...........i am so glad and impress to your watching application...many many thnx

Good job Brad, i was just thinking about the same kind of project and you made it. Awesome 👍