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;
brad, my man! 2 days ago I bought your latest course on vanilla js and I must say your teaching style IS AMAZING! I have been a fan since 2016 are you planing on making a nodejs udemy course? I would buy it right away!
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.
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.
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.
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.
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;
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!
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
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 ✌🏼
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... 😁"
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 🤓
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?
You can deploy your project on heroku. It is free (has its limitations of course) and I personally like it very much. It has an intuitive UI and if you have a github repo with your code you can deploy your app in just a couple of clicks :) My first-ever web app I deployed there and that taught me a lot. I hope this helps you as well.
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!
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
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 TH-cam 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.
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.
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.
You could use a queue service which puts the bulk of messages on db once the bulk size is at specific size or time passed since last message is specific 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 }
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!
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!
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.
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.
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!!
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.
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?
![⭐ฮิตในTikTok!! ( หมูเด้ง MooDeng ) Ver. แดนซ์โจ๊ะๆ ReMix BY [ ดีเจกิต รีมิกซ์ ]](http://i.ytimg.com/vi/3krsyfWUeHU/mqdefault.jpg)
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;
Thanks, please can you make a videos on how to setup laravel and Angular together buy building a small project please
Thank you Brad
Thank you so much, Brad, for all your fantastic tutorials!
brad, my man!
2 days ago I bought your latest course on vanilla js and I must say your teaching style IS AMAZING!
I have been a fan since 2016
are you planing on making a nodejs udemy course? I would buy it right away!
Thanks bro , God bless you
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.
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.
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.
Brad: “Hello John”
*John has left the chat..
John wanted none of that 😂
lol!! Screw John
Who is calling me? XD
Hey how to connect to server its showing [nodemon] clean exit - waiting for changes before restart
7:56
@@Kingelodeon you have to configure some build, and then, any javascript/node server should handle it
@@sharathm710 i had errors in my terminal the whole time but all worked out so if your code is exactly the same just test the website
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!
Had you built it?
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.
Yeah! It would be excellent to add a Chat feature to his Developer Connector MERN course.
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;
Correct. He usually does that, kind of reversed only in this video actually.
Reaffirming this comment. He always usually builds the port as seen in your comment correction. Incase anyone is questioning it
Lol brain fart 😕 sorry about that
Traversy Media don’t worry, Brad, notice how we all knew what you meant! Your teaching is legendary man!
@@TraversyMedia I didn't want to belittle this great masterclass in any way. On my part, it was a desire for perfectionism and nothing more... :)
Spent about half an hour debugging it, turns out I had a "user", instead of "users". Great video thanks.
It happens.
😅
Everyone can relate
Have you built it?
This is what happens when you copy something word for word.
I could hear your "Ohhhhh" when you found that out.😂😂
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!
Is it complete project or any other continuation video is there please respond anyone
it is complete video@@learnsomething9838
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 💜
I am new to NodeJS but don't we have to set
app.get("/", ());
and send index.html here
How does it work without app.get("/");
this is the only channel where I feel compelled to like the video before I've even watched it. keep up the great work
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!
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
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.
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
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 ✌🏼
Cool. I will try to implement it in React and add to your DevConnector MERN stack course.
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!!
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.
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... 😁"
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. ❤
Great tutorial! I don't have much experience and could understand almost everything just by the video itself and a bit of documentation.
wow, I don't know. But this is what I need now. Node Express Socket.io!
Thank you!
does he use react in this...i hvnt watched the video yet just wanted to know
@@thunderboltxtra2811 I'm wrong, he doesn't use react
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 🤓
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?
You can deploy your project on heroku. It is free (has its limitations of course) and I personally like it very much. It has an intuitive UI and if you have a github repo with your code you can deploy your app in just a couple of clicks :) My first-ever web app I deployed there and that taught me a lot. I hope this helps you as well.
Pão de Forma I will try it out, thx
By far a better version of a good chat-app tutorial Ive looked so far. Subscribed.
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.
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!
Great job like always. Just can you add call/video feature to this project and how?
Probably a different library
Hands down , The Best Teacher on TH-cam .
waiting for mongodb version
please make it fast you are such a life saviour
Who could possibly downvote this. Thank you Brad!
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
Hey how to connect to server its showing [nodemon] clean exit - waiting for changes before restart
7:56
Hi Soham, Iam facing the same problem. Did you find a good solution? best regards Pete
To anyone who still has this problem, the easiest way to implement this would be to save each message into the database as a message event emits.
@@7heMech yeah I need help do you have any link from where I can learn that?
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. 💜
Did I miss connecting with MongoDB ? Part ||
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 TH-cam 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.
06:19 process.env.PORT should come first before the 3000
Can you explain the reason??
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.
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!
Sir can teach this project as full stack that is with react and mongodb
yes i'd like to see with react and mongodb :)
Brad already have mern stack series
@@adarshpandya but there is no socket.io in it
yes exactly what i would like to see
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.
Hey how to connect to server its showing [nodemon] clean exit - waiting for changes before restart
7:56
how do you integrate a database to store the messages, users, etc.
there is no any database
At the point when we recieve message on server, you can add mongodb etc db query.
@@maheshmahadar4780 Of course there's no database, that's why he was asking how to implement one.
You could use a queue service which puts the bulk of messages on db once the bulk size is at specific size or time passed since last message is specific time.
DON'T. this requires a lot of setup to do. stay with this good old simple one.
hats off man , i did this project today and felt some sense of way again, Thank you so much ❤
Really helpful project to get into while you are quarantined.
Thanks!
Thank you! This is I was getting really frustrated trying to go through socketio documentation but this is 1000x better.
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
}
Brilliant sir. I watched many videos on TH-cam, but this is very helpful.......
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!
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.
Wanted to learn about WebSocket for a while and this video is awesome!
Hello Brad! Hope you are safe and healthy! We are all lockdown at home. Perfect time to watch all of your videos!
If it wasn't for Brad Traversy I will never be a developer. Thanx a lot dude.
Perfect timing to release this really interesting little project, thank you, lots of fun completing it.
I suggest this video for everyone! Waiting for similar videos!
mIRC revolved again with node and socket.io, Thanks Brad
I love the way you teach... Thank you so much sir for sharing indispensable knowledge.
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!
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.
This man is so good at explanation and writing code :)
Very good presentation!!! Merci beaucoup, c'est très bien expliqué. Vous méritez des encouragement. Thank's for the explanations🙏
Your videos are awesome helps to create a better cv thank you man
this tutorial is very intuitive and easy to follow. Thanks for sharing.
just finish following the video. thank you, Brad. I can't wait to learn more about Nodejs contents from you!
This was incredibly thorough and helped teach me a ton along the way, big noice.
One of the best explanations and videos ever made on this topis Thanks a lot!!!!
Who on Earth dislikes a video from Brad Traversy???
I wanted to build this yesterday, now brad gave me.
Thnx
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.
I just want to say, God bless you for the wonderful work
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!!
Thank you for this tutorial! This is the first tutorial I have seen with this good explanation and help.
Appreciate that you spent your time for making this video. It is very helpful
" But we are doing this all vanilla javascript" - Brad 💪
Thank you so much!
Thank you for the tutorial! It took me awhile to figure out why I was getting bugs. But it all work out
I've been looking for a good socket.io lesson so long!! thank you so much Brad!
Thank you! This was an awesome project and experience =D Had a really good time writing this, you're an awesome instructor ..
Thank you brad, it's an amazing tutorial. You're so generous.
I learnt so much from this project. Thank you man..
This is an amazing tutorial. Now i know a little about Socketio and can further research on it.
Thank you sir !
You are one of the best teachers Brad :)
you are awesome for the web application...........i am so glad and impress to your watching application...many many thnx
This was actually very helpful. Thanks for putting this together.
Love your stuff man. Been watching you for years. Stay healthy!
Traversy Media and Chill. 😎🙌 Learning and making while quarantine. Good stuff 💯 stay safe and don't forget to wash those hands 🧼
Just when I started working with socket.io, perfect timing, very cool
@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.
Waiting for the next part of this video. Thanks Brad.
You explained it so clearly and perfectly, thanks
hey while making this tutorial i face error in qs cdn can u help?
Good god Brad you're a machine. Cheers from Spain, stay safe out there.
Thanks for the tutorial Brad! This is a cool app using socket.io. Thanks for sharing it with the community and stay safe!
Great tutorial from Brad, as always.
Reeealy nice! I need to understand more Socket.io, but the video is awesome!
Believe me, I am working the same project and facing trouble. thanks, Brad
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?
Excellent lesson, many thanks Traversy
Thank you very much for this video! Very well explained and useful to build chats with modern features.