Realtime Chat With Users & Rooms - Socket.io, Node & Express
Ғылым және технология
In this project we will build a chat app using Node, express & websockets in under 60 minutes
Code:
github.com/bradtraversy/chatcord
💖 Become a Patron: Show support & get perks!
/ traversymedia
Website & Udemy Course Links:
www.traversymedia.com
Follow Traversy Media:
/ traversymedia
/ traversymedia
/ traversymedia
Пікірлер: 949
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
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;
@MULTICODE
4 жыл бұрын
Thanks, please can you make a videos on how to setup laravel and Angular together buy building a small project please
@aniskarim1934
4 жыл бұрын
Thank you Brad
@ln9808
4 жыл бұрын
Thank you so much, Brad, for all your fantastic tutorials!
@ahmedaltaai69420
4 жыл бұрын
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!
@rashidbehnam2139
4 жыл бұрын
Thanks bro , God bless you
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.
Brad: “Hello John” *John has left the chat.. John wanted none of that 😂
@TraversyMedia
4 жыл бұрын
lol!! Screw John
@goldfishbrainjohn2462
4 жыл бұрын
Who is calling me? XD
@sharathm710
4 жыл бұрын
Hey how to connect to server its showing [nodemon] clean exit - waiting for changes before restart 7:56
@nicolasanelli
3 жыл бұрын
@@Kingelodeon you have to configure some build, and then, any javascript/node server should handle it
@adriaanstips1407
3 жыл бұрын
@@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
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.
Perfect timing to release this really interesting little project, thank you, lots of fun completing it.
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
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 💜
@paritoshbatish9984
4 жыл бұрын
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("/");
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!
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!
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 KZread 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.
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!
@yousseftayea2014
3 жыл бұрын
Had you built it?
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.
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.
Cool. I will try to implement it in React and add to your DevConnector MERN stack course.
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 ✌🏼
this is the only channel where I feel compelled to like the video before I've even watched it. keep up the great 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!
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!
@learnsomething9838
2 жыл бұрын
Is it complete project or any other continuation video is there please respond anyone
@Just_one_more-bv3bg
4 ай бұрын
it is complete video@@learnsomething9838
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.
@wingsaber629
4 жыл бұрын
Yeah! It would be excellent to add a Chat feature to his Developer Connector MERN course.
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!
Brad is one awesome dude! Even during a world wide pandemic Traversy Media is able to put out great content/courses.
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.
Spent about half an hour debugging it, turns out I had a "user", instead of "users". Great video thanks.
@PushpakSharmaworkandenjoy
3 жыл бұрын
It happens. 😅
@jimhalpert9803
3 жыл бұрын
Everyone can relate
@yousseftayea2014
3 жыл бұрын
Have you built it?
@fevicoI
3 жыл бұрын
This is what happens when you copy something word for word.
@manavpatnaik1948
3 жыл бұрын
I could hear your "Ohhhhh" when you found that out.😂😂
just finish following the video. thank you, Brad. I can't wait to learn more about Nodejs contents from you!
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!!
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.
wow, I don't know. But this is what I need now. Node Express Socket.io! Thank you!
@thunderboltxtra2811
3 жыл бұрын
does he use react in this...i hvnt watched the video yet just wanted to know
@mssadewa
3 жыл бұрын
@@thunderboltxtra2811 I'm wrong, he doesn't use react
I love the way you teach... Thank you so much sir for sharing indispensable knowledge.
By far a better version of a good chat-app tutorial Ive looked so far. Subscribed.
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;
@sunguru981
4 жыл бұрын
Correct. He usually does that, kind of reversed only in this video actually.
@tannerbarcelos6880
4 жыл бұрын
Reaffirming this comment. He always usually builds the port as seen in your comment correction. Incase anyone is questioning it
@TraversyMedia
4 жыл бұрын
Lol brain fart 😕 sorry about that
@tannerbarcelos6880
4 жыл бұрын
Traversy Media don’t worry, Brad, notice how we all knew what you meant! Your teaching is legendary man!
@maxm1nd
4 жыл бұрын
@@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... :)
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?
@danieloliveira9815
3 жыл бұрын
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.
@GoldNugget
3 жыл бұрын
Pão de Forma I will try it out, thx
Thank you! This is I was getting really frustrated trying to go through socketio documentation but this is 1000x better.
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 🤓
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... 😁"
waiting for mongodb version please make it fast you are such a life saviour
Love your stuff man. Been watching you for years. Stay healthy!
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
Possibility of XSS? innerHTML is used. Not much to be stolen but you can still execute stuff to like crash browser
@jimhalpert9803
3 жыл бұрын
Very easy to XSS this project. I don't like how he just adds the raw message from server to as html to the client. That's textbook level fuck up.
Did I miss connecting with MongoDB ? Part ||
Thank you for this tutorial! This is the first tutorial I have seen with this good explanation and help.
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
Great job like always. Just can you add call/video feature to this project and how?
@starkstraitosTV
4 жыл бұрын
Probably a different library
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
@sharathm710
4 жыл бұрын
Hey how to connect to server its showing [nodemon] clean exit - waiting for changes before restart 7:56
2 жыл бұрын
Hi Soham, Iam facing the same problem. Did you find a good solution? best regards Pete
@gurparkashsinghrandhawa
2 жыл бұрын
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.
@rameezroot5225
2 жыл бұрын
@@7heMech yeah I need help do you have any link from where I can learn that?
Hello Brad! Hope you are safe and healthy! We are all lockdown at home. Perfect time to watch all of your videos!
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!!
06:19 process.env.PORT should come first before the 3000
@tanayraj2991
4 жыл бұрын
Can you explain the reason??
Sir can teach this project as full stack that is with react and mongodb
@CapeSkill
4 жыл бұрын
yes i'd like to see with react and mongodb :)
@adarshpandya
4 жыл бұрын
Brad already have mern stack series
@anshikgupta2993
4 жыл бұрын
@@adarshpandya but there is no socket.io in it
@khandoor7228
4 жыл бұрын
yes exactly what i would like to see
Really helpful project to get into while you are quarantined. Thanks!
This was incredibly thorough and helped teach me a ton along the way, big noice.
how do you integrate a database to store the messages, users, etc.
@maheshmahadar4780
3 жыл бұрын
there is no any database
@The__Leo69
3 жыл бұрын
At the point when we recieve message on server, you can add mongodb etc db query.
@kevinm5898
3 жыл бұрын
@@maheshmahadar4780 Of course there's no database, that's why he was asking how to implement one.
@kumarvishalben
3 жыл бұрын
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.
@therandomsomeone.
3 жыл бұрын
DON'T. this requires a lot of setup to do. stay with this good old simple one.
Thank you so much for all the tutorials. You're the best!!
Awesome Brad, this helps a lot! i can´t wait to see that backend implementation.
Great tutorial! I don't have much experience and could understand almost everything just by the video itself and a bit of documentation.
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?
Wanted to learn about WebSocket for a while and this video is awesome!
This video is really really great ! Your explanations are very clear and understandable, thanks a lot you saved my day :)
Thank you very much for this video! Very well explained and useful to build chats with modern features.
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 ..
I wanted to build this yesterday, now brad gave me. Thnx
This is an amazing tutorial. Now i know a little about Socketio and can further research on it. Thank you sir !
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.
@sharathm710
4 жыл бұрын
Hey how to connect to server its showing [nodemon] clean exit - waiting for changes before restart 7:56
Thanks again for yet another awesome tutorial, keep safe Brad!
I just want to say, God bless you for the wonderful work
God bless you Brad. Been waiting for this for long.
Great job Brad and thanks for the excellent video. Its a master piece really. Thanks again
Good job Brad, i was just thinking about the same kind of project and you made it. Awesome 👍
This was actually very helpful. Thanks for putting this together.
Thanks for the tutorial Brad! This is a cool app using socket.io. Thanks for sharing it with the community and stay safe!
Very cool project. I am integrating it with electron as an IM. Might use Firebase as DB. Thank you Brad for such a cool high level teaching method. Keep safe yourself and family. God bless!
Really appreciate your lessons great content for dealing with quarantine
Thank you brad, it's an amazing tutorial. You're so generous.
Thank you
Just what I needed!! Thank you Brad
Thanks for another great tutorial Brad!
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
Just when I started working with socket.io, perfect timing, very cool
Awesome tutorial! Thanks, Brad!
Waiting for the next part of this video. Thanks Brad.
Man you always come out with the best stuff!
Thanks for the vids mate,they keep me occupied and sane 😃
Very good presentation!!! Merci beaucoup, c'est très bien expliqué. Vous méritez des encouragement. Thank's for the explanations🙏
One of the best explanations and videos ever made on this topis Thanks a lot!!!!
Amazing tutorial Brad !!! Thanks a lot for making it.
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. 💜
well that reminds me why i am following this channel, thanks for the vid and the code
I love your tutorials. Thank you Brad.. i got a job partially bc of this channel.
Thanks Brad this tutorial is super helpful and refreshing.
Good god Brad you're a machine. Cheers from Spain, stay safe out there.
Brad, my main man. Great tutorial, as always.
Thanks @Brad, as always for this great and Excellent work... Appreciate
Notification from Brad? This must be good ^^ Thanks Sir Brad. ^^ Love lots from Philippines.
Great video as always, thank you Brad :)
Great tutorial! thanks! I really like how you explain.
This was awesome mann, I watched the whole thing
Thanks for helping us Brad.....This is awesome
One of the best hours in my life!