Getting Started with Socket.IO, Node.js and Express

Socket.IO enables real-time event-based communication between one or more clients and a server. It works on every platform, browser or device and is fast and reliable. It's often used in analytics, document collaboration, streaming and instant messaging.

Socket.IO is smart, it uses WebSockets if available. If not it fails over to something the browser does support. It's easy to setup and use so let's take a look!

In this tutorial we'll cover setting up a basic Express.js application with Socket.IO. We'll create a simple chat server and show the basics on how a client and server works. If you like to take a look at the code it's up on Github.

Requirements

In this tutorial we'll be using the latest Express and Socket.io versions as of 2017.

Express 4

Socket.IO 1.7.2

If you're using a later version this tutorial will probably still work. Just keep in mind this is what I've tested with.

Getting Started

We'll assume before we begin that you have node and npm installed. If not, I'd highly recommend downloading and installing NVM. NVM is a version manager for node. It's available on Mac, Windows and Linux so you have no excuse for not using it. Once node is installed you'll have access to npm, the node package manager.

Let's create a blank project!

$ mkdir socket-app
$ cd socket-app
$ npm init

The npm init command will create an empty project with a package.json file. If you like you can answer all the questions. If not just press enter through all of it.

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

$ npm install socket.io express --save

The --save will make sure the package will appear in our dependencies in the package.json file. This is important, so we can later install the packages again if needed without having to remember them all.

In past tutorials I suggested at this point to install bower. Bower is a package manager for the web. It can handle a lot of things from frameworks, libraries, assets and utilities.

Unfortunately, there are some problems with using bower so I'd recomend with just sticking with npm.

For this simple example we'll use npm to install jquery.

$ npm install jquery --save

That should be it! The last command will save jquery to our package.json file and download everything into the node_modules folder.

Express Server

Let's begin by creating an express server that displays Hello World. I talked a lot about Express in my getting started guide. Check it out if you need help.

Lots of things are happening in this file. First we are requiring Express, and creating a new server. We are then requiring Socket.IO. We are setting the static folder to '/node_modules' since we are using npm to server up jQuery and we want to be able to reference it in our html.

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.

Create a new index.html file. This will display our "Hello World" message.

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 our node server again we'll see on the node console the message 'Hello World from client'. Perfect.

Server Socket Setup

Let's have the server respond back with a message to the client. Add the emit line after console.log.

Now when a client connects it will send a message to the server and it will trigger a popup.

Putting it all Together

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.