How to Build a Socket.io Application12:12 with Jim Hoskins
Now we have Socket.io set up and messages being sent to and from the server, now we will create a basic application. We will start by creating a real-time chat that will allow multiple browsers to send chat messages that will appear instantly in all browsers.
[<Code/Racer> Building a Socket.io Application] 0:00 In the last video, we got socket.io up and running, and we saw how to send some 0:06 basic messages from the server to the clients. 0:10 Before we can build a full game, let's work on just getting a simple example up and running. 0:13 Basically, I updated our page just a little bit. 0:19 Now we have two version of our page, because we want to see how we 0:22 communicate from one to the other. 0:25 I added an un-ordered list here with some messages or at least a place for our messages, 0:27 and an input box and a send button. 0:32 What I'd like to do is set up a very simple chat system where when I type in something here, 0:36 it shows up in our message list on any computer that's connected to our server. 0:40 What I've done is I've added a few things to our page, and I'll just go over them real quick. 0:46 The first thing I did was add a copy of jquery.js, which I just started in our public directory here. 0:51 That'll help with actually updating our forum and receiving events. 0:56 That's in our layout.eco file. 1:00 Then in our index.eco, I have a un-ordered list here with the ID of message, 1:02 and the idea is we'll just insert another list element for each message. 1:07 Then I have an input with an ID of message text, which is where we'll type in our message, 1:11 and a button with the ID of send, which will send out our message. 1:16 If we go to our application.coffee, I'm going to change this around a little bit. 1:21 Now that we have jquery, I'm actually going to defer all of our application code 1:25 until our document.ready, which can be done just by passing a function 1:28 to the dollar sign function of jquery. 1:33 In coffee script it looks a little something like this. 1:36 We could replace the dollar sign with jquery, 1:39 but what we're doing is actually calling jquery with a function. 1:43 Right here represents our function, but since in coffee script we don't need parentheses, 1:50 we can lose the parentheses. 1:55 By having the space here these parentheses actually represent a function, 1:57 and anything indented in it will be part of that callback function. 2:02 All of our code here will be stored. 2:05 Even if we go back and refresh, and we can wait a couple seconds to see if our code still works, 2:08 we'll still getting the same connection and everything we need. 2:15 The first thing we want to do is worry about just our basic events. 2:20 We're going to keep our socket connected, but let's listen for our click event 2:22 on our send button. 2:26 We have an ID of "send" on our button so we can target it with jquery by just doing send. 2:29 We want to listen for the click event. 2:35 Again, this will take in a callback function, which in coffee script looks like this, 2:39 and in our click function we'll do something. 2:44 Let's just make sure we're working. Send click. 2:46 Now we can go back to our browser here. 2:53 If we refresh--sometimes we have to refresh it twice 2:55 just because if we catch it in the middle of the restart cycle from supervisor, 2:59 we may get a couple of errors down there. 3:03 We saw every once in a while if we come back right after we saved a file 3:06 it may not look right, so we can just refresh again. 3:10 Now if we click this, we can see we are successfully listening for the send event. 3:13 This is just some very simple functionality. 3:18 We're not going to make a fully functional chat or anything, 3:20 but we'll just do some basic stuff right now. 3:22 Then what we want to do is grab a message, 3:25 and we can get that from our input, which we'll remember our input is ID'd message-text. 3:29 We'll grab message-test.val, and now we should have our message. 3:35 And we'll just change our console.log here to show message 3:49 just to make sure we're grabbing that as well. 3:52 Give it a second to restart, refresh--still got one little error down there. 3:58 Now if we pull it up and say, "Hello," and if we click send-- 4:02 looks like I might have had a typo in here. There we go. 4:07 Just my save command key there. 4:12 Now if we go back and check, refresh it a couple times--there we go. 4:15 Now we'll type in "Hello." It looks like we're not quite getting what we need. 4:19 Let's see if I might have miss-typed something there. Yep. 4:24 I just forgot the pound sign indicating that we're looking for an ID. 4:26 That's easy enough. Now, one more time we'll go back and check. 4:33 Make sure everything is good. 4:36 Type "Hello." Click send. 4:38 Now we can see we're able to get the text. 4:41 Now we come down to defining what we want to do as far as the interface 4:43 between our client and our server. 4:48 What we'll do is we'll say that when somebody actually sends a message 4:50 we'll say "Message sent" as the name of the event, 4:54 and that'll be coming from the client to the server. 4:57 The way we can sent a message from the client to the server is a lot like how we did it from the server to the client. 5:01 We have our socket. We can call emit. 5:04 We can create the name of our event, which will say "Message sent." 5:10 And we can pass in some arguments. 5:16 In our case, we'll just pass in the message, which we'll have stored in message. 5:18 We can save it out, and now let's go to our server. 5:23 Now, when we have our socket here, I'm going to take out these lines here 5:27 where we just sent out that test information. 5:32 Now we can actually listen on this particular socket. 5:35 We'll say "socket.on"--and what was the name of our message?--"message-sent." 5:39 When we get a message-sent from a client--in this case this particular socket-- 5:45 we'll have a callback function and the parameters that were passed to it 5:50 were just the message. 5:53 For right now what we'll do is say console.log "message from browser," message. 5:56 Now if we have it all saved out and we go back--let's refresh 6:05 and make sure we get everything coming in correctly. 6:12 Now nothing will happen in this browser, but let's just check right here. 6:15 Let's say "Hello world." 6:18 Now, if everything went right, if we go to our server here, we can see the server 6:23 where we did our console.log we got a message from the browser "Hello world." 6:26 We're able to go from the sender up to the server, 6:31 but now we want to distribute that message to anybody else who is listening. 6:34 That's pretty easy. 6:38 Now we're going to go into the callback on our server 6:40 where the message send event is received on our server. 6:43 Now we saw before how to send a message to an individual socket 6:47 we called socket.emit, and this will send the message back to the socket 6:50 that actually sent us this message sent. 6:55 However, what we want to do instead is send this event to everybody who is connected. 6:58 The way we can do that is by calling io.sockets-- 7:04 which represents all of our active sockets right now--.emit. 7:07 We can go ahead and say that the event for notifying of a new message 7:12 is called new-message, and we'll just pass in the message. 7:17 We got that. 7:25 Now all of our sockets should get a new message every time one of our sockets 7:27 sends a message-sent. 7:31 Now we have to go back to our clients and figure out how to handle 7:33 this new message event that we've created. 7:36 This is easy to do. 7:39 Right here we have our socket we can call dot-on "new message," 7:42 and the callback will receive our message. 7:48 Now we have a message that's come in, and we can do a very simple thing. 7:55 Let's create an li using jquery. 7:59 We'll set its text to "Message," and then we'll grab our un-ordered list, 8:04 which is our messages, and we can find out what the ID of that was 8:12 by going to index.eco. It has the ID of the messages. 8:16 Let's grab our messages, and we can call dot-append to take our li element 8:20 and append it to our messages. 8:26 As soon as we get a new message from our server we should create 8:29 a new li on our list of messages. 8:33 That means that as soon as we click from our send box, 8:36 that immediately sends a message to our server, 8:40 which immediately sends back this new message to all the clients, 8:42 which immediately adds this to our list. 8:45 It should look like it's happening instantly not only on our computer 8:48 but any other computer connected to this server. 8:51 Let's try it out and see how the flow works. 8:55 I'm going to refresh our left-hand page. 8:58 It looks like we have a little error there just as our server was restarting. 9:01 Now I'm going to refresh this page too. 9:05 I haven't refreshed our right hand page in a while, but we need to make sure 9:07 that both of them have the correct code in it. 9:10 Now if I type in "Hello world," you can see that it not only added "Hello world" 9:13 to this messages, but it also handed it over to here. 9:20 If we did "From window 2," as soon as I click this button, we now get different messages. 9:24 We can update this a little bit. 9:33 What we can do is clear out the message text. 9:36 What I'll do is say our message-text.val, and we'll pass in the empty string, save it out. 9:39 Now if we refresh. 9:50 "From window 1." 9:52 It looks like we had an error connecting because I refreshed it as soon as I saved the files. 9:57 Now if I refresh it and refresh this side, too, hopefully it should work now. 10:02 Say "Hello from the left window." 10:07 We can see it appears instantly on both of them, 10:13 and it cleared out our text. 10:15 We can go ahead and say "Hello from the right." 10:17 We can continue opening up other windows or we could do this from another computer, 10:24 but any application connected to our server should receive all these new message updates. 10:27 Now, it's very simple. We don't have any sort of users attached to them. 10:32 But that's really up to our application to determine. 10:35 But we can see how the basic pattern of this worked. 10:38 We had some sort of event--basically clicking our button, 10:40 which initiated a socket message, which was done from our socket.emit here. 10:43 When we emitted message-sent from our client, 10:49 we were listening for it on our server vio socket.on "message-sent." 10:52 It received that information as this message here, 10:56 and then it sent it to all of the other clients or other sockets 10:59 this new message, which includes the client that originally sent the message. 11:02 That new message gets sent out to everybody, 11:07 and when we get a new message we take it in, we create a new li element 11:10 with the text of our message and just append it onto our page. 11:13 It works pretty great. 11:18 In Code/Racer we use this technique a lot. 11:21 We don't necessarily using for chat messages, but any time we update code, 11:23 we take that opportunity to emit a message to our server, 11:28 which handles the logic of if that code now has the correct answer 11:31 or if we used a weapon on another player we send a message from the client to the server, 11:35 saying we used a weapon on this player. 11:39 The server handles telling anybody else who needs to know about it . 11:42 In the case that we use a weapon, what we'll do is we'll send a message down to the player 11:45 who is going to be the target of that weapon, 11:50 and the application will handle that message by actually applying the effect to a screen. 11:52 For instance, putting cats all over it or blacking it out or some other effect. 11:57 All of the different interactions that we have are based around this pattern 12:02 of sending a message from a client to the server 12:06 and the server sending out updates to all the other clients. 12:09
You need to sign up for Treehouse in order to download course files.Sign up