Socket.io Chat App Using Websockets

hey guys in this video we're going to take a look at socket IO okay so socket IO gives us a way to have real-time two-way communication between server and clients and this is done through a TCP socket so on the server side socket IO will emit certain events and each client that is connected will listen in a bi-directional manner so we can basically send any serializable JSON object to and from the server so things like strings numbers bully ends and so on and we can also stream data to the browser so let's jump in and we're going to create a chat application okay it's going to be pretty simple we're going to implement user names so the user will have to put in a username once they do that they'll be able to send messages and each connected client will update every time a message is sent and we're going to be using nodejs and Express for our server alright so let's go ahead and get started first thing we're going to have to create a project so I'm going to create a new folder and I'm just going to call this i/o chat okay now in here we're going to open up a command line I'm using a program called git bash if you want this you can get it at I believe it's get SCM dot-com I believe yeah okay so it's available for Windows Mac I think Linux as well and it just gives you a command line in Windows that is Morse it's it resembles a terminal in Linux as far as commands we can do LS and whatever it's not needed you can definitely just use the standard Windows command line if you want and of course it also comes with the git version control system which is really nice as well alright so what we're going to do here is we need to create a package.json file so let's do NPM in it alright and you do need nodejs installed if you don't have that then go to node.js org okay just want to download it and install it that'll give you node as well as NPM alright so name IOH at that's good we're just going to click enter version description I'm just going to say simple chat app entry point is going to be server dot j s okay author you can put your own name yes ok so now let's open this in sublime text let's see we want C Drive projects and or is it io chat ok so we have our package Jason let's open that up we're going to need a couple dependencies so for dependencies we're going to need socket IO ok we want the latest version so we're going to put an asterisk and then also Express alright and that's it so let's save that and then we'll go back to our command line here and let's run NPM install ok that will get our dependencies all set up and we're also going to want to create two more files ok we're going to want let's see server Jas oops server dot J s that'll be our Express server and then we also need our client which will be just an index.html all right so let's open up server J s ok first thing we're going to have to include all of our modules or files so let's save our Express is going to require Express okay we're going to need to create our app variable we're going to set that equal to Express all right we need to set our server variable we're going to set that to require HTTP and then we want to say dot create server okay and we'll just pass an app okay next thing is socket IO itself so we need to save our IO is going to require socket dot IO and then we want to call dot listen okay and then we want to pass in that server variable now we're going to have two arrays one is going to be for users and one's going to be for connections all right now we need to run the server we're going to say server dot listen and then we're going to pass in port 3000 actually you know what let's say process dot and dot port or 3000 all right and then what we need to do is create a route I'm going to say app dot get that's going to be just the homepage or slash okay when we visit that we're going to run a function it's going to take in a request and response and all we're going to do is say res dot send file and put in their name plus oops ah what I do and then this will be slash index dot HTML all right so that should run for us let's do a console log right here okay we'll just say server running all right let's go ahead and try it so if we open up our command line let's say a node server okay server running now if we go to localhost 3000 okay so what it's doing is it's serving our index file which we don't have anything in it yet so let's say IO chat and let's just say test all right reload okay when we edit the HTML file we don't have to restart the server but if we edit the server j/s we do okay so now we have a basic server that's giving us this HTML so next thing we want to do is open a connection with socket IO all right so let's go down to here and let's say IO dot sockets dot on okay then I'm going to pass in connection and we have our function that's going to take in socket okay now all of the events that we need to emit are going to go in here now when this runs and we connect we're going to take this connections array right here and we're going to say dot push because we want to add on to it the socket all right and then we'll just do console dot log and let's say connected and I'm going to use a percent s right here and then say sockets connected all right and then we're going to say connections dot length all right just like that and let's write our disconnect okay that's going to go in here as well and first thing we're going to do is check to see if there's a username or not if there isn't actually you know what we won't do that yet for now let's just say connections dot splice okay and then we want to pass in connections dot index of socket and then we're going to pass in a one all right then we'll do our console log okay console log disconnected s sockets connected okay so basically we just want to tell us when someone disconnects we want it to tell us how many are still connected all right so we want to pass in here connections dot length okay so let's save that now it shouldn't do anything yet but just to make sure that we don't have any errors or anything let's restart that okay all right so now what we're going to want to do is go into our index file and we're going to build out our interface okay we're going to use bootstrap so let me just grab that I'm just going to paste a couple things in here all right so first thing we have bootstrap CSS we're linking from the CDN this here is jQuery okay we're going to be using jQuery and then we have the socket IO JS file okay so we need that stuff alright now in the body let's go ahead and add some bootstrap stuff so we'll say class container and then we're going to have a row all right and then in that row we're going to have a four column div so column D for and then an eight column whoops that should be eight okay so we've got two columns this here is going to be the sidebar that's going to show the users and this will be the main chat area so in the sidebar let's create a div and we're going to give it a class of well that will give it a grey background with some padding all right and then we'll have an h3 say online users and then just simply a div with an ID of users okay that's going to be a placeholder for us all right actually you know what that's going to be ul let's do ul and let's give it a class of list group okay and then over here in the eight column let's go ahead and add a placeholder for our chats or messages so we'll say div I'm going to give this a class of chat as well as an ID of chat all right and then under that we're going to have our forum so we're going to give this an ID of message form okay and then let's see let's open up div class form group okay these are just bootstrap formatting classes and we're going to have a label okay this will say enter our message okay then we'll have a text area text area is going to have a class of form control it's going to have an ID an ID of message okay then I'm going to do a line break and then we're going to have our submit this is going to be an input with a type of cement I'm going to give it a class of BTN and BTN primary and then a value and we'll say send message all right so there's our button there's our form so let's go ahead and save this okay I want to push everything down so what I'm going to do is just add in style tags up here and let's set body to margin-top is going to be 30 pixels alright so there's our chat interface now we are going to have a user forum a username forum that's going to show when we enter the application this stuff isn't going to show yet once we fill in the name then this will show and the name will go over here and we'll be able to add messages with the name and the message but for now I want to start out with just messages okay we'll get into that other stuff in a little bit alright so first thing we want to do is let's create some script tags down here alright and we're going to be using jQuery so we're going to say function okay and then what we're going to do is create a variable called socket and we're going to set that to i/o dot connect all right now let's save this and let's restart the server and see what happens okay if we go okay so it looks like when we connect it's connecting and then autumn and then it's disconnecting all right so how what I'm going to do let's see disconnect I'll wait a minute guys I did this this part totally wrong all we're doing here is splicing we didn't even call disconnect so what I have to do here is actually let's go right here and say socket dot on um oops that's not what I want that was right the first time so on disconnect sorry about that and kind of a brain fought okay that's going to take in data and then what we want to do is take this copy it and then put it in there all right so now let's restart okay now if we go refresh all right so now it says that we have one sockets connected now if I go and open a new tab and connect now you can see we get two all right and then we close it it says disconnected tells us we have one socket left that's connected so that's working perfectly so now we want to do is we want to be able to send messages so let's go under the disconnect and let's say send message okay and we're going to do socket dot on and let's call this send message function okay function this is going to take in data and then what we're going to want to do is emit a new message event so i/o dot sockets okay this time it's plural sockets dot emit okay and then we're going to emit new message okay and we're also going to send along some data I'm going to send a message data and later on when we implement user names we'll be sending that as well but for now we're just sending the data all right so let's save that and then in our index let's create some some more variables here so we'll create a variable called message form and we're going to set that to ID message form okay we'll also have this the message which is the text area you can see as an ID of message so let's just take that off all right and then the chat window itself let's say chat okay and that's going to equal chat all right so I think that's good for now now we have to create an event for when message form is submitted so let's go down here and say message form dot submit okay and then let's just pass in equal e and we say preventdefault and just to test it out we'll say console dot log submit it okay let's open up our chrome tools console submit and we get submitted okay so we know that that's that's working now what we're going to do is we're going to emit the send message which is this right here okay so let's say socket dot emit hands pass in send message okay and then we're also going to send the data which is going to be the message that comes in through the text area alright so we'll say message dot Val alright and then the last thing we want to do in here is just clear the message variable so message dot Val is just empty now all right so what's going to happen is when we submit the form it's going to send message it's going to get caught here and then it's going to emit something called new message so we have to catch that back on the client but before we do that let's actually say console dot log data all right and then where we set the server okay and let's say testing all right and then you can see over here we get testing so now we're going to emit new message and we're going to pass that data so let's go back to index and let's say socket dot on and we want new message okay that's going to give us the data and then what we'll do is take the chat window or the chat area and append on to that okay we're going to append a div with a class of well alright and then in here let's put let's see let's just concatenate data dot message all right so let's save that and there we go cool all right and if we go and open up a new socket here and say hi there go back to the other window and you can see there it is so we can now have chats back and forth okay nope no page reloading nothing like that it's all done through WebSockets so now that we have the messages all set we're going to start to work in the user functionality okay so what we'll do is let's go let's go to our index page and let's create a user form all right now when the user hasn't submitted their form yet I don't want any of this to show all right so I'm going to put this row I'm going to give also given ID all right let's say message oops message area all right and by default we don't want that to show so up here we'll say ID message area and we're going to set that whoops that should be out here okay we're going to set display none okay so now when we reload we don't see anything all right now what we do want is our user form all right so this ends here actually let's just go above it okay and we'll say div ID let's say user area I don't know user form area and then we'll give it a class of row okay and then let's do div class and we're going to do a 12 column div all right and then our form I'm going to copy message form okay and then we're going to change this to user form label will be enter user name and this is going to be an input and I'll have the ID of user name okay and then this here will just say login okay so there's our form now down in our jQuery we need to add a couple more variables here okay so we're going to have one for the form itself okay actually we're going to want one for the user form area to use a form area and also the message area alright and then we're going to need users and then also username alright now for the submission of the user form let's copy this we'll change that to user alright and then we're going to say socket dot emit and let's say new user and we're going to pass in the value of the username input okay then what we're going to do is let's change that to username and now this socket emit this is going to get in a third parameter which is going to be our function alright and we can pass data and then we're going to test for that data okay so if data then what we want to do is hide the user form or the user form area sorry dot hide and we're going to want to show the message form area I think it's just message area all I didn't change these yeah so that'll be that message area this will be user form area all right so back down here let's say message area dot show all right so now let's go to the server and let's work with this new user all right so you can see that it's basically just passing events back and forth with data okay so let's go down here and we'll say new user ok socket dot on new user okay now this is going to take in a data and a callback okay and then we're going to set callback to true and socket dot so I could dot username equals the data but that was fetched and then we're going to take that users array and we're just going to push on to it okay so users dot push socket tot username all right and then what we'll have to do is update the user names so let's say update user names all right now we need to create that function okay update user names and what that's going to do is IO dot sockets dot emit okay we're going to emit get users and pass user names so now on the other side on the client we need to get get users but before we do that when the user disconnects or closes the tab we're going to want that user name to be pulled out okay so let's go back up here to the disconnect and actually let's go above it alright and we'll say if if there's not a user name so if not socket dot user name then we'll say return ok now if there is then I'm going to say user name actually users dot splice okay and I'm going to pass in users dot index of socket dot username and then we want to pass in a one and then just call update usernames again alright so that should do that and then let's go back here and we're going to do the get use or get users that'll go right here ok socket dot on get users function all right let's create a variable called HTML we'll set that to nothing and then we're going to do a loop through the users alright so we'll say for I is equal to zero and then I'm going to say as long as I is less than data dot length okay and then we need to increment by one and then through in each iteration we're going to append to the HTML variable so we want to use plus equals here alright and then let's send Li give it a class of list group or list group item alright and let's see we're going to want to concatenate right here and we want to say data and I for whatever iteration it is okay and then what we want to do is go outside of the for loop and say users dot HTML and then pass in that HTML variable all right so let's see what we have going on here so let's restart the server okay we have two sockets connected that's correct or three Oh actually wait a minute okay so it's not disconnecting when we when we exit and I think it has to do with this you know what let's just get rid of that and try that out all right so one socket is connected let's see let's enter our name login let's see your fans our user names is not defined and server J s let's see oh I have user names this should actually be users let's make sure we don't have that anywhere else alright so let's try that again okay so we logged in now we have Brad over here let's do a little test we'll say hello okay actually you know what we need to make the name be there as well so let's go back to index and go down to actually you know what we need to actually send that along how many times did I just say actually all right so you can see right here the new message we're sending message data okay we also want to send the user so let's put a comma right here and we're going to say user and then socket dot user name all right and then on the index let's see get users no we don't want that we won't get messages or new message okay right here and then let's put in a strong tag okay strong and let's see then we're going to go here and concatenate data dot user alright and we'll put a colon right here as well all right so let's try this again okay so Brad login hello all right so now we're get in the name so let's try to add an R connect again as a at a new client okay so we'll say Jim all right we can see Brad and Jim and if I go to Brad's tab you can see that Jim was added let's say hi Brad and there it is and then we'll say hi Jim there we go awesome so we now have a chat application using WebSockets alright so this video went a little longer than I wanted it to so I apologize for that hopefully you guys learned a little something about WebSockets and you'll continue to use them in your projects all right so thanks for watching if you can subscribe or leave a like that would be great and I will see you next time

Channel: Traversy Media

Views: 394,047

Keywords: socket.io, socketio, chat app, socket.io chat, websockets, express socket.io, socket io

Id: tHbCkikFfDE

Length: 35min 33sec (2133 seconds)

Published: Fri Feb 26 2016