How to Install Socket.io

[Code/Racer: Installing Socket.io] 0:00 So far we've been able to get node up and running, 0:06 creating a just basic web app that's able to serve different pages. 0:08 We have some of our views over here, like our index.eco, 0:12 and they are serving some just very basic files right now. 0:16 If we go to our browser, we can see if we just visit the root here, 0:19 we have a page with some dynamic content in it. 0:22 The next thing I want to do make sure that this game is going to work 0:26 is figure out a way for the players to communicate with each other. 0:29 Because we have a game and there's a lot of stuff going on, 0:32 We need to make sure that every time a player takes an action 0:34 that that action is sent up to the server so the server can process that move 0:37 or the change or the update in the game state as well as notify all the other players 0:41 who are playing in that game so everybody can stay in sync as to what's going on. 0:46 As people are typing, we want to be able to send updates about what they've typed, 0:51 so other people can see what they've typed. 0:55 If we win a round, we need to send a notification from that player to the server, 0:57 and that server needs to be able to push down information to all the other clients, 1:01 saying that the round is over or this player has one or a weapon has been used 1:05 or some other action. 1:10 Now, in typical web applications, we worry about just request and response, 1:12 meaning that the only way communication can really happen 1:15 is when the browser makes a request on the server and the server responds. 1:19 If the server has information it wants to push out to one of the actual clients or browsers, 1:23 it can't really do that. 1:28 It doesn't have a way in a normal HTP environment to push information down. 1:30 It just has to wait for one of the clients to make a request. 1:34 Then it can give us an update. 1:37 But we need something more real time. 1:39 We need a way for our server to send out information. 1:41 That's where web sockets come in handy. 1:44 We're going to be using a tool called "Socket.IO" to handle this. 1:46 You can find out more information at Socket.IO, 1:50 and there are some good examples here. 1:53 It's pretty simple to set up. There are two parts of it. 1:55 There's a server component, which will actually handle all of the clients who are 1:58 connecting over this socket, and then on the browser there's a piece of JavaScript 2:02 where each of the clients has the actual way to communicate to the server. 2:06 The way it works is when the client loads a page 2:10 they'll open up a socket, and our server is going to receive that call from a socket, 2:13 and it's going to hold that line open. 2:18 As long as the server has that socket connection and the client is still listening to it, 2:20 the server can send information down to the browser that the browser can then handle. 2:25 Now we have pretty much what's like a phone call. 2:30 Both the client and server are able to communicate with each other whenever they want 2:32 as long as that Socket connection or phone call is open. 2:36 Let's see how easy it is to get Socket running in our application. 2:39 Right now we have our server running, which we started up with supervisor server.coffee. 2:42 Now I'm going to stop our server, because we're going to be updating our package.jsan file, 2:47 which defines the dependencies of our application. 2:52 I'm going to flip back here and open up our package.jsan. 2:55 We can see the dependencies we're using right now, coffee-script for our coffee script compiler. 2:58 "Express" is our server, "eco" is our template, 3:04 and we're using a middleware called "connect-less" to handle the lessCSS that we use. 3:07 To add another dependency, what I'm going to do is I'm just going to add "socket.io." 3:13 That's the name of the package. 3:19 Notice I added a comma on the line before because we need to have commas 3:21 between each of our dependencies. 3:24 As the value of this, again, I'm going to use star. 3:26 I don't know what the current version of socket.io is, 3:28 but right now I'm just going to use the latest. 3:31 Before long we'll go ahead and actually add the real version numbers, 3:33 so we can have a slightly better definition of what our dependencies are, 3:37 and we don't have to worry as much about it break if one of these libraries updates 3:39 and makes some sort of change. 3:44 But for now the star will work, because we're going to just work with whatever the latest version is, 3:46 and then we'll lock it down later. 3:49 I'm going to save the package.jsan, and then to add this dependency into our project 3:51 from our Code Racer directory, I'm going to run, once again, npm install. 3:56 Now node has installed socket.io and all of its dependencies, 4:04 so we're able to require socket.io from our application. 4:08 I'm going to just start up our app again by typing in supervisor server.coffee. 4:12 Remember, supervisor is the application we're using to restart our application 4:18 every time we either save a file or whenever the application crashes 4:22 because of an error. 4:26 Supervisor will keep our app up and running so we don't have to keep coming 4:28 back to the terminal to stop and restart it for new code changes. 4:31 We start it up, and we get our console.log message saying our server is listening. 4:35 We should be able to flip back to our page and refresh, 4:40 and we still get our special title. 4:44 Now, the way we set up our socket.io server is we need to initialize a socket.io server, 4:47 and there are two different ways we could do this. 4:53 We could create special socket.io server and have it listen on its own port, 4:55 but socket.io is also compatible with Express, which is our web server. 5:00 We can actually have socket.io hook into our existing Express app, 5:05 which we have in our app variable here. 5:10 It will attach all the functionality to our server that we already have up and running. 5:12 What I'm going to do is I'm going to store our socket.io instance into a variable called "io." 5:17 The way we get that is we will require socket.io, 5:23 and this imports the socket.io object. 5:30 What we can do is call the dot-listen method that socket.io provides. 5:33 If we were starting up our own server, we could just do something like port 4000, 5:38 and it would server the server on port 4000. 5:44 But since we want to hook it into an existing Express application, 5:47 instead of passing in a port number, we'll pass our actual application. 5:50 Now socket will know that we have an express application 5:54 and we'll be able to listen for socket connections that come 5:57 over our normal connection here on port 3000 6:00 as well as it serves a couple extra pages, including the client JavaScript file that we need. 6:03 If I save it out, we should see our server has restarted, because I saved the file, 6:09 and if we go back to a browser and refresh we don't see any changes. 6:14 The one way we can test is to see if it's serving the socket.io client file 6:18 that we're going to need to include in our page to actually communicate with our server. 6:22 We can check this out, and the place that it will serve this file is from /socket.io/socket.io.js, 6:27 and if we pull that up, we can see the socket.io now is hooked into that URL. 6:38 When we request it, it'll return the JavaScript file that defines the client of our application. 6:44 So what we need to do next is to include this into our page. 6:51 I'm going to keep working on our demo page that we have in our index.eco. 6:55 We will go back over here, and remember index.eco right now is just the inside of our page. 6:59 What we actually want to modify is layout.eco, 7:05 and this is where our head tag is where we have our style sheets 7:08 and where we can put our script files. 7:10 What I'm going to is I'm going to create a script tag, 7:13 and the source of it will be that URL that we were talking about before-- 7:17 /socket.io/socket.io.js. 7:20 Close the script tag, and we got it . 7:29 If we go back to our browser and we go back to our home page, not much has changed, 7:36 but I'm going to open up my JavaScript inspector here, 7:42 and we can actually see that one of the scripts is loaded up as socket.io.js. 7:45 We can test it out by typing "io," which is where it stores all of the information. 7:49 We can do io.connect, and this is the call that will actually connect from our client to our server. 7:55 This is like making the phone call or the connection from our browser to our server. 8:02 If we do that, we can see in our debug here 8:07 we see our server is listening. This is the last time we restarted our server. 8:12 We can see that it's also telling us how it serves /socket.io.js, 8:16 so it's giving us some information there. 8:21 All this information is coming from socket.io. 8:23 Since it's hooked into our server, it's able to handle requests that it's going to handle, 8:25 mostly things as /socket.io, and we can see what's going on with our socket. 8:30 We see that we got our client authorized, which means we did a connect call, 8:34 and it got authorized, and there is even a handshake to make sure the server and client 8:38 are all synced up and ready to talk to each other. 8:42 Now, we can see some more information about how it's actually 8:45 handling the information back and forth. 8:48 We can see that there's a heartbeat interval, which is being sent by the server 8:50 or being checked by the server to make sure that our clients are still connected. 8:55 A lot of this we can ignore as we develop, but it's a good log of what's going on with connections. 8:58 Basically, just by doing that one connect call we had a handshake, 9:03 we're getting some heartbeats here just to make sure that we're up and running, 9:06 The next step that we're going to do is actually work on communicating 9:10 back and forth from the client and the server. 9:14