This channel is criminally underrated! We really need to do something to make his videos viral.. Thanks from the bottom of my heart for all the quality content
Idk how many subs you had a year ago but now dear sir you are at nearly 500k subs. Thanks very much for the great tuts and hope your channel grows even more!
I didn’t know you could just specify a port and immediately connect 😮. I’ve always created an express server and passed the server object into the socket. Thank you, now I know something new! 🙌🏽✨💯🎊 You the man, Kyle!
that's awesome! everyone else is just talking about 20 minutes to explain every detail and it becomes very confusing, but you, just do amazing things that i was looking for months! videos are very short and informative, code is readable because it's pretty formatted, and most important, it's not confusing at all, even for me, i started learning node.js about 3 days ago but i understand! thanks! your channel is too underrated btw... (I shared with all my friends, and even not friends) keep it up man!
I have a request to each and everyone who is following this channel, This guy needs our support and we must spread this channel like an Amazon Wild Fire or even something more. I hope people like Kyle get better exposure. Come on guys, lets push this guy up !
Thank you for the support. My channel is already growing at a crazy fast rate in my opinion and I am incredibly thankful for everyone that watches my videos.
I am really enjoying this. I would love to see a series done to make a discord or slack like system. Even if its just single server. add in mongo for history and user along wit passport of JWT. man it would be rad.
@@tyrrelldavis9919 Thank you! One day I will be up there with Brad, but he started long before me and is still absolutely killing it with amazing tutorials. I hope to be able to help as many people as he has one day.
this is an awesome tutorial ,me figuring out Socket.io for a whole day lol btw i added 2 lines of code Reason: Unless the server is restarted , the rooms can be created endlessly with out deleting it after all the users left the room socket.on('disconnect', () => { getUserRooms(socket).forEach(room => { socket.to(room).broadcast.emit('user-disconnected',rooms[room].users[socket.id]); delete rooms[room].users[socket.id]; //the added 2 lines of code const roomFull = rooms?.users; if (!roomFull) delete rooms[room]; console.log('user disconnected'); }); Hope it helps someone! thanks a lot !
How is it possible to build powerful real-time features in only 40 minutes with this 2-part tutorial series, Oh man, this is just amazing, without a doubt your way of teaching makes learning complex stuff a breeze, I really appreciate it.
I am glad you resonate with my teaching style. I try to cut out all the unnecessary fluff and useless information to keep the learning per minute of my videos as high as possible.
Not sure if I did something wrong, but my 'chat-message' emit was not sending the package to both sender and chat participants, only the participants (username joined the room and chat messages only showing on other clients). So instead of using socket.to(room).broadcast.emit('chat-message') I used io.to(room).emit('chat-message') and it worked.
Lool, this is insane... 😁 I created one-time pad encryption library to protect users messages before they goes true the socket.io. Even socket running true the ssl, its still vulerable because government services can decrypt ssl, but my app has power over it and convert message with the ascii dots. 😁
The best way to handle that situation would be to use a database to store users. Then you could also store whether or not the user was banned inside that database as well. One option, if you wanted to ban users from a single room would be storing rooms/users in their own tables and then have a third table that has the id of the user/room they are banned from.
The "room-created" event needs to check, if it has a "roomContainer" available (which is only on index.ejs), otherwise those, who are in a room, get ugly error messages once a new room is created. Third part: Deploy to netlify / zeit / etc?
You can pretty easily. A private chat is just like a room but it is a room that ties directly to another users socket id. The docs for this library have a section on private rooms.
Great tutorial. Easy to understand. As a new to Node.js and Socket.io, I was looking for chat apps tutorial to use for our website and I think this is the best tutorial I found. I went through and finished it. Now, I was trying to embed on our website but sent me '404 Not Found'. if I have index.php and want to put a "Chat with us" navigator, how can I do this? I mean how can I link this such as Chat With Us ? It gives me: { %> Join textbox is here then "New Room" Thank you for this tutorial.
I have a question. Do you have any option to delete the created rooms? because these are pilling up. I have made so many in my Heroku app, and I want to delete these. Thank you for the tutorial
I'm using VS Code too, and have run `npm i express ejs` and they are both in my package.json, but EJS isn't appearing in the languages list, so it's not being formatted properly. Have I forgotten a step or missed something? I have also asked a question on StackOverflow here: stackoverflow.com/questions/59238175/visual-studio-code-isnt-recognising-ejs Edit: I have installed the EJS syntax highlighting plugin, but this still doesn't make the language appear in the list.
In my project I wanna give the right of creating rooms to a specific client ( in my case I want him to be the professor ) how can I set this condition ? Any help please!! 🙏
Sir, I try to upload this project to glitch.com, but it is not working, the error messages indicates it has to do with https, can you fix the problem???
are you sure you installed socket.io correctly? glitch has in-build node.js at projects with "package.json" file. you must just go it and click on add package, type socket.io, click on 1st result(install button of 1st result) and you're done now follow video
@@WebDevSimplified well ok but its kinda urgent if you have enough time please help me i know that being a youtuber is hard. So if you have time to do a vid please do. Thanks for the reply.
@@meteachesprogramming9395 It won't be something I tackle anytime soon. I am incredibly busy and do not have time for a full project based video like that.
in your rooms object you just store name of the room which is string and then you use to(roomName (which is string)) to emit event but how how does it know from just String
I have a question. How do I link stylehseets? I added some and it appears in my source-code. I can open the link via browser and the see code there but it isn't applied to the dom. Is there anything special I use to do? It's lying in the public dir next to script.js
I don't know why it doesn't work for me. I have the exact same code. Live server doesn't open .ejs files like html, it opens Listing directory/ where I can see my project filkes. If I click on index.ejs, it just downloads it. I added a .html file into the views folder and it opened it. I tried to open a ejs folder from file explorer and it opened it in firefox but it displayed the script as text. Somebody please help.
Obviously, no one can trouble-shoot your code without seeing it, but if I were to guess, I would say that there are 2 things that are most likely the source of your problem. 1. Hopefully you noticed that some ( but not all ) of those ejs tags have an equal sign on the left-hand side. One misplaced equal sign is a disaster in the world of ejs. But honestly, if you downloaded the code from Git Hub, and they didn't run either, this is probably not your problem. Because presumably, the Git Hub files would be correct. 2. Another possibility is outlined in a great article that you can find on the Internet. I will describe it so you will know what to expect. This guy tells you to get a picture of a kitten.jpg so that you can find out which statement you need to use to fix your problems. Then he gives you 3 choices. You try choice 1, and test it with the kitten picture. Then you try choice 2, and test it with the kitten picture. Then you try choice 3, and test it with the kitten picture. For me, choice 3 was the one that worked. You have to put the kitten in a certain folder, and then try each choice, one at a time. The name of the article is: "Serving static files in Express", and you can find it here: expressjs.com/en/starter/static-files.html By the way, he tells you that you need to use the "path" module, from Node.js, but he never tells you to "require" the path Module. Without "path", choice 3 ( which I mentioned above ) will never work.
This channel is criminally underrated! We really need to do something to make his videos viral.. Thanks from the bottom of my heart for all the quality content
Thank you! I think I need to sacrifice a goat to the RUclips algorithm gods or something along those lines to go viral 😜
@@WebDevSimplified Yeah, there is a serious problem with your channel, Kyle. I can't listen to anyone else anymore :)
@@WebDevSimplified can you please help me with uploading this to heroku?
Idk how many subs you had a year ago but now dear sir you are at nearly 500k subs. Thanks very much for the great tuts and hope your channel grows even more!
I didn’t know you could just specify a port and immediately connect 😮. I’ve always created an express server and passed the server object into the socket. Thank you, now I know something new! 🙌🏽✨💯🎊 You the man, Kyle!
that's awesome! everyone else is just talking about 20 minutes to explain every detail and it becomes very confusing, but you, just do amazing things that i was looking for months! videos are very short and informative, code is readable because it's pretty formatted, and most important, it's not confusing at all, even for me, i started learning node.js about 3 days ago but i understand! thanks! your channel is too underrated btw... (I shared with all my friends, and even not friends) keep it up man!
I have a request to each and everyone who is following this channel, This guy needs our support and we must spread this channel like an Amazon Wild Fire or even something more. I hope people like Kyle get better exposure. Come on guys, lets push this guy up !
Thank you for the support. My channel is already growing at a crazy fast rate in my opinion and I am incredibly thankful for everyone that watches my videos.
@@WebDevSimplified Great Update, so glad to hear ! Looking forward for more contents....
Oh man thnak you so much, the quality of content, voice, code, explanation and everything is awesome.
Good job man
Thabk you so much. I'm really glad you enjoyed the video.
TypeError: Cannot read property 'emit' of undefined
if you get this error, in order to fix it, you can delete the .broadcast, is not needed!
THANKSSSSS
I am really enjoying this. I would love to see a series done to make a discord or slack like system. Even if its just single server. add in mongo for history and user along wit passport of JWT. man it would be rad.
just that i need! thanks for the videos!
You're welcome! I am really glad you found it useful. I had a lot of fun making this video since chat rooms are fun to make.
Yay! Just what I asked for. Thank you very much😊
I hope you enjoyed it.
@@WebDevSimplified You and Dev Ed are two guys who have been very helpful to me. Thank you.
You and Dev Ed are my top two web dev channels..both so unique creators & teachers
Thanks! Ed is awesome.
@@WebDevSimplified So are you ! 😃
Most overlooked channels on yt tbh, should be as popular as traversy
@@tyrrelldavis9919 Thank you! One day I will be up there with Brad, but he started long before me and is still absolutely killing it with amazing tutorials. I hope to be able to help as many people as he has one day.
This the best WebSocket Tutorial, hands down man
You are a Sharp developer
Tomorrow I am going to buy, your React.js Course without a doubt
Thank you so much! I'm really glad you enjoyed this video and I hope you love the React course.
this is an awesome tutorial ,me figuring out Socket.io for a whole day lol
btw
i added 2 lines of code
Reason: Unless the server is restarted , the rooms can be created endlessly with out deleting it after all the users left the room
socket.on('disconnect', () => {
getUserRooms(socket).forEach(room => {
socket.to(room).broadcast.emit('user-disconnected',rooms[room].users[socket.id]);
delete rooms[room].users[socket.id];
//the added 2 lines of code
const roomFull = rooms?.users;
if (!roomFull) delete rooms[room];
console.log('user disconnected');
});
Hope it helps someone!
thanks a lot !
Really awesome tutorial... Loving your tutorials ... Keep it up❤️
Thanks!
thank you so much kyle this was my first backend project and I think I want to be a fullstack developer now
How is it possible to build powerful real-time features in only 40 minutes with this 2-part tutorial series, Oh man, this is just amazing, without a doubt your way of teaching makes learning complex stuff a breeze, I really appreciate it.
I am glad you resonate with my teaching style. I try to cut out all the unnecessary fluff and useless information to keep the learning per minute of my videos as high as possible.
@@WebDevSimplified learning per minute xd
You know building on this and the previous video, adding webRTC for video/audio chat would be neat!
great, 5 times I saw it, thanks !!
You are great..Such an amazing project.. Explained properly 🎉🎉
Thanks a lot for this video and the previous one, very helpful!
Not sure if I did something wrong, but my 'chat-message' emit was not sending the package to both sender and chat participants, only the participants (username joined the room and chat messages only showing on other clients). So instead of using socket.to(room).broadcast.emit('chat-message') I used io.to(room).emit('chat-message') and it worked.
Thank you for your response i have solved my problem related to your comment
This is an awesome project !!!
I'm glad you enjoyed it
thankyou so much for such a good tutorial.
please make a continuation video on this connecting mongodb database to store user chats
Hi , how can I delete chat room that is created ? I would like to know not only how to create but also how to delete the chat room
Thank you so much.. Such a good tutorial
Thank you!
Great content!
you are great ... more node.js projects .. big one's
I have an entire full stack Node.js course on RUclips if you want a bigger Node.js project.
@@WebDevSimplified yup , i study it all .. i am asked for another one :)
@@artzdesign2352 I will see what I can do. Thay project took me 3 months to build/record and I am in the middle of a react project right now.
Awesome! Would be really nice to know to implement this into a website! Glad it works for you tho!
Lool, this is insane... 😁 I created one-time pad encryption library to protect users messages before they goes true the socket.io. Even socket running true the ssl, its still vulerable because government services can decrypt ssl, but my app has power over it and convert message with the ascii dots. 😁
Good job
you made a very good tutorial
OMG you're the man! I have a question, how would you handle a kick/ban system??
The best way to handle that situation would be to use a database to store users. Then you could also store whether or not the user was banned inside that database as well. One option, if you wanted to ban users from a single room would be storing rooms/users in their own tables and then have a third table that has the id of the user/room they are banned from.
@@WebDevSimplified How do we use a database?
why do you still don't have a tick after your channel name?
Real-time is awesome 👍
It is really fun to work with.
The "room-created" event needs to check, if it has a "roomContainer" available (which is only on index.ejs), otherwise those, who are in a room, get ugly error messages once a new room is created.
Third part: Deploy to netlify / zeit / etc?
very useful tutorial 🔥💥
Thanks!
Thank u so much man
Chat will never be ched again
Quick question, how would I get this to save to a database? Mongo to be exact.
Great, you are awesome 😁
Thanks
you are amazing
Thanks. It was very helpful. Can you extend this with private chat?
You can pretty easily. A private chat is just like a room but it is a room that ties directly to another users socket id. The docs for this library have a section on private rooms.
@@WebDevSimplified Yeah I also wondered I'll do it that way, but still wanted to be sure... Thanks :)
Thanks so fucking much, you fucking saved me lol
tags don't work for me :( help
me neither
Its EJS, you need to get that npm package
Great tutorial. Easy to understand. As a new to Node.js and Socket.io, I was looking for chat apps tutorial to use for our website and I think this is the best tutorial I found. I went through and finished it.
Now, I was trying to embed on our website but sent me '404 Not Found'.
if I have index.php and want to put a "Chat with us" navigator, how can I do this? I mean how can I link this such as
Chat With Us ?
It gives me:
{ %>
Join
textbox is here then "New Room"
Thank you for this tutorial.
This works locally for me, but when i deploy it to heroku it loads forever and doesn't ask me for my name. How do i fix this?
thanks bro
You're welcome
Great tutorial! Just one question, how can the room be deleted if there are empty users?
I have a question. Do you have any option to delete the created rooms? because these are pilling up. I have made so many in my Heroku app, and I want to delete these. Thank you for the tutorial
thanks a lot
I'm using VS Code too, and have run `npm i express ejs` and they are both in my package.json, but EJS isn't appearing in the languages list, so it's not being formatted properly. Have I forgotten a step or missed something? I have also asked a question on StackOverflow here: stackoverflow.com/questions/59238175/visual-studio-code-isnt-recognising-ejs
Edit: I have installed the EJS syntax highlighting plugin, but this still doesn't make the language appear in the list.
Hello my friend. What is nodemon used for in your package.json?
idk same here
great video . (y)
Hi Kyle, how do we add video chat to the chat rooms?
Thank you
we need encryption part
That is what SSL is for
Really useful project! Learned a lot from it. Also if I wanted to connect to this site from another device what would i have to do?
What do you mean?
@@WebDevSimplified like have the server running and chat app open on my pc and then probably chatting with my friend who is on his pc
As long as you host the site from this video on a place like heroku you can do that.
@@WebDevSimplified OK thanks!
@@WebDevSimplified I've tried to use heroku by myself but just got error after error. Could you do a tutorial on that or point me to a video?
can you do the same one with multiple chat rooms?
I am having a problem. I even downloaded from git and still it don't work. On ubuntu. I'm almost sure I did everything hint in the terminal right too.
can you please create a new project using the latest version of the package ? It changed a lot
can you show us how to upload this on heroku?
if you think this is helpful hit like so kyle can see it
Mihnea Aleman I can try to help
@@alg2x please help me
@@alg2x I am facing problem uploading the code..can you please help me?
Ankit Dutta hm sure do u have discord
@@alg2x Can you help me as well? Haha I have a Discord
nice video
Thanks!
In my project I wanna give the right of creating rooms to a specific client ( in my case I want him to be the professor ) how can I set this condition ? Any help please!! 🙏
request a password for creating rooms? and just give that pass to the professor
Hey thanks a lot, how can I store the message and display previous messages
You would need to add the messages to a database like MongoDB
Sir, I try to upload this project to glitch.com, but it is not working, the error messages indicates it has to do with https, can you fix the problem???
It sounds like you need to enable https on the site. I have never used that site so I am not sure.
are you sure you installed socket.io correctly?
glitch has in-build node.js at projects with "package.json" file.
you must just go it and click on add package, type socket.io, click on 1st result(install button of 1st result) and you're done now follow video
You should make a part 3 in which you show how to make privatised chat of only 3 people or show how to make them with password.
I'm not sure if I will expand upon this series in particular but I may make a separate chat room series in the future.
@@WebDevSimplified well ok but its kinda urgent if you have enough time please help me i know that being a youtuber is hard. So if you have time to do a vid please do. Thanks for the reply.
@@meteachesprogramming9395 It won't be something I tackle anytime soon. I am incredibly busy and do not have time for a full project based video like that.
Thanks! But how you will make that users who are already in the room will NOT receive socket event when new room is created, as he dont need it.
in your rooms object you just store name of the room which is string
and then you use to(roomName (which is string)) to emit event but how how does it know from just String
The 1st part of the code works properly but this one is not working please help me out
Can you make a random chat room system ,like a random chat app
i need some help i have a problem where devstart is missing as a command to run with the live server
really awesome tutorial .... but i want to delete the rooms after use ...how do that pls help
Hi,
In line 47, when broadcasting 'user-disconnected' event, why the parameter is socket id?
I have a question. How do I link stylehseets? I added some and it appears in my source-code. I can open the link via browser and the see code there but it isn't applied to the dom. Is there anything special I use to do? It's lying in the public dir next to script.js
FILENAME must be actual filename
you should add a support to mongodb
Question. If you using websocket, do I still need myphpadmin? I'm new so pardon my ignorance
socket is not working :/ in google chorm but work with other browser. name cant detect keep saying null or undefine
Cannot read property of users of indefined
Please help my browsers are not connecting what to do😢😢😢😢
I don't know why it doesn't work for me. I have the exact same code. Live server doesn't open .ejs files like html, it opens Listing directory/ where I can see my project filkes. If I click on index.ejs, it just downloads it. I added a .html file into the views folder and it opened it. I tried to open a ejs folder from file explorer and it opened it in firefox but it displayed the script as text. Somebody please help.
thnx
You're welcome!
in my website i cant use socket.oi multiple pages.
is it valid or not i am doing ?
please make a video on command prompt
I have been planning to make a video on basic unix commands, but haven't gotten around to planning it out yet.
How about using a database with an event listener instead of socket.io? Is that a bad idea?
What if I want to make a chrome extension
you came in a wrong place then
would you make a video of chat room app using angular and save chat data using php api
How can I escape whitespaces in join link in indez.ejs if room name(ex. Room One) contains whitespaces.
Join
Got the solution
is this somewhere available in Nestjs?
Hello bro, how to limit only two persons in a room.
Can you make a video on how to deploy this app in heroku....
i just can't read this code
How can we moderate?
hey bro how to implement on online server plzz help how to excute node app.js on online sever
the tags do not work. I even tried to download the GitHub files, but they did not run
Obviously, no one can trouble-shoot your code without seeing it, but if I were to guess, I would say that there are 2 things that are most likely the source of your problem.
1. Hopefully you noticed that some ( but not all ) of those ejs tags have an equal sign on the left-hand side. One misplaced equal sign is a disaster in the world of ejs. But honestly, if you downloaded the code from Git Hub, and they didn't run either, this is probably not your problem. Because presumably, the Git Hub files would be correct.
2. Another possibility is outlined in a great article that you can find on the Internet. I will describe it so you will know what to expect. This guy tells you to get a picture of a kitten.jpg so that you can find out which statement you need to use to fix your problems. Then he gives you 3 choices. You try choice 1, and test it with the kitten picture. Then you try choice 2, and test it with the kitten picture. Then you try choice 3, and test it with the kitten picture. For me, choice 3 was the one that worked. You have to put the kitten in a certain folder, and then try each choice, one at a time. The name of the article is: "Serving static files in Express", and you can find it here:
expressjs.com/en/starter/static-files.html
By the way, he tells you that you need to use the "path" module, from Node.js, but he never tells you to "require" the path Module. Without "path", choice 3 ( which I mentioned above ) will never work.
Shared Your channel link to my frirends..but please kindly add css to this app
you are so handsome......
Can these be converted to React?
how can I add this to my website?
I'm using visual studio code when i run the code its giving me an error .
what error is this
it would be cool if you made something like omegle. Users connect to a random generated a room and only 2 users can connect
How can I host this app
How do i deploy this application??
Can anyone suggest a way to add a databse to this chat app