This course has been updated! We now recommend you take the Complete Intro to Real-Time course.
Transcript from the "Setting Up Socket.io" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Kyle Simpson: We've thoroughly exhausted our discussion of node stuff and now we're ready to move on to our discussion of web sockets. And this isn't going to be much discussion at all, we're going to get right back into the COBE. I just want to remind you we're gonna use the socket.io library, but there's many of them out there.
[00:00:22] What a web socket connection amounts to is that there's an initial http request made from the browser back to the server. And in that request it has a header in it that says, hey I would like to do web sockets. Server are you capable of speaking the web socket protocol?
[00:00:42] Now the server may or may not be capable of doing so but if he is capable of speaking that protocol, the response that he gives back will be an upgrade response. That says, yes let's go ahead and upgrade ourselves from this normal boring http connection to a persistent web socket connection.
[00:01:00] So they make a handshake together and if you're using you most certainly wanna be using SSL on your web sockets. Even with all of what we know about open SSL issues lately. You want to be using SSL on your web sockets. And so they're going to do a handshake that's secured and establish a secure web socket connection.
[00:01:21] So there's an initially CDB request that then gets upgraded to a web socket request and they do an initial handshake back and forth. To make sure both of them have agreed on what protocol they're going to speak and then everything's good. So all of that sounds like a fair amount of complicated work for us to handle the good news is these frameworks like socket.io do it all for us.
[00:01:40] In fact, not only does the framework do it for us the built in web socket object in the browser handles all that negotiation. Socket.io is not just web sockets it's actually an extension on top of the web socket protocol. To add even additional features that web sockets themselves don't have things like handshakes.
[00:02:02] If you send off a message to the server and you wanna know that the server sends you sort of an ACK back to let you know that it got it back. That's not built into the regular web socket protocol but it is built into socket.io and so they've added some additional things on top of the protocol, some additional capabilities.
[00:02:20] That's another benefit of using these frameworks but of course you don't have to, so now we're going to get our hands dirty with writing our own web socket code using socket.io. Now at this point I would normally tell you to do npm install socket.io. Now the problem is don't do that yet, because the problem is just a few days ago or within the last couple weeks or something.
[00:02:49] Socket.io released an update where they moved from 0.9 to 1.0 pre-beta or something. There's been like for almost a year now, a rewrite in progress but the official deployed version it stayed on the zero point nine branch. All of my example code is predicated on the 0.9.116 branch.
[00:03:12] And, so if you just do a install socket.io, you're going to get an incompatible API, incompatible version of socket.io. So, now what we want to do is, we want to specify specifically which version of socket.io we want to install. So those of you that are home for the purposes of the code that I've provided you're gonna want to get the 0.9.16 version of socket.io, those of you here in person.
[00:03:36] You already have that version installed it probably should just work for you but if not you need to do npm install package name, the little act symbol and then the version number
>> Kyle Simpson: All right, [COUGH] let's talk about what it takes inside of our server. So let's go ahead and do a Save as on our 6.server and change it to 7.server.
[00:03:59] And then on our 6.html, let's do another save as and turn that to 7.html. Make sure you update the 6 and from the both of the 6 is to 7. So don't get yourself confused. Now the 7.server.js we need to load in our socket.io library. So we're going to come down to the bottom of our code and we're going to say, var socket=, sorry.
[00:04:30] IO is what I call it, io equals require socket.io exactly as you would think. Now we've required in the library but we need to tell socket.io to be listening for incoming requests. And here's another nicety of the way this library works because there's a fair amount of complexity route in terms of what the server needs to do to handle this.
[00:04:57] And this server frameworks gonna do it entirely for us. So the way we do it is we tell it to io only make sure you get this exactly right [SOUND] where going to say io.listen. And we want to give it our http server instance. So that http_service what I called it.
[00:05:26] We want to pass that in, now what that is basically saying is I want you to hijack the existing http server that we've already set up. And I want you to tell it to listen also for socket.io connections. So remember I said socket.io's a website connection starts out as a normal http connection that upgrades itself.
[00:05:50] So we always need an http connection so that we can then upgrade ourselves to socket.io and that's the way it works here. We already have an http connection, a server running and socket.io. The library basically comes along and hijacks it for us. And it automatically listens for all of the incoming requests and it automatically handles any Web Socket requests for us.
[00:06:10] S we're not going to have to do a single thing up in our routing logic to handle anything socket related. We don't need to touch any of this code whatsoever. We just add the io.listen down here at the bottom, point it at our http server and it will start listening.
[00:06:28] The last thing that we're gonna do so save out that file, the last thing that we're gonna do is verify that the socket.io library is able to be loaded into a web page. So come back to your 7.html, and at the bottom right before the body, I want you to add a script tag.
[00:06:44] That tries to load /socket.io., /socket.io,js. Now if you're paying close attention you'll know we don't have a route set up for static file serving in fact we don't even see a socket.io client library anywhere. How is that going to work? Well this is the exact same thing that socket.io server side library is going to see the requests for that file in a will automatically handle that for us.
[00:07:14] So we don't need to worry about it all it automatically creates and sends out the client file for us. So last thing that we're gonna do in this html just a verify that we were in fact able to load up the library is I just want you to do console.log.
[00:07:29] And log out the io object which is the global that you get from socket.io.
>> Kyle Simpson: Everybody with me?
>> Kyle Simpson: All right, let's come back to our command line, let's start up our node server. Now, right off the bat you're gonna see something different from. There is no doubt, but you probably haven't seen before and that's going to see an info statement says socket.io was started.
[00:08:07] If you don't see that message something's wrong with your installation so way that me if you're not seeing that message from the command line. Did it give you an error to just stay blank, that's not good.
>> Kyle Simpson: Put the code back up for just a moment if you want to check and double check your server code.
[00:08:48]
>> Kyle Simpson: Is it working? Okay, everybody good? All right, we've got that code running, let's open up our browser. Now remember, I need to change the URL to /7 now, so that we're loading up the new file, so I'm gonna load up /7. Not only do I notice that I've loaded 7.html but here in my web console, I can see that it printed out a socket.io object.
[00:09:13] So, I verified that it, in fact, was able to load the client library from the server into my web page, did everybody get something roughly like that?