Build a Real Time Chat App With Node.js And Socket.io
VloĆŸit
- Äas pĆidĂĄn 28. 07. 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
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!
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!
He doesn't time pass, but goes straight to the point.
We used this tutorial and now we've come such a long way! Thank you web dev simplified!
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
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.
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!
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
That is so awesome! God bless you, man!
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
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
Thank you dude, that was amazing!
I have made my first Javascript& Node.js project đ Thank you very much!
Wow! That was awesome and I loved it! Hoping for more amazing content!!! đ€đ€
I've said it before and I'll say it again, you're a very smart young man :)
cant believe i faced click bait on other videos like THIS..... THANKS A LOT..subed
perfect.
no much talk, no blabla, only what you need to know
Thanks. I'm glad you enjoyed it.
Thank you that was a great tutorial!
Amazing tutorial, everything was well explained, thanks!
This is exactly what i was looking for!
This perfect for what I needed right now. Thank you
You're welcome!
Great topic. It's easy to understand from you. Thank you.
You're welcome!
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?
You have explained in a superb way bro..
Keep doing these amazing videos...
This gave me a great idea. 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 is great for my school project. I think I now have a better idea of how to do it
thanks!
thanks for this tutorial my brother! keep going! i'll give you sub and like your video!
I always wondered how chatting works... Awesome content and thanks a lot!
You're welcome!
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!
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
Nice man, Love it
Priceless content
Applause from Hong Kong student
XDDDD
Thank you, awesome as always :)
I'm glad you enjoyed it.
Best video to understand the basic of socket.io library đ
Perfect tutorial. Thanks again
Short videos ftw. Cheers buddy, subscribed
Awesome video! Thanks! Can you also make a tutorial on how to deploy it? (On AWS for example)
Great video! very helpful! thank you!
Thanks a lot.... Really searching for short sweet to the point vdo...
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
FINALLY! A good tutorial that ACTUALLY is what i was looking for! thankyou soo much!
czcams.com/video/URMS-08eCA8/video.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?
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.
Thanks as always! :)
Your Intro's are pretty cool...đđ
Wow, you are absolutely amazing.
Thank you!
Hey Kyle, at 6:30 I only get the console logs if I use socket versions 2.2 like you did. Using the latest socket io package with the exact same code it doesn't console.log "new user" and "hello world". Any ideas? Do we need to use express now? The tutorial using express by traversy media is working for me so far.
thanks....it worked..i have learned so may things from this
Good content and good content delivery as usual.
Thank you
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.
A bit complicated but useful and interesting :)
thanks for teaching me how to use disconnect :)
Amazing and how simple it was. How are you thinking in making it more complex? Images?
Thanks for the video! How did you open the browsers for the client and server?
Guys this man is a legend thank u
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?
Thanks for the excellent explanation!
You're welcome
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
Thanks a tonđ. You are just awesome..
I can not see "Hello world!" on the console :( I also don' t get an error I get this in issues.: "Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute"
Best Intro EVER!
thanks. good video as always
Hello any idea why i cant find any tutorial in react/node/express/Socket io tutorial abotu creating 1 to 1 chat , like facebook chat or any other social media chat ? is that so different or hard to do ?
This video is perfect, which is perfect.
Great thing is, you've done it in under 20mins.
YOUÂŽRE SO GOOD MAN
amazing video did had to do a bit of work arounds but over all works perfectly
@Google Security you have to be more specific
That's awesome!!!
Thanks!
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.
This guy makes node js look so easy..
Loved the intro
Awesome sir... Just let me give a try to node...âđ
I was wondering if you could advance the idea of using sockets to using Node-Red and MQTT to publish and subscribe messages between nodes in a series of videos?
Thanks for the wonderful content.
You're welcome!
Well done... this is nifty!!!đđđđđđđđđđđđđđđđđ
Excellent tutorial!
Thanks!
Normal people: social distancing
Developers: socket io chat
looool reletableee
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!!!!!!!!!!!!!!
Greatly explained
Nice tutorial. How can we persist the the messages in a database though? What kind of database to use?
That was awesome...thankx for sharing
You're welcome! I'm glad you enjoyed it.
What keyboard do you use? It has satisfying typing sound for coding.
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 đ
YOU ARE THE BEST!!!
Thank you I am Searching for this
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?
I have implemented my messaing service using you tutorial thanks alot!! I have a blocker though, I'm trying to create a channel where in a master user can send the message to multiple selected users. I'm not sure how I can create a dynamic channel and listen to it only for the user whom the master user sends the message
Haven't tried it yet but seams like it'll work. đđ€Șđ€Ș
Thank you sir helped a lot, now how can we make two client to have conversation separately
always stuck on [nodemon] starting `node server.js`
could this be possible used alongside Django? I've seen many live chat app tutorials that utilize Django channels and Redis but something like this would be perfect for what i'm looking for in my django project
Hello everyone, I'm having an issue at 3:19 where you uses "npm run devStart" it get an error. Even though I did everything before correctly?
HELP
Did you write the script for nodemon start in package.json?
Gotta love that intro!!! :-D
Hi WebDev! Really love the tutorials
Out of curiosity, could you maybe go into a bit more depth on what you would need to do in order to make this site work remotely through other devices?
Besides the basics of getting the site hosted, I'm not sure what to change in the js to get it running
I'd really appreciate the help
Although, considering the age of this video, It's not expected or anything
Cheers!
Just host it on a vps and it can be accessed from any device
Is it possible to for example lock down the range so that everybody within 1 km can be a part of the chat? Like Jodel.
"and that is going to be easy" - Quote of this video