Real Time Chat App with Users, Rooms | Node.js, Express, Socket.io
Vložit
- čas přidán 28. 07. 2024
- Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
How to build a Real Time Chat App with Users, Rooms | Node.js, Express, Socket.io. In this 5th video of the Chat App series, we will learn about Socket.io chat rooms and apply what we have learned to build a complete real time chat application.
💖 Support me on Patreon ➜ / davegray
⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Complete Next.js Developer: bit.ly/CompNextJSDev
- Advanced React: bit.ly/AdvReactDev
- Junior to Senior Dev Roadmap: bit.ly/WebDevRoadmap-JrtoSr
🚩 Subscribe ➜ bit.ly/3nGHmNn
📬 Course Updates ➜ courses.davegray.codes/
❓ Questions - Please post them to my Discord ➜ / discord
☕ Buy Me A Coffee ➜ www.buymeacoffee.com/davegray
👇 Follow Me On Social Media:
GitHub: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
🔗 Source Code: github.com/gitdagray/build-ch...
🔗 Playlist for this Building a Chat App Course: • Building a Chat App
Build a Real Time Chat App with Users & Rooms
(00:00) Intro
(00:10) Welcome
(00:31) Lesson Goals & Project Overview
(02:07) Starter Code
(02:38) HTML
(07:23) CSS
(08:00) Client-side JavaScript - Part 1
(15:18) Node.js Socket.io server
(40:51) Client-side JavaScript - Part 2
(55:59) Recommended Additional Features
(57:20) Deploying the Chat App
(59:28) Wrap-up
📚 Tutorial References:
🔗 Node.js Official Site: nodejs.org
🔗 MDN WebSockets: developer.mozilla.org/en-US/d...
🔗 Socket.io Official Site: socket.io/
🔗 Express Official Site: expressjs.com/
⚙ Dependencies:
🔗 Socket.io: www.npmjs.com/package/socket.io
🔗 Socket.io Client library: cdnjs.com/libraries/socket.io
🔗 Express: www.npmjs.com/package/express
Was this tutorial providing a real time chat app helpful? If so, please share. Let me know your thoughts in the comments.
#realtime #chat #app
Amazing Dave! You never fail to deliver amazing content!
🤘🎸
Well I coded a realtime code editor with chatroom like concept an year ago glad to see this tutorial, keep up the work Dave
TY, DAVE! Great content! Hope see you soon again.
When ever watch your videos I feel like I am watching Brad's videos. You both are great teacher for my webdev journey
Thanks Dave for this beautiful playlist.👌👌
It was a lot of information, but I took a lot of notes even though you gave us class files. Enjoyed it! Tks Dave.
"keep striving for Progress over Perfection, little progress every day will go a very long way"❤ well said Dave
Thanks Dave!
Cheers 🎉🎉🎉
Thank you 🎉, i hope you will make it with NextJS version ❤
Great tutorial, just a minor suggestion for future tutorials to help noobs: Could you check the code in the live browser every once in a while?
It's helpful to understand what's going on in the browsers while coding is in progress. Errors that pop up or weird prints to console can be demystified if they happen on your end and you say, "this is expected and here's why things look broken or seem off until they're hooked up." Seeing things get hooked up as you go helps to connect the code to the result and reinforce the concepts (for me at least).
For example, I'm 38 minutes in, but my chat room is printing out "[object Object]" instead of any of the actual string statements. I'm sure something will be hooked up later on or I missed a step and need to backtrack, but not knowing if I'm on track or off can be distracting.
Hey, i followed this tutorial fully but found some key things that needed to be changed, one thing with an easy fix is making the ADMIN string LONGER then your allowed name length, this ensures a user can't send admin messages (or make a blocked names list, would be more of a hassle...), also (and i dont know how to fix it) when starting up the app, you can't see any active rooms, only when the roomList gets called is when you get rooms, yeah that's it, good series 👍
Thank you Dave
i downloaded the source code all i can say is its awesome.Thank you so much for doing this.
Wow amazing 🎉🎉🎉
Thx for this lessons
Excellent series! How does this translate to a support chat? Lets say I want to build a chat app for an IT helpdesk team, how would that work with regard to creating a queue and letting agents pickup the queue as it comes in etc - would be a great tutorial.
Also adding some sort of authentication and logging the chat data to a SQL database would also be fantastic to see.
Thank you
Thanks sir
Amazing tutorial, I wish if you you could create a new playlist for this using React or Next JS in the Frontend and maybe add some reaction feature like when a user clicks a button that says "Aha!" 3 times then the app will show "Aha! clicked 3 times in less than a minutes"
I would like to see this project go to the next step and allow for sending graphics such as emojis or individual pictures
Really cool, clean, and enriching! Thanks a lot :)
For future tutorials which also include so many functions and inner tasks,
if it will be possible to divide the code into sections by a simple comment such as:
"---------------------------------", maybe even with a description - that will be super helpful.
For example, my code seems to work and it was really hard to track a type of close brackets in the wrong position.
But a great project nonetheless which really leaves some desire for more..
(Such as a return (to lobby) button, lobby of chats, geo-location service, and more..)
p.s.
Wow, converting this client into a React jsx component is quite challenging.
Haven't thought of it during this fasinating series and this might be a suggestion for a great tutorial as well..
which theme are you using in vs code
Hi Dave. Awesome work as always. I'd like to make a suggestion. In this video, where you have the show users function, at 52:00, the Intl List Format class in JavaScript can handle the insertion of commas in the user name list. All you have to do is pass it the array of usernames.
This is a great series! 👍🏾 Will you be adding an episode explaining how to incorporate Redis in a chat app?
Not right now. Maybe in the future though.
Hi I had a question. If there are three people in the chat room and 2 people are typing at the same time will it show both of their names as typing?
can you make next video to store this chat app data to mongoDB pls
hey can anyone help me I have deployed it on vercel but it is not running. It is only showing the front end part else nothing is working
Can you do it using 2 different computers, as long as it's on the same network? That way you could chat with someone in your house?
Good content! How many lectures Building a Chat App course/playlist expected to have? Is this the last one?
Yes this is the last for now. I may do another series with a different tech stack in the future.
I've been working almost exclusively with the PERN stack + AWS for the past 2-3 years, and your videos have been invaluable. They're so well-crafted that I find myself watching them, even when the topic isn't directly relevant to my immediate needs. @@DaveGrayTeachesCode
Please make a video of chat app with a database .. React +Nodejs + Socket io + mongoDB
Nextjs with web socket project pls sir❤
No database ?😢
Hello sir,
I was waiting for the last video, now i will start this series.
I have some questions:
1. If i use react in this project for frontend then is deployment process remain same as you have done in previous technotes app series or is there any change.
2. I want a suggestion. Currently i have done React, Node and Mongodb with some projects. Now i want to learn Redux for state management, React testing and Typescript. So between testing, redux and typescript which should i learn first.
Thank you so much for this series.
go with redux, typescript and then testing
@@rahu1gg thanks 🙏
lets code together sir. ❤
Excellent tutorial! Thanks much!! I’m wondering two things….first, can anyone recommend a host with a free tier (like heroku😢), and second, would it be difficult to set up as game lobby and to start a game from a room (like Kali back in the day). Thanks again for this awesome content!!
Render has a free tier. Only problem with render free tier is that your app will go to sleep if remain inactive for 15 minutes. But it is not a big issue, app will be again live when you will search it.
Can anyone tell where it is maintaining its database
I found his tutorial useless tbh , No react, Non existent Express, No DB,No routes,No comtrollers
Extend it with webrtc please.
That might be good for a video conferencing project / series.
Where's the discord link😢?
In the video description.