I haven’t had a ton of time to work on my node.js project lately so I figured I’d just put it out there in its current form as a learning tool for others. In this blog post I’ll walk you through everything I did to get it working and, by the end, you should be able to write your own basic webapps using socket.io.
First, let’s start with an overview of the functionality we’d like to have. We want a semi-real time news feed that can display messages passed in from one or more client applications. In order to tell which application passed in which message, we’d like to have some color coding as well. Since we’re using socket.io we also want to avoid AJAX callbacks in favor of server pushes. Finally - it would be cool to see a count of the number of other people also viewing the news feed.
For this project I’m going to use the Jade templating language, and the Express node.js framework, which provides Sinatra style routing for node applications. Links to each can be found in the project readme.
Lets start off by creating our app and setting it up to use Jade, socket.io, and Express.
1 2 3 4 5 6
We need to import the Express library and call the
createServer() method on it to get a server object. We’ll store it in
app. Then we import the socket.io library and attatch it to listen on our newly created server. Finally we import the Jade library, set our app to use it as the view engine and configure some basic settings.
1 2 3 4 5 6 7
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
If we were to run the node server now, it would work, but it wouldn’t do anything - it would just render out our basically empty view. Not particularly useful. Now that we have the basic structure in place however, the fun can begin. Let’s get socket.io hooked up and talking to the clients. We’ll start by implementing a real-time count of connected clients. On the server side it will look something like this:
1 2 3 4 5 6 7 8 9 10 11 12
We will bind an anonymous function to the socket ‘connection’ event that will execute every time a new client connects. When this happens we will increment the current count of connected clients, and then send out a broadcast containing the count. The
socket.broadcast method sends a message to all connected clients. In this case we’re passing some JSON that contains our count. We then use the same syntax to bind a function to execute when the client disconnects. This function simply decrements the count and broadcasts the count back to the remaining clients.
1 2 3 4 5 6 7 8 9 10 11
This code will need to go in the feed.js file we linked from the main view. We’re using JQuery’s document ready function to set up our client side socket and cache the selector for the client count on our page. Node.js runs on port 3000 by default so that’s what we’ll enter here. We’ll then bind a function to execute on the socket’s ‘message’ event. This seems like overkill now as the function is only one line, we could just as easily declare it inline anonymously, but we’ll be building on it in the next step. For now we’ll just update the client count.
At this point we have a working app - you can start up node.js, navigate to localhost:3000 and see:
1 connected client. If you open the page in another tab, you’ll see the counter update to 2 on both pages. Likewise, it will decrement as you close tabs. So far we’ve seen how to set up a very simple node.js app, import the Jade, Express, and socket.io libraries, and pass messages from the server to the clients using “comet” style message pushes. Now that we have the basics down, we’ll work on our news feed in the next post.
Hope you found this helpful - if you want to skip ahead and see the ‘finished’ product you can take a look at the github repo, otherwise we’ll cover the rest in the next post.