Build a Chat App With MongoDB & Socket.io [Part 1]

[Music] hey guys in this video we're gonna be building a really simple chat application using MongoDB and socket IO so MongoDB is a no SQL database in socket IO allows us to have real-time communication between our client and server okay now this isn't going to be a production level application or anything like that the purpose of this is to quickly show you how these technologies work together and how we can build a really simple chat application all right so don't think that this is something that you're going to you know use in production ok now this actually comes from a course so they did with edge' wanax called mob projects in MongoDB which is a course where we build 12 different projects you can see let's see where is it right here this is the one we're doing here chat with socket IO this is loosely bulb actually it's really based on that that project alright but if you want to check this out please use the link in the description because that has my affiliate code in it alright so let's go ahead and just give you an example of how this works so we're just gonna put a name in here and down here we can type a message we'll say a little world and enter and it's just gonna add the message it says it gives us a little status thing here that disappears after a few seconds and we just have the name and the message now if I were to copy this link right here for the the HTML page and go to another tab and let's go ahead and first of all you can see that Brad's message is there but let's add a new name here we'll say Kevin and we'll say hello Brad enter and we get Kevin's message and if we go back to the other tab you'll see that it was automatically upload I was automatically added we didn't have to refresh or anything that's the beauty of socket IO is it's real time we don't have to do any refreshing or anything like that and if I type back to Kevin I'll just say hi Kevin and we'll go back to Kevin's tab and there we go so it shows hi Kevin so it's very very simple if we go ahead and reload the the messages are gonna stay there because they're being persisted to MongoDB okay I also have a clear button here if we click that it's gonna clear out the collection so if I reload now we have no chats all right now obviously this isn't something you would you would have on a production application because you wouldn't want anybody to just clear the chat out but the point of it is to show you that we can do that and show you how this stuff works okay reload that so that's what we building guys hopefully you enjoy it and let's get started alright guys real quick some dependencies for this project you're gonna need to have no js' installed if you don't have that just go to node.js org download it install it you're also gonna need MongoDB I do have a video called MongoDB in 30 minutes and that will show you how to set up on Windows I also have a video showing you how to set it up on Linux Ubuntu so you do need that installed and then I'm also using a command line tool called git bash for Windows which is much better than the standard CMD or powershell so I will be using that as well now I'm using Visual Studio code as my editor okay you can use whatever you want but I am using Visual Studio code I'm also using the integrated terminal and what I've done is I've integrated get bash with the terminal and if you want to do that you can just go to the settings file and you can add this setting in right here for terminal integrated shell windows and then just point to the git bash direct exe file alright but you don't need to do that that's just what I prefer so let's go and get started I have a blank folder called chat and we're gonna start off by just saying NPM in it and we're gonna create a package JSON file so chat that's fine i'm gonna click enter version good description we'll say simple chat app using sockets entry point I'm gonna say server dot J s and just enter through the rest and that should be good alright and if we look at our package dot JSON file it should look something like this now we're going to need two dependencies for our server we're gonna need the MongoDB driver and we're also gonna need socket IO so let me just pull those documentation pages up those might help you out even further so we're gonna be using the MongoDB native node driver and let's click on the github page here so to install we just need to do NPM install MongoDB and if we go down here it gives us some examples shows us how to connect and all that how to insert a document it's not the most intuitive ORM I'm something like Mongoose or Jas would be better but this is very simple and it's more than you know more than enough for what we're doing and then we're also using socket IO it's a github and this is the documentation for socket IO so enables real-time bi-directional event based communication and this also shows you how to connect and stuff like that so these are definitely some some documentation pages to check out and people often ask me you know what are you used to learn with some good relearning resources in addition to you know courses and stuff like that the documentation is is usually the best way to to to really learn you know what's up to date you know the syntax that you should be using the most up-to-date syntax so you really want to check out the documentation for everything you're doing so let's go ahead and install those two things down here I'm gonna say NPM install MongoDB and also socket dot IO and we want to just want to do - - save that's going to add them to our package JSON file alright so now you can see those two have been added so let's close that up let's create our entry file which is going to be server dot j s alright and let's the first thing we're gonna do is bring in those two things so let's create a variable called and we're gonna set it to require and we want to bring in DB which is the native driver and we want to just add on to this say dot client like that okay we also want to bring in Sukkot dot io actually we're going to call this client and we're gonna set that to require and here we're gonna say socket dot IO and then we also want to listen on a certain port so I'm gonna say we want to listen on port 4000 and then we just want to add on dot sockets okay so that will allow us to run our server or run socket IO on port 4000 so now what we want to do is connect to MongoDB okay and I'm gonna really try to comment this stuff because some of it is a little confusing so I want I really want you guys to understand what's going on so let's say connect to okay so for that we're gonna take that MongoDB variable that we created and actually it's just and we're gonna call connect alright and this stuff is all in the documentation if we go let's see right here so they called it client and they're saying doc connect they want you want to put the URL in then you have a callback function so let's go ahead and do that Jesus have so many things open here so doc connect we want to put our URL in which is gonna be DB and that's gonna be on our local host which is 127.0.0.1 and we're gonna say slash and the database is gonna be called chat now we don't actually have to go in and create the database it'll do that for us okay which is nice and then we have our callback function and this is gonna take error and it's also gonna take what we'll call this DB ok so DB is what we're going to use to to run queries and stuff all right so let's first check for the error so we'll say if there is an error with the connection then we're just going to throw the error all right and then let's just do a console.log letting letting you know the console know that we're connected so we'll say DB connected all right so let's see let's try that out so we'll save it let's go down here and let's say node server J s and we get MongoDB connected okay so that's working out let's ctrl C to stop it now instead of having to do node server J s what I'm gonna do is add an NPM script so if we go to package Jason we don't need this test here so I'm gonna just replace this with start and let's change this to node server dot J s all right so that way down here we can just say NPM start and it starts up our server alright so let's go back now we're gonna start to work with socket IO first thing I'm going to do is we need to connect so if we go back to our documentation for socket IO let's see right here so they called it IO we called it client but we're gonna do dot on connection and then we have our function and then we do everything inside of that so let's do that alright so it's just put a comment and we'll say connect to actually I want to put it under this console log connect to socket IO so we're going to take client dot on connection that then we'll have our function okay now we want to create a collection for a Hmong in MongoDB and I'm just gonna call that chat so let's create a variable called chat and let's set that to DB okay remember we have this DB value that that's being passed in and we can use that to run queries and stuff like that so let's say DB dot collection and we're gonna call this chats okay so let's at equals DB collection chats then what we're gonna do is create a function to send send the status to the client from the server so let's say I create function to send status all right so we're gonna say send status equals a function oops spell that right function it's gonna be passed into parameter let's say s and then we're gonna omit that so if we say socket dot emit s okay and that's going to emit the status whenever we want to basically pass something from our server to our client to the index.html file we're gonna create we want to do this a dot emit okay so we're just this is just a function to emit the status actually you know what we need to name this too so we'll name it status so two parameters we're gonna name it and then we're set we have the value we're actually sending so now we want to do is we want to get all the chats from the collection so let's do that I'll say get chats from collection and we're gonna take that chat value okay because this is the collection we created right here and we're just gonna say dot find and let's let's go ahead and limit it to a hundred so we'll say limit to one hundred chats and let's also sort them okay and this is all this is all the MongoDB driver if you look at the documentation you'll see this kind of stuff so we want to we want to sort it by ID okay every entry is going to have an underscore ID value and that's what we want to start that's what we want to sort it by so we're gonna say underscore ID one okay and then we just want to set to array okay so we're gonna say to array and then in here we're gonna have a function alright and then this function is going to take in an error if there is one and then a result and then we want to take that result first of all we want to check for the error if there is one then we'll just say throw error okay if there's not then what we want to do is we want to emit the messages okay and to do that remember we say socket dot emit okay just like we did here to emit the status but we're gonna call this output and that we want the actual data that we want to emit which is the result okay so again we're fetching the chats or the messages and then we're taking the result that's being sent back and we're going to emit it to the client to the index file that we're going to create later on okay so now what we want to do is we want to handle input events okay so we want to handle when someone on the client types in a message and sends it we need to handle that so it's a handle input events alright so for that we're gonna say socket dot on this is how we can kind of catch things from the client and we'll call this input then we have a function okay and then that function is going to include the data okay whatever that the user sends from the client will be put into that data value now we're gonna make it so that they can send a name and a mess so let's create variables for those we'll say let's name equals data dot name and then we're gonna say let message equals data dot message okay and a lot of this might not make sense to you right now but once we start to build the UI and the client it'll it'll be a little more clear alright so first let's uh let's make sure that they actually included a name and a message when they send it so what we'll do is go right underneath and let's just say check for name and message well just do a simple if statement and we're gonna say if the name is if name is equal to nothing so if it's left blank or message is equal to nothing okay so if either one of these are blank then let's send a status we'll say send I don't I'll send error status and remember we created that send status function so we can use that out okay so send status and we're gonna say please please enter a name and message okay now the send status right here is coming from here we created that function okay so now let's put in else okay so as long as they do put in a name and a message then what do we want to do we want to insert it into the database we'll say insert and message so again we can take that chat variable and we can call insert okay and then we want to pass in here an object which is going to be first of all the name I'm gonna set it to name which is this right here it's going to be coming from the client and then we also want message set that to message all right and then the next parameter is going to be a function okay and that function what we want to do is we want to omit the output back to the client so remember we do client dot emit okay so we're just going to emit we're gonna call it output and then we just want to emit the data okay and then we're also gonna send the status after we do that insert or after we emit the data so let's go right here and I'll just say send status object so call our function send status that we created and in here we're gonna passed an object and it's just gonna have a message which we're just gonna set to message sent and then I'm also going to include a value called clear okay so if we should clear the message or not I'm gonna say true for that and you'll see why we're doing that later on alright so we're almost done with our server now we want to handle clearing the messages remember we have a button that will clear everything so I want to handle that so let's see we're gonna go right after this socket dot on input which ends right here and let's say handle clear so for that will say socket dot on and we're gonna say on clear okay so if from the client we initiate a clear then we're gonna run this function which will take in the data all right and then in here we're going to remove all chats from the collection okay and we can do that by taking that chat variable and calling remove and then sorry about that we want to remove we want to pass in just blank blank curly braces because we want to remove everything and then we have our function and then we just want to emit an event letting the climb know that everything's been cleared okay so for that will say socket dots omit and we're going to pass in we're gonna call it cleared okay and that's it so just realize that when we're communicating back and forth with socket IO we do this this dot omit okay to send things from the server and we can also send things from the client to the server which we're gonna do next so let's go ahead and make sure we can still run our server by saying NPM start all right so we don't have any errors which is a good thing now we still don't know if everything's gonna work because we haven't created our client-side yet so what I'm gonna do is I'm gonna stop here and then in part two of this series we're going to set up our front end we're gonna set up an index.html file so that we can connect to our server and we can start to build out our UI and the functionality to actually communicate with the server so if you guys really like my videos and you'll learn a lot from them and maybe you have a couple extra dollars to spare check out my patreon page I'm working on creating special content for patrons you also get special deals on future courses and there's even an email support tier for all YouTube videos and projects to learn more visit patreon.com slash travis e media

Channel: Traversy Media

Views: 192,379

Rating: 4.9192662 out of 5

Keywords: mongodb, chat app, socket.io, socketio, build a chat app, socket.io mongodb, mongo, javascript, node.js, node.js chat

Id: 8Y6mWhcdSUM

Length: 20min 54sec (1254 seconds)

Published: Thu Jul 27 2017