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
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.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[<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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up