Socket.IO Tutorial With io.js and Express

Socket.IO enables real-time event-based communication. What that means is that we can communicate to the server from the client and in return the server can talk back to the client. Socket.IO uses WebSockets when it can and has failovers if the browser does not support it. It's fairly simple to setup and works on every platform, browser or device and it's fast. Learning WebSockets, io.js and Socket.IO all at the same time is not easy. So we'll explore a few basics of each to begin with.

In this tutorial we'll cover getting a basic Express server running. Installing and configuring Socket.IO. And a few basics of Socket.IO communications.

I created a newer updated version of this tutorial, that uses Node instead of io.js! Check it out here!

Getting Started

First we'll assume you have io.js and npm installed. If not I would recommend using NVM to install it. Check out my getting started with io.js guide for more information. For this tutorial we'll be using io.js version 1.5.0, Express 4.12 and socket.io 1.3.5. If you’re more of a Node fan feel free to use that instead. It should work the same.

Let's create a blank project to begin with.

$ npm init

This will ask you a set of questions. You don't have to worry too much about them now, just press enter through them. This will create the package.json file. This file holds all the metadata related to the project.

We need to install Express and Socket.IO and save them to our package file for later.

$ npm install socket.io express --save

That should be it for the server side. Just for fun we'll add some jquery to the client side. We'll use one more tool to make this a little easier. Bower is a package manager for the web essentially. It's an easy tool to add in frameworks, libraries and utilities into your projects. It uses a bower.json file similar to the package.json file. To get started let's install it and initialize the bower file.

$ npm install -g bower
$ bower init

This will install bower and create an empty bower.json file.

$ bower install jquery --save

This will save all the jquery files into a new 'bower_components' folder. We'll be referencing this later when we create the index.html file.

Server Hello World

We'll need to create a new file that io.js will run. We'll be using Express as our web framework of choice. If you want to learn more about Express check out my getting started guide.

Lots of things are happening in this file. First we are requiring Express, and creating a new server. We then are requiring Socket.IO. We are setting the static folder to '/bower_components' since we are using bower to serve up the JQuery.

App.get routes http requests to the specified path with a specific call back function. The 'res' object represents the HTTP response that an Express app sends when it gets a request. The 'sendFile' just sends the file at the specific path. We'll be creating the index.html in a second. 'server.listen' will open a port and listen for requests coming in.

The 'io.on' is listening for connections. When it receives one it will report to the console 'client connected...'. You can then setup a number of individual events for it to listen to from the client. The 'client.on('join') will wait for a message from the client for 'join'. It will then log it to the console.

If we start up io.js again we'll see on the console the message 'Hello World from client'. Perfect.

Now when a client connects it will send a message to the server and it will receive one back in a popup.

Server Socket Broadcast

In the previous examples we saw that we can send a message to the server. We can also send a message back to the client. What if we want to send a message to all the clients excluding the socket that started it? We can do easily with broadcast.emit .