Real Time Chat App with Users, Rooms | Node.js, Express, Socket.io

⭐ Become a full-stack web dev with Zero To Mastery Courses:

👇 Follow Me On Social Media:

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
(40:51) Client-side JavaScript - Part 2
(55:59) Recommended Additional Features
(57:20) Deploying the Chat App
(59:28) Wrap-up

📚 Tutorial References:

⚙ Dependencies:

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

[bmcode]

"keep striving for Progress over Perfection, little progress every day will go a very long way"❤ well said Dave

[yakanashe]

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 👍

[MikeBourbeau]

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.

[hungnguyencanh]

Thank you 🎉, i hope you will make it with NextJS version ❤

[robinsgarlandconsulting]

It was a lot of information, but I took a lot of notes even though you gave us class files. Enjoyed it! Tks Dave.

[Fragler]

I would really appreciate a follow-up video covering how to register / login and create sessions for the users, since the session id is always regenerated when the user refreshes the page.

[tejasvix]

Well I coded a realtime code editor with chatroom like concept an year ago glad to see this tutorial, keep up the work Dave

[doors]

Amazing Dave! You never fail to deliver amazing content!
🤘🎸

[coderboysobuj]

When ever watch your videos I feel like I am watching Brad's videos. You both are great teacher for my webdev journey

[pgrAbhilash]

Thanks Dave for this beautiful playlist.👌👌

[karma]

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"

[tetyanagon]

TY, DAVE! Great content! Hope see you soon again.

[Soft_menu]

i downloaded the source code all i can say is its awesome.Thank you so much for doing this.

[stevereid]

This is a great series! 👍🏾 Will you be adding an episode explaining how to incorporate Redis in a chat app?

[darrellbeta]

I would like to see this project go to the next step and allow for sending graphics such as emojis or individual pictures

[shineLouisShine]

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..)

[iamprincemuel]

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.

[cana_]

can you make next video to store this chat app data to mongoDB pls

[saturdaysonata]

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.

[randith]

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?