Using WebSockets on Heroku with Node.js

Last updated 01 November 2018

This tutorial will get you going with realtime Node.js applications on Heroku. We’ll develop a simple application that shares the server’s current time with the client via a persistent socket connection. Each application will be based on node’s popular express web server.

When developing realtime Node.js applications, you can directly use WebSockets, or you can use an abstraction library like Socket.io which provides fallbacks for clients that don’t support the WebSocket protocol. We’ll demonstrate both options below.

Create a new app

Move into your app’s directory and create a default package.json:

$ npm init --yes

Let’s also specify a version of node in package.json and provide a mechanism for starting the app:

"engines": {
  "node": "10.3.0"
},
"scripts": {
  "start": "node server.js"
}

Option 1: WebSocket

The simplest way to use WebSocket connections is directly through node’s ws module. We’ll walk through each step in setting up the app, but you can view the full source on GitHub.

Install dependencies

Let’s start with a basic express web server:

$ npm install --save --save-exact express

For WebSockets, we’ll install the ws module as well as bufferutil and utf-8-validate. Only ws is necessary, but the other two provide a performance boost.

$ npm install --save --save-exact ws bufferutil utf-8-validate

Create an HTTP server

We need an HTTP server to do two things: serve our client-side assets and provide a hook for the WebSocket server to monitor for upgrade requests. The code looks something like this:

const server = express()
  .use((req, res) => res.sendFile(INDEX) )
  .listen(PORT, () => console.log(`Listening on ${ PORT }`));

Create a WebSocket server

The WebSocket server takes an HTTP server as an argument so that it can listen for ‘upgrade’ events:

const wss = new SocketServer({ server });

Handle connections

Here, we’ll listen for and log connections and disconnections. Once a client has connected, you can also add event handlers for messages from that client. The code looks something like this:

wss.on('connection', (ws) => {
  console.log('Client connected');
  ws.on('close', () => console.log('Client disconnected'));
});

Broadcast updates

One of the benefits of socket connections is that your server can broadcast data to clients without waiting for client requests. In this case, we’ll push the current time to all clients every second:

setInterval(() => {
  wss.clients.forEach((client) => {
    client.send(new Date().toTimeString());
  });
}, 1000);

Create a WebSocket client

Our client, index.html, is a simple page that listens for time updates from the server. The code looks something like this:

var HOST = location.origin.replace(/^http/, 'ws')
var ws = new WebSocket(HOST);
var el = document.getElementById('server-time');

ws.onmessage = function (event) {
  el.innerHTML = 'Server time: ' + event.data;
};

Start the app

You can now start and test the app locally at http://localhost:3000:

$ npm start
> node server.js

Listening on 3000

Once you’re satisfied with the behavior, commit all your files to git (with node_modules in .gitignore) and deploy the app to Heroku:

$ heroku create
$ git commit -am 'websocket starting point'
$ git push heroku master
$ heroku open

Option 2: Socket.io

A realtime abstraction library like Socket.io can help your app serve users without WebSocket support. Socket.io also provides common functionality like rooms, namespaces, and automatic reconnection. We’ll walk through each step in setting up the app, but you can view the full source on GitHub.

Install dependencies

This app requires a basic express web server as well as socket.io:

$ npm install --save --save-exact express socket.io

Create an HTTP server

We need an HTTP server to do two things: serve our client-side assets and provide a hook for Socket.io to monitor for socket.io-related requests. The code looks something like this:

const server = express()
  .use((req, res) => res.sendFile(INDEX) )
  .listen(PORT, () => console.log(`Listening on ${ PORT }`));

Create a Socket.io server

The Socket.io server takes an HTTP server as an argument so that it can listen for socket.io-related requests:

const io = socketIO(server);

Handle connections

We’ll log clients connecting and disconnecting. Once a client has connected, you can also add event handlers to it to receive messages from that client.

io.on('connection', (socket) => {
  console.log('Client connected');
  socket.on('disconnect', () => console.log('Client disconnected'));
});

Broadcast updates

One of the benefits of persistent socket connections is that the server can push data out to clients, without waiting for a client’s request. In this example, we’ll push out the current time on the server once a second:

setInterval(() => io.emit('time', new Date().toTimeString()), 1000);

Create a Socket.io client

Our client, index.html, is a simple page that listens for time updates from the server. The code looks something like this:

var socket = io();
var el = document.getElementById('server-time');

socket.on('time', function(timeString) {
  el.innerHTML = 'Server time: ' + timeString;
});

Start the app

You can now start and test the app locally at http://localhost:3000:

$ npm start
> node server.js

Listening on 3000

Once you’re satisfied with the behavior, commit all your files to git (with node_modules in .gitignore) and deploy the app to Heroku.

$ heroku create
$ git commit -am 'socket.io starting point'
$ git push heroku master
$ heroku open

Apps using Socket.io should enable session affinity. If you plan to use node’s Cluster module or to scale your app to multiple dynos, you should also follow Socket.io’s multiple-nodes instructions.

$ heroku features:enable http-session-affinity

Feedback

Log in to submit feedback.