0:01 Hey guys, in this video we're going to 0:02 take a look at socket IO. Okay, socket I 0:06 io gives us a way to have real time 0:08 two-way communication between server and 0:10 clients and this is done through a TCP 0:13 socket. So on the server side, socket io 0:17 will emit certain events and each client 0:20 that is connected will listen in a 0:22 birectional manner. So we can basically 0:25 send any serializable JSON object to and 0:28 from the server. So things like strings, 0:30 numbers, booleans, and so on. And we can 0:33 also stream data to the browser. So 0:36 let's jump in and we're going to create 0:38 a chat application. Okay, it's going to 0:40 be pretty simple. Uh we're going to 0:42 implement usernames. So the the user 0:45 will have to put in a username. Uh once 0:47 they do that, they'll be able to send 0:49 messages and uh each connected client 0:52 will update every time a message is 0:55 sent. And we're going to be using 0:57 Node.js JS and Express for our server. 1:00 All right, so let's go ahead and get 1:02 started. First thing we're going to have 1:03 to create a 1:05 project. Uh, so I'm going to create a 1:08 new 1:09 folder. And I'm just going to call this 1:13 um IO 1:15 chat. Okay. Now, in here, we're going to 1:19 open up a command line. Now, I'm using a 1:21 program called Git Bash. Uh if you want 1:24 this you can get it at I believe it's 1:29 gitcm.com I believe. Yeah. Okay. So it's 1:32 available for Windows, Mac, I think 1:34 Linux as well. And it just gives you a 1:37 command line um in Windows that is more 1:40 it's it resembles a terminal in Linux as 1:44 far as commands. We can do ls and and 1:46 whatever. Um it's not needed. You can 1:48 definitely just use the standard Windows 1:50 command line if you want. And of course, 1:52 it also comes with the git version 1:53 control system, which is really nice as 1:56 well. All right, so what we're going to 1:58 do here is we need to create a 2:00 package.json file. So let's do npm init. 2:04 All right, and you do need node.js 2:06 installed. If you don't have that, then 2:09 go to 2:11 nodejs.org. Okay, you just want to 2:13 download it and install it. That'll give 2:15 you Node as well as npm. All right, so 2:18 name IO chat. That's good. We're just 2:20 going to click enter. Version 2:22 description, I'm just going to say 2:24 simple chat app. Entry point is going to 2:27 be 2:30 server.js. Okay. Author, you can put 2:32 your own 2:35 name. Yes. Okay. So, now let's open this 2:40 in Sublime 2:43 Text. Uh, let's see. We 2:46 want C drive. 2:51 projects 2:53 and where is it? IO chat. Okay, so we 2:57 have our package.json. Let's open that 2:59 up. We're going to need a couple 3:04 dependencies. So for dependencies, we're 3:07 going to need socket 3:11 io. Okay, we want the latest version. 3:14 So, we're going to just put an asterisk 3:16 and then also 3:20 express. All right. And that's it. So, 3:22 let's save that. And then we'll go back 3:24 to our command line here and let's run 3:28 npm 3:30 install. Okay. That'll get our 3:32 dependencies all set 3:34 up. And we're also going to want to 3:37 create two more files. Okay. We're going 3:39 to want 3:41 uh let's see, server.js 3:43 js. Oops. 3:45 Server.js. That'll be our express 3:48 server. And then we also need our 3:50 client, which will be just an index 3:55 html. All right. So, let's open up 3:59 server.js. Okay. First thing we're going 4:01 to have to uh include all of our um 4:04 modules or files. So let's say var 4:09 express is going to require 4:14 express. Okay, we're going to need to 4:17 create our app variable. We're going to 4:19 set that equal to 4:20 express. All right, we need to set 4:23 our server variable. We're going to set 4:27 that to 4:31 require HTTP. And then we want to say 4:34 dotcreate 4:36 server. Okay. And then we'll just pass 4:38 in 4:39 app. Okay. Next thing is uh socket io 4:43 itself. So we need to say var 4:47 io is going to 4:52 require socket.io. And then we want to 4:56 call.listen. Okay. And then we want to 4:58 pass in that server variable. 5:01 Now, we're going to have two arrays. One 5:04 is going to be for 5:07 users and one's going to be for 5:12 connections. All right. Now, we need to 5:15 run the server. We're going to say 5:18 server.listen and then we're going to 5:20 pass in port 3000. Actually, you know 5:24 what? Let's say 5:26 process. Env. 5:30 or 5:31 3000. All right. And then what we need 5:34 to do is create a route. We're going to 5:37 say 5:39 app.get. That's going to be just the 5:41 homepage or 5:43 slash. Okay. When we visit that, we're 5:45 going to run a function. It's going to 5:46 take in a request and 5:48 response. And all we're going to do is 5:50 say 5:51 res.end 5:53 file. And we'll put in dur name plus 5:59 oops ah what' I 6:01 do and then this will be 6:06 slashindex.html. All right so that 6:08 should run for us. Uh let's do our 6:10 console log right 6:13 here. Okay we'll just say 6:17 server 6:18 running. All right let's go ahead and 6:20 try it. So if we open up our command 6:25 line, let's say 6:28 uh 6:29 node 6:31 server. Okay, server running. Now if we 6:34 go to 6:37 localhost 6:39 3000 okay so what it's doing is it's 6:41 serving our index file which we don't 6:43 have anything in it yet. So let's say I 6:49 chat and let's just say 6:53 test. All right, reload. Okay, when we 6:56 edit the HTML file, we don't have to 6:58 restart the server, but if we edit the 7:00 server.js, we do. Okay, so now we have a 7:04 basic server that's um giving us this 7:06 HTML. So next thing we want to do is uh 7:10 open a connection with socket io. All 7:14 right. So, let's go down to here and 7:17 let's say 7:22 iosockets.on. Okay. Then we're going to 7:24 pass in 7:28 connection. Then we have our function 7:31 that's going to take in socket. Okay. 7:34 Now, all of the events that we need to 7:37 emit are going to go in 7:39 here. Now, when this runs and we 7:42 connect, we're going to take this 7:43 connections array right here, and we're 7:46 going to say push because we want to add 7:49 on to it the socket. All right. And then 7:52 we'll just do 7:56 console.log. And let's say 8:00 connected. And we're going to use a 8:03 percent s right here. And then say 8:07 sockets connected. 8:11 All right. And 8:12 then we're going to 8:14 say 8:20 connections.length. All right. Just like 8:24 that. And let's write our 8:27 disconnect. Okay. That's going to go in 8:29 here as 8:32 well. And first thing we're going to do 8:34 is check to see if there's a username or 8:37 not. If there isn't 8:40 um actually you know what we won't do 8:42 that yet for now let's just say 8:49 connections. Okay. And then we want to 8:51 pass in 8:55 uh 8:56 connections.index 9:00 of 9:02 socket and then we're going to pass in a 9:04 one. All right. And then we'll do our 9:07 console 9:09 log. Okay. Console 9:13 log 9:18 disconnected. 9:20 S sockets connected. Okay. So basically 9:24 we just want to tell us when someone 9:25 disconnects we want it to tell us how 9:27 many uh are still connected. All right. 9:31 So we want to pass in 9:34 here 9:37 connections 9:39 length. 9:42 Okay. So let's save 9:44 that. Now it shouldn't do anything yet, 9:47 but just to make sure that we don't have 9:49 any errors or anything, let's restart 9:51 that. 9:53 Okay. All right. So now what we're going 9:56 to want to do is go into our index 9:59 file and we're going to build out our 10:02 interface. Okay, we're going to use 10:03 Bootstrap. So let me just grab 10:07 that. I'm just going to paste a couple 10:09 things in 10:11 here. All right, so first thing we have 10:14 Bootstrap CSS. We're linking from the 10:16 CDN. This here is jQuery. Okay, we're 10:19 going to be using jQuery. And then we 10:21 have the socket iojs file. Okay. So, we 10:24 need that 10:25 stuff. All right. Now, in the body, 10:28 let's go ahead and add some Bootstrap 10:30 stuff. So, we'll say 10:32 class 10:36 container. And then we're going to have 10:38 a 10:46 row. All right. And 10:49 then in that row we're going to 10:53 have a four column div. So column 10:58 D4 and then an eight 11:07 column. Whoops. That should be 11:11 eight. Okay. So we got two columns. This 11:13 here is going to be the sidebar. That's 11:15 going to show the users. And this will 11:16 be the main chat area. So in the 11:19 sidebar, let's create a div. And we're 11:22 going to give it a class of well. 11:24 That'll give it a gray background with 11:26 some 11:27 padding. All right. And then we'll have 11:30 an 11:31 H3. We'll say online 11:35 users and then just simply a div with an 11:39 ID of 11:41 users. Okay, that's going to be a 11:43 placeholder for us. 11:46 All right. Actually, you know what? 11:47 That's going to be a ul. Let's do 11:50 ul and let's give it a 11:53 class of list 12:01 group. Okay. And then over here in the 12:04 eight 12:05 column, let's go ahead and add a 12:08 placeholder for our chats or messages. 12:11 So, we'll say div. I'm going to give 12:13 this a 12:14 class of chat as well as an ID of 12:22 chat. All right. And then under that 12:25 we're going to have our 12:28 form. So we're going to give this an ID 12:31 of message 12:38 form. Okay. And then let's see. Let's 12:41 open up a div 12:43 class form group. Okay, these are just 12:46 Bootstrap formatting classes. And we're 12:49 going to have a 12:52 label. Okay, this will say enter 12:57 message. Okay, then we'll have a text 13:01 area. Text area is going to have a class 13:04 of form 13:07 control. It's going to have an ID. 13:09 Whoops. 13:11 an ID of 13:17 message. Okay. Then I'm going to do a 13:19 line break and then we're going to have 13:21 our submit. This is going to be an input 13:23 with a type of 13:25 submit. I'm going to give it a 13:28 class of btn and btn 13:33 primary and then a 13:36 value. and we'll say 13:39 send 13:42 message. All right. So, there's our 13:44 button. There's our form. So, uh let's 13:47 go ahead and save 13:49 this. Okay. Um I want to push everything 13:52 down. So, what I'm going to do is just 13:53 add in style tags up here. 13:59 And let's set 14:02 body to margin top is going to be 30 14:07 pixels. All right. So there's our chat 14:11 interface. Now we are going to have a 14:14 user form, a username form that's going 14:17 to show when we enter the application. 14:19 This stuff isn't going to show yet. Once 14:21 we fill in the name, then this will show 14:23 and the name will go over here and we'll 14:25 be able to add messages with the name 14:27 and the message. But for now, I want to 14:29 start out with just messages. Okay, 14:31 we'll get into that other stuff in a 14:33 little bit. All right. So, first thing 14:35 we want to do is let's create some 14:37 script tags down 14:42 here. All right. And we're going to be 14:45 using jQuery. So, we're going to say 14:50 um 14:54 function. Okay. Okay. And then what 14:56 we're going to do is create a 14:58 variable called 15:01 socket. And we're going to set that to 15:05 IO 15:08 connect. All right. Now, let's save this 15:11 and let's restart the 15:13 server and see what happens. Okay. Okay. 15:16 If we go 15:20 and Okay. So, it looks like when we 15:24 connect, it's connecting and then autom 15:26 and then it's 15:27 disconnecting. All right. So, uh what 15:29 I'm going to 15:32 do, let's see. 15:35 Disconnect. Oh, wait a minute, guys. I 15:38 did this this part totally 15:40 wrong. All we're doing here is is 15:43 splicing. We didn't even call 15:44 disconnect. 15:47 Um, so what I have to do here is 15:50 actually let's go right here and say 15:57 socket.on. Um, 16:02 oops, that's not what I want. That was 16:04 right the first time. So on 16:07 disconnect. Sorry about that. And kind 16:09 of a brain fought. 16:13 Okay, that's going to take in 16:16 data. And then what we want to do is 16:18 take this, copy it, and then put it in 16:24 there. All right. So now let's 16:28 restart. Okay. Now if we go refresh. All 16:32 right. So now it says that we have one 16:34 sockets connected. Now if I go and open 16:36 a new tab and connect. Now you can see 16:40 we get two. All right. And then we close 16:43 it. It says disconnected. Tells us we 16:45 have one socket left that's connected. 16:47 So that's working perfectly. So now what 16:50 we want to do is we want to be able to 16:52 send messages. So let's go under the 16:54 disconnect and let's say send 16:57 message. Okay. And we're going to do 17:02 socket.on. And let's call this send 17:06 message 17:09 function. Okay. a function. This is 17:11 going to take in 17:12 data. And then what we're going to want 17:14 to do is emit a new message event. So IO 17:18 do sockets. Okay, this time it's plural 17:24 sockets. Okay, and then we're going to 17:26 emit new 17:28 message. Okay, and we're also going to 17:30 send along some data. We're going to 17:32 send a 17:34 message data. And later on when we 17:38 implement usernames, we'll be sending 17:39 that as well. But for now, we're just 17:40 sending the data. All right. So, let's 17:43 save 17:44 that. And then in our 17:47 index, let's create some some more 17:50 variables here. So, we'll create a 17:52 variable called message form. And we're 17:56 going to set 17:57 that to 18:00 ID message 18:02 form. Okay. Okay, we also have this the 18:05 message which is the text area. You can 18:08 see it has an ID of 18:10 message. So let's just take that 18:14 off. All right. And then the chat window 18:17 itself, let's say 18:21 chat. Okay. And that's going to 18:26 equal 18:29 chat. All right. So I think that's good 18:31 for now. Now we have to create an event 18:34 for when message form is submitted. So 18:36 let's go down here and say message form 18:43 dotsubmit. Okay. And then let's just 18:46 pass in e wh 18:49 e and we're going to say prevent 18:52 default. And just to test it out we'll 18:55 say console.log 18:58 log submit 19:01 it. Okay, let's open up our Chrome tools 19:05 console. Submit. And we get submitted. 19:07 Okay, so we know that that's that's 19:09 working. Um, now what we're going to do 19:13 is we're going to emit the send message, 19:15 which is this right here. Okay, so let's 19:19 say socket.eit 19:23 emit and pass in 19:27 send 19:28 message. Okay. And then we're also going 19:31 to send the data which is going to be 19:33 the message that comes in through the 19:36 text area. All right. So we'll say 19:39 message 19:41 val. All right. And then the last thing 19:43 we want to do in here is just clear 19:47 uh the message variable. So message 19:50 dot val is just empty now. All 19:54 right. So what's going to happen is when 19:57 we submit the form it's going to send 19:59 message. It's going to get caught here 20:01 and then it's going to emit something 20:03 called new message. So we have to catch 20:06 that back on the 20:09 client. But before we do that let's 20:12 actually say 20:16 console.blog data. All right. And then 20:18 we'll reset the 20:22 server. Okay. And let's say 20:26 testing. All right. And then you can see 20:28 over here we get testing. So 20:30 now we're going to emit new message and 20:33 we're going to pass that data. So let's 20:36 go back to 20:37 index and let's say 20:43 socket.on. Okay. Okay, we want new 20:49 message. Okay, that's going to give us 20:51 the 20:52 data. And then what we'll do is take the 20:55 chat window or the chat area and append 20:58 onto 21:00 that. Okay, we're going to append a div 21:03 with a class of well. 21:11 All right. And then in here, let's put 21:16 um let's see. Let's just concatenate 21:20 data 21:23 message. All right. So, let's save 21:29 that. And there we 21:34 go. Cool. All right. And if we go and 21:38 open up a new socket 21:44 here and 21:46 say hi there. Go back to the other 21:50 window and you can see there it 21:52 is. So we can now have chats back and 21:55 forth. Okay. No no no page reloading, 21:58 nothing like that. It's all done through 22:01 websockets. 22:02 So now that we have the messages all 22:04 set, we're going to start to work in the 22:06 user functionality. Okay. So what we'll 22:09 do is let's 22:11 go let's go to our index page and let's 22:16 create a user form. All right. Now when 22:19 the user hasn't submitted their form 22:22 yet, I don't want any of this to show. 22:25 All right. So I'm going to 22:27 put this row. I'm going to give also 22:30 give an 22:31 ID. All right, let's say 22:35 message. 22:38 Oops. Mes messagees message 22:41 area. All right. And by default, we 22:43 don't want that to show. So up here, 22:45 we'll say 22:47 ID message area. And we're going to set 22:50 that. Whoops. That should 22:53 be out 22:57 here. Okay. Okay, we're going to set 22:59 display none. Okay, so now when we 23:03 reload, we don't see anything. All 23:06 right, now what we do want is our user 23:08 form. All right, so this 23:11 ends 23:13 here. Actually, let's just go above 23:17 it. Okay. And we'll say div 23:22 um 23:25 id let's say user area I don't know user 23:29 form 23:31 area. And then we'll give it a class of 23:38 row. Okay. And then let's do div class 23:44 and we're going to do a 12 column 23:48 div. All right. And then our form. I'm 23:51 going to copy message 23:54 form. Okay. And then we're going to 23:56 change this to user 24:00 form. Label will be 24:03 enter username. And this is going to be 24:06 an 24:08 input. and it'll have the ID of 24:16 username. Okay. And then this here we'll 24:19 just say 24:23 login. Okay. So there's our 24:28 form. Now down in our jQuery, we need to 24:31 add a couple more variables here. Okay. 24:34 So we're going to have one for the form 24:36 itself. 24:46 Okay. Actually, we're going to want one 24:47 for the user form area, 24:53 too. User form area and also the message 25:03 area. All right. Then we're going to 25:07 need uh 25:12 users and then also 25:20 username. All right. Now for the 25:23 submission of the user form, let's copy 25:28 this. We'll change that to 25:33 user. All right. Right. And then we're 25:34 going to say 25:37 socket.eit and let's say new 25:40 user and we're going to pass in the 25:42 value of the username 25:46 input. Okay. Then what we're going to 25:50 do is let's change that to username. 25:56 And now this socket emit this is going 25:58 to get in a third 26:00 parameter which is going to be our 26:04 function. All right. And we can pass 26:11 data and then we're going to test for 26:13 that 26:14 data. Okay. So if data then what we want 26:19 to do is hide the user 26:22 form or the user form area. Sorry. 26:27 dot 26:29 hide. And we're going to want to show 26:31 the message form 26:34 area. I think it's just message 26:39 area. Oh, I didn't change 26:42 these. Yeah. So, that'll be that message 26:46 area. This will be user form 26:53 area. All right. So back down here, 26:55 let's say 26:57 message area.sh 27:01 show. All 27:03 right. So now let's go to the server and 27:06 let's work with this new user. All 27:08 right. So you can see that it's 27:09 basically just passing events back and 27:12 forth with data. Okay. So let's go down 27:15 here and we'll say new 27:19 user. Okay. Socket.on. 27:26 on new 27:32 user. Okay. Now, this is going to take 27:34 in a data and a call 27:38 back. Okay. And then we're going to set 27:41 call 27:43 back to 27:46 true and socket dot 27:52 uh socket do usernusername equals the 27:54 data that that was fetched and then 27:58 we're going to take that users array and 27:59 we're just going to push onto 28:02 it. Okay. So 28:05 users.push socket dot 28:11 username. All right. And then what we'll 28:13 have to do is update the usernames. So 28:17 let's say 28:19 update usernames. All right. And we need 28:22 to create that 28:28 function. Okay. Update 28:31 usernames. And what that's going to do 28:33 is 28:38 iockets.eit. Okay. Okay, we're going to 28:40 emit get 28:42 users and 28:43 pass 28:47 usernames. So now on the other side on 28:50 the client, we need to get get 28:52 users. But before we do that, when the 28:55 user disconnects or closes the tab, 28:57 we're going to want that username to be 28:59 pulled out. Okay, so let's go back up 29:01 here to the 29:03 disconnect and actually let's go above 29:06 it. 29:08 All right. And we'll 29:09 say 29:12 if if there's not a username. So if not 29:16 socket 29:17 dot username, then we'll say 29:22 return. Okay. Now if there is then we're 29:25 going to say username actually 29:28 users 29:31 doslice. Okay. Okay. And then we're 29:33 going to pass in uh users do index 29:40 of socket dot username and then we want 29:44 to pass in a 29:45 one and then just call update usernames 29:50 again. All right. So that should do 29:52 that. And then let's go back here and 29:54 we're going to do the get us or get 29:57 users. That'll go right here. 30:05 Okay. 30:07 Socket.on get 30:09 users 30:16 function. All right. Let's create a 30:18 variable called HTML. We'll set that to 30:20 nothing. And then we're going to do a 30:22 loop through the users. All right. So 30:25 we'll say for uh I is equal to zero. And 30:29 then we're going to say as long as I is 30:32 less than 30:37 data.length. Okay. And then we need to 30:39 increment by 30:42 one. And then through in each iteration 30:44 we're going to append to the HTML 30:46 variable. So we want to use plus equals 30:49 here. All right. And then let's send li 30:53 give it a class of list group or list 30:56 group 31:00 item. All right. And let's 31:05 see. We're going to want to concatenate 31:07 right 31:09 here. And we want to say 31:13 data and I for whatever iteration it 31:18 is. Okay. And then what we want to do is 31:21 go outside of the for loop and say 31:26 users.html and then pass in that HTML 31:31 variable. All right. So let's see what 31:33 we have going on here. So let's restart 31:36 the 31:38 server. Okay. We have two sockets 31:40 connected. That's 31:42 correct. Uh or 31:47 three. Oh, actually, wait a 31:56 minute. Okay, so it's not disconnecting 31:59 when 32:01 we when we 32:04 exit. And I think it has to do with 32:08 this. You You know what? Let's just get 32:11 rid of that and try that out. 32:22 All right. So, one socket's connected. 32:25 Let's see. Let's enter a name. Log 32:28 in. Uh, let's see. Reference error. 32:31 Usernames is not defined in 32:34 server.js. Uh, let's see. Oh, I have 32:39 usernames. This should actually be 32:41 users. 32:42 Let's make sure we don't have that 32:44 anywhere 32:51 else. All right. So, let's try that 33:03 again. Okay. So, we logged in. Now we 33:06 have Brad over here. Let's do a little 33:09 test. We'll say hello. 33:11 Okay. Actually, you know what? We need 33:13 to make the name be there as well. So, 33:16 let's go back to index and go down to 33:20 actually, you know what? We need to 33:21 actually send that along. How many times 33:24 did I just say 33:26 actually? All right. So, you can see 33:28 right here the new message we're sending 33:31 message data. Okay. We also want to send 33:34 the user. So, let's put a comma right 33:37 here. And we're going to say 33:39 user and then socket dot 33:45 username. All right. And then on the 33:48 index, let's see. Get users. No, we 33:52 don't want that. We want get 33:54 messages or new message. Okay. Right 33:56 here. And then let's put in a strong 34:01 tag. Okay. Strong. And let's see. 34:11 Then we're going to go here and 34:14 concatenate data dot 34:17 user. All right. And we'll put a colon 34:20 right here as well. All right. So let's 34:23 try this 34:30 again. Okay. So Brad log 34:35 in. 34:36 Hello. All right. So now we're getting 34:38 the name. So let's try to add our 34:41 connect again as a add a new 34:44 client. Okay. So we'll say 34:47 Jim. All right. And we can see Brad and 34:50 Jim. And if I go to Brad's tab, you can 34:53 see that Jim was 34:55 added. Let's say hi 34:59 Brad. And there it is. And then we'll 35:02 say, "Hi, 35:05 Jim." There we go. 35:08 Awesome. So, we now have a chat 35:10 application using websockets. All right. 35:13 So, this video went a little longer than 35:15 I wanted it to, so I apologize for that. 35:18 Um, hopefully you guys learned a little 35:20 something about websockets and you'll 35:22 continue to uh use them in your 35:25 projects. All right, so thanks for 35:26 watching. If you can subscribe or leave 35:29 a like, that would be great. and I will 35:31 see you next time.
1:00:21
12:08
52:41
3:23:11