Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Code Racer is a realtime game played by multiple people in different browsers. In order for the game to work we need to be abile to communicate to and from the server very quickly. Web Sockets allow us to do just that, and Socket.io is a library that makes Web Sockets a snap.
[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
You need to sign up for Treehouse in order to download course files.
Sign up