Realtime Chat With Users & Rooms - Socket.io, Node & Express
HTML-код
- Опубликовано: 3 окт 2024
- In this project we will build a chat app using Node, express & websockets in under 60 minutes
Code:
github.com/bra...
💖 Become a Patron: Show support & get perks!
/ traversymedia
Website & Udemy Course Links:
www.traversyme...
Follow Traversy Media:
/ traversymedia
/ traversymedia
/ traversymedia
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.
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.
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
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
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.
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.😂😂
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... :)
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 RUclips 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!
Had you built it?
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... 😁"
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
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.
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!
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.
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.
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.
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
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!
Cool. I will try to implement it in React and add to your DevConnector MERN stack course.
If it wasn't for Brad Traversy I will never be a developer. Thanx a lot dude.
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 ✌🏼
Hello Brad! Hope you are safe and healthy! We are all lockdown at home. Perfect time to watch all of your videos!
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 finish following the video. thank you, Brad. I can't wait to learn more about Nodejs contents from you!
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
mIRC revolved again with node and socket.io, Thanks Brad
Possibility of XSS? innerHTML is used. Not much to be stolen but you can still execute stuff to like crash browser
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.
Brad, during this pandemic I am binge watching all of your tutorials! I hope you and your family stay safe and healthy as well
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.
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.
06:19 process.env.PORT should come first before the 3000
Can you explain the reason??
I wanted to build this yesterday, now brad gave me.
Thnx
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
Appreciate that you spent your time for making this video. It is very helpful
Did I miss connecting with MongoDB ? Part ||
This is an amazing tutorial. Now i know a little about Socketio and can further research on it.
Thank you sir !
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("/");
Very good presentation!!! Merci beaucoup, c'est très bien expliqué. Vous méritez des encouragement. Thank's for the explanations🙏
waiting for mongodb version
please make it fast you are such a life saviour
God bless you Brad. Been waiting for this for long.
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?
Awesome i have my own chat app ......it took a while but listening to you has been quite the experience thanks yo!!
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.
You are one of the best teachers Brad :)
Great job like always. Just can you add call/video feature to this project and how?
Probably a different library
Thank you brad, it's an amazing tutorial. You're so generous.
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.
Brad, my main man. Great tutorial, as always.
this video was brilliant mate, I am currently doing a bootcamp in the UK and this has been invaluable learning for our project! Did you ever get round to doing the database add ons? Hope you are well dude!
The best one in the world, thank you Brad.
21:40 This is why I like Traversy Media 😂
Thanks for the vids mate,they keep me occupied and sane 😃
Thanks for helping us Brad.....This is awesome
Traversy Media and Chill. 😎🙌 Learning and making while quarantine. Good stuff 💯 stay safe and don't forget to wash those hands 🧼
Reeealy nice! I need to understand more Socket.io, but the video is awesome!
wow, this is what i need right now thank you very much
Awesome Brad, this helps a lot! i can´t wait to see that backend implementation.
Thanks for another great tutorial Brad!
Please make a video on adding a database to this app?
Just as I wanted. You're the best!
Thanks @Brad, as always for this great and Excellent work... Appreciate
You explained it so clearly and perfectly, thanks
hey while making this tutorial i face error in qs cdn can u help?
Awesome tutorial! Thanks, Brad!
Awesome work!
Dear @Traversy Media, How we can deployed this app for Server?
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.
Thank you very much Brad.... Very useful tutorial!
bro youre a saint this is awesome
at 42:35 you somehow select and replace both "quotes" at once, how did you do such magic?!
can tell us how can we add video chat also.
Brad bro you're the best!
Great tutorial
Needed this one from long time
Plz teach us games with socket.io & node (rooms of course )
Great video as always, thank you Brad :)
This is amazing, Thank you. Is it possible to add one more functionality to send files as well?
Brad for me message was not showing in console which was typed can u please clarify
Hi, I am a total beginner to this but loved learning from your tutorial !! Thanks a lot. Could you kindly guide me a hit on how to stream hard coded music simultaneously in these chat rooms, so that the users can listen in sync?
Would be super duper grateful for your help !!
Awesome as always
Always thank u Brad✨
this is great tutorial, thank you traversy
can you please make video non how to connect this application with mongodb using mongoose
It would be super cool if you did the desktop app with this! thanks for the video
thanks for sharing awesome video, plz also share how to load old messages when same user is connect again same room
Nice course Traversy, we appreciate. Can you also do this course with react. I will really appreciate this. Thanks
This is the same type of application built in React by Javascript Mastery : ruclips.net/video/ZwFA3YMfkoc/видео.html&ab_channel=JavaScriptMastery
Hey thank for this tutorial , i didn't get this part when added to index.html please can anyone explain me this .
socket.io module hosts a socket.io.js file at this endpoint for the client side html
you could see it being used in public/js/main.js
const socket = io();
this file is required for client html to use socket functions and create web socket.
Hey Traversy i have a bit problem with "ERR_refused to connect" from socket.io, how can i tackle that ?
Thanks for this man. I am looking forward to adding Mongo DB and turning it into a desktop app.
God bless you.
Hey , you tried this? i have been trying to do the same .
34:55 You don't need an external library for that, there is a native web API supported in all mayor browsers: developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
I think MQTT is much better for this particular use case. I prefer using WebSockets in cases where the server updates the client about a background process like file upload, or file conversions, etc.
First of all thank you for such a wonderful video, But i think people with same name should not be allowed to enter the same chatroom can you tell me how to implement it ?
Really enjoyed it!! 🙏💙🙂
In a lot of places, Brad seems to be adding code with the assumption that JS will behave synchronously but that might not be the case, right?
For ex, the scroll down feature at 26:30 is expected to execute after the outputMessage(message) is completed but that might not be the case always due to asynchronous nature of JS right?
Another ex: @27:50 the clear input feature is expected to execute after socket.emit('chatMessage') but might not be the case always due to asynchronous nature.
Thank you from ARMENIA bro!
Thank you Brad, it's useful, and next, combine it with auth system with firebase maybel.
First of all I want to thank you for the great video. Can you please explain to me how to all the participants in the conversation can see the previous messages? I have mongodb installed and connected to the app
I AM VERY MUCH INTERESTED TO KNOW HOW A DATABASE CAN BE ADDED TO THIS PROGRAM.
Who could possibly downvote this. Thank you Brad!
Hello , i'm new to webdev and this channel is a treasure for learning .
i followed this tutorial and implemented it to my website , but i'm stuck now bcs i want to use mongodb instead of the query Strings , will there be a follow up to this as u said at the end or you're done with it??
thanks for the great tutorial :)