Build a Real Time Chat App With Node.js And Socket.io
HTML-код
- Опубликовано: 15 июл 2024
- In this video you will be creating a real time chat application complete with usernames and connect/disconnect messages. You will use Socket.io to manage real time web socket connections to a Node.js server that will allow you to communicate real time chat messages to all clients connected to a single server.
This entire project will take less than 100 lines of JavaScript and almost no HTML/CSS, but it is incredibly powerful what can be done with such little code. By the end of this video you will have a strong understanding of how to send and receive messages using web sockets and Socket.io to make any real time application.
📚 Materials/References:
GitHub Code: github.com/WebDevSimplified/R...
Socket.io: socket.io
🧠 Concepts Covered:
- Using Socket.io to create web sockets
- How to send messages to clients in real time
- Handling user connection/disconnection
- Appending elements with JavaScript
- Sending messages to the server in real time
🌎 Find Me Here:
Twitter: / devsimplified
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#ChatApp #RealTimeChat #JavaScript
I'm gonna go make Twitter now
Don't
Jugad Technologies do
I'm gonna make discord now guys
@@pigio9033 He'll fail
@@jugadtechnologies4171 lol
Real-time sockets are so awesome. I love how it's all built around the publish and subscribe pattern too. So easy to follow along. Awesome tutorial, thanks!
He doesn't time pass, but goes straight to the point.
This is exactly what I needed man, thanks!
I've been trying to use arduino with johnny-five and web sockets for a while to
be able to change the color of an rgb led from my phone, and this has helped
a ton in seeing how web sockets work.
Awesome content!
We used this tutorial and now we've come such a long way! Thank you web dev simplified!
That intro was great! I love your sense of humor in these videos :).
Thank you bro!!! this is what i'm looking for, no templating engines or frontend frameworks just native.
Succinct, lucid and a calm, soothing explanation. You are an ideal tutor. Enjoyed the video very much.
I'm just learning node and express...etc because of my future, then I got a good page finally so I'm really thankful for this opportunity
excellent as always!!
You are the best company on afternoons that I want a break and to just have fun with a project and learning new things!!
Thank you! I'm really glad I can make your afternoons and learning something to look forward to.
This was very helpful to start with the basics!
I have subscribed to this channel and would go through the rest of the content.
Thank you :)
thanks so much for the tutorial, i always had a lot of trouble doing the networking stuff and this helped me a lot!
thank you for having tutorials that does not go beyond 20mins. more power to you man
I try to keep the videos as short as possible since I hate long videos.
@@WebDevSimplifiedMe too
This is perfect for what I needed for my website.
I'm definitely gonna put this to use.
You da man.
I'm glad I could help.
@Shlok Jain haha you dont need to download just use npm i socket.io on terminal
@Shlok Jain Gawar
@@WebDevSimplified how did you get the local host at the start?
@@mathewsjoy8464 vs code live server
I have made my first Javascript& Node.js project 😊 Thank you very much!
perfect.
no much talk, no blabla, only what you need to know
Thanks. I'm glad you enjoyed it.
That is so awesome! God bless you, man!
cant believe i faced click bait on other videos like THIS..... THANKS A LOT..subed
I've said it before and I'll say it again, you're a very smart young man :)
Thank you dude, that was amazing!
This is exactly what i was looking for!
Wow! That was awesome and I loved it! Hoping for more amazing content!!! 🤓🤓
This is great for my school project. I think I now have a better idea of how to do it
thanks!
Priceless content
Applause from Hong Kong student
XDDDD
Thank you that was a great tutorial!
Amazing tutorial, everything was well explained, thanks!
i am very new to javascript... i didnt understand anything.. but i believe that after 6 months i will be clearly able to understand it... thank you
Thanks for this. I was looking for an example to work through to help me learn about connect.io. This has worked well,
This gave me a great idea. Thank you
This perfect for what I needed right now. Thank you
You're welcome!
Best video to understand the basic of socket.io library 💖
Nice man, Love it
I always wondered how chatting works... Awesome content and thanks a lot!
You're welcome!
Perfect tutorial. Thanks again
thanks for this tutorial my brother! keep going! i'll give you sub and like your video!
FINALLY! A good tutorial that ACTUALLY is what i was looking for! thankyou soo much!
ruclips.net/video/URMS-08eCA8/видео.html
Has that code worked?
@@KeskilChnProgram i cant remember, i think it ended up with quite a few issues
@@maverick4636 did you fix that issues?
Short videos ftw. Cheers buddy, subscribed
Great topic. It's easy to understand from you. Thank you.
You're welcome!
This is amazing, what I'd be interested to see is a live ticker application e.g. for a football game
what is a live ticker?
Mat Stacy basically a description of a live football (or any other sports) game. So fe when someone scores you‘ll get a message like „X scored. Current score: 2:1“ or smth like that
Thank you, awesome as always :)
I'm glad you enjoyed it.
Thanks as always! :)
Thank you so much for this. Please make a tutorial video showing how we can create PWA chat app ? Great work dude! I speak for all newbies out there when i say... THANK YOU!
You have explained in a superb way bro..
Keep doing these amazing videos...
thanks for teaching me how to use disconnect :)
Great video! very helpful! thank you!
Thanks a lot.... Really searching for short sweet to the point vdo...
Normal people: social distancing
Developers: socket io chat
looool reletableee
"and that is going to be easy" - Quote of this video
Guys this man is a legend thank u
thanks....it worked..i have learned so may things from this
Best Intro EVER!
Hey Kyle what a great video. I have a running Apache server and a Mysql server running from scratch. Now I want to hook up my Database to this chat server. Then I will have 3 ports all doing something important. LOL I love a challenge.
Hey nice channel, I like the way you explain programming and how clear you manage the information, will you extend this topic using a different app, not a chat, mb a real time post update or a new DM receive??
Thank you! I do want to expand upon the idea of web sockets and real-time communication since I think it is fun to work with an really useful. I right now do not have any project ideas for such a project, but I am sure I will come up with one eventually.
@@WebDevSimplified You used the port 3000, what If I wanna deploy this aplication? It won't be in localhost, so, what do I do?
Thanks a ton👍. You are just awesome..
Your Intro's are pretty cool...👍👍
This video is perfect, which is perfect.
YOU´RE SO GOOD MAN
This guy makes node js look so easy..
Well done... this is nifty!!!👏👏👏🙏🙏🙏🙏👌👌👌👌👌🖖🖖🖖🖖🖖
Awesome video! Thanks! Can you also make a tutorial on how to deploy it? (On AWS for example)
Wow, you are absolutely amazing.
Thank you!
thanks. good video as always
Loved the intro
Great thing is, you've done it in under 20mins.
Thank you I am Searching for this
A bit complicated but useful and interesting :)
Thank you very much!
Awesome sir... Just let me give a try to node...✌👍
Thanks for the excellent explanation!
You're welcome
amazing video did had to do a bit of work arounds but over all works perfectly
@Google Security you have to be more specific
YOU ARE THE BEST!!!
Greatly explained
Good content and good content delivery as usual.
Thank you
That's awesome!!!
Thanks!
Excellent tutorial!
Thanks!
Thanks for the wonderful content.
You're welcome!
thank you man you are awsome
Gotta love that intro!!! :-D
Thanks MAN !! ❤❤
Haven't tried it yet but seams like it'll work. 😆🤪🤪
That was awesome...thankx for sharing
You're welcome! I'm glad you enjoyed it.
you are the bestttttttttttttttttt!!!! thankyouuu
Brilliant!!
You saved my life
I was looking for a tutorial that shows how to upload files or pictures in a real time chat app? Do you have any basics ideas of how we can do it or any resources?
Thanks a lot.
thank you so much.
Please create a tutorial a chat system with a database using MySQL and node.js. With just particular user you wanted to chat.
AWESOME TUTORIAL BY THE WAY!!!!!!!!!!!!!!
Great contents. Please continue to be unique with your contents.
All the others web channels are just copying from Traversy Media and he's friends. But I really glad to see your different and great stuff!!
Thanks!
Thank you so much. I view Brad as a huge influence but I created my channel specifically to make content that is simple and concise which was what I found lacking when I was learning web development. I am glad that this teaching style resonates with you.
I'd love to see a more advance project with socket.io thank u for explaining ! Appreciate it
I have a part 2 of this video you can checkout which goes a bit more in depth.
@@WebDevSimplified thank you
Hi, i just found this awesome channel. Hope to get more awesome videos from you. May i ask can i use this kind of chat in shopping website?
Amazing and how simple it was. How are you thinking in making it more complex? Images?
Simple explanation
This man has 999 000 subs! GET HIM TO 1 MILLION RIGHT NOW!!
Thank you for your video, it helps me a lot. But I am so curious that how can I add the real-time voice chat function …thank you very much
Great video! after scrolling the comments to see you are using live-server i now seem to be getting lots of CORS errors in the terminal when trying to run in browser
I did too. Did you ever find a solution?
Thank you
Bravo you are de best.
Thanks!
Thanks a lot broo
Thanks for the video! How did you open the browsers for the client and server?
That's really nice and well explained! You got it straight to the point.
My only question is - do you run this over Express server? you browse localhost:5000 yet the IO variable gets the 3000 port as a parameter. This is something you didn't explain.
5500 port is for live server. He ran client in live server.
I am newbie to node..can anyone just explain how tat Live 5500 port created and code for tat not shown here rite..by the way rest of the code r just awesome 👏
Very Cool
Thanks for this app, please create video on rxjs all operators