Socket.IO is a Node module that enables real-time bidirectional communication in the browser. It's built on top of the native HTML5 WebSockets API. Kyle shows how to install and set up Socket.IO with the current Node application.
(ninja music) - We've thoroughly exhausted our discussion of Node stuff and now we're ready to move onto our discussion of WebSockets. And this isn't going to be much discussion at all. We're going to get right back into the code. But I just wanted to remind you, we're going to use the socket.io library, but there's many of them out there. What a WebSocket 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 WebSockets server, are you capable of speaking the WebSocket Protocol? 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 WebSocket connection. So they make a handshake together.
And if you're using you almost certainly want to be using SSL on your WebSockets. Even with all of what we know about open SSL issues lately, you want to be using SSL on your WebSockets. And so they're going to do a handshake that's secure and establish a secure WebSocket connection. So there's an initial HTTP request that then gets upgraded to WebSocket 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 is 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. In fact, not only does the framework do it for us, the built in WebSocket object in the browser handles all that negotiation. Socket.io is not just WebSockets it's actually an extension on top of the WebSocket Protocol to add even additional features that WebSockets themselves don't have. Things like handshakes. If you send off a message to the server and you want to know that the server sends you sort of an act back to let you know that it got it back.
That's not built into the regular WebSocket Protocol. But it is built into socket.io. And so they've added some additional things on top of the protocol. Some additional capabilities. 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 WebSocket 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 of weeks or something 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 it had stayed, the official deployed version had stayed on the 0.9 branch. All of my example code is predicated on the 0.9.16 branch.
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 going to want to get the 0.9.16 version of socket.io. Those of you here in person 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 at symbol, and then the version number.
Alright, 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. And then on our 6.html let's do another save as and turn that to 7.html. Make sure you update the seven the six... From the both of the sixes to seven so you 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 io is what I call it io = 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 in terms of what the server needs to do to handle this. And this server framer is going to do it entirely for us. So the way we do it is, we tell it to io. Let me make sure I get this exactly right. We're going to say io.listen() and we want to give it out HTTP Server instance.
So that http_serv is what I called it. 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 you remember I said socket.io, a WebSocket connection starts out as a normal HTTP connection that upgrades itself. 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 WebSocket requests for us. So we're not going to have to do a single thing up in our routing logic to handle anything socket related. We don't have to touch any of this code whatsoever. We just add the io.listen down here at the bottom, point it at out HTTP Server, and it'll start listening.
The last thing that we're going to do. So save out that file. The last thing that we're going to do is verify that the socket.io library is able to be loaded into a webpage. So come pack to your 7.html and at the bottom right before the body, I want you to add a script tag that tries to load /socket.io/socket.io.js. Now if you're paying close attention you'll note 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 request for that file and it will automatically handle that for us. So we don't need to worry about it at all. It automatically creates and sends out the client file for us. So last thing that we're going to do in this HTML just to verify that we were in fact able to load up the library, is I just want you to do console.log and log out the io object.
Which is the global that you get from socket.io. Everybody with me? Alright, let's come back to our command-line. Let's start up our Node Server. Now right off the bat you're going to see something different from this Node output that you probably haven't seen before.
And that's going to see an info statement says socket.io is started. If you don't see that message, something's wrong with your installation. So wave at me if you're not seeing that message from the command-line. Did it give you an error or did it just stay blank? - [Student] It shut down. - Oh. Well that's not good.
Put the code back up for just a moment if you want to check and double check your server code. - [Student] Got it. - Is it working? Okay, everybody good? Alright, 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 going to 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.
So I verified that it in fact was able to load the client library from the server into my webpage. Did everybody get something roughly like that?
- HTML5 facades
- Using APIs
- File I/O
- The asynquence library
- Publishing npm modules
- Grunt and Gulp
- Node as a web server
- Simulating asynchronicity
- Making a socket connection
- User-triggered messaging
- Signaling and data channels