Last updated October 31, 2023

This tutorial gets you started with real-time Node.js applications on Heroku. We develop a simple application that shares the server’s current time with the client via a persistent socket connection. Each application is based on Node’s popular express web server.

When developing real-time Node.js applications, you can use WebSockets directly. You can also use an abstraction library like Socket.io, which provides fallbacks for clients that don’t support the WebSocket protocol. We demonstrate both options.

Create a New App

Go to your app’s directory, and create a default package.json.

$ npm init --yes

Specify a version of Node in package.json, and provide a mechanism for starting the app.

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

Option 1: WebSocket

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

Install Dependencies

Let’s start with a basic express web server.

$ npm install --save express

For WebSockets, we install the ws and the bufferutil and utf-8-validate modules. Only the ws module is necessary, but the bufferutil and utf-8-validate modules provide a performance boost.

$ npm install --save 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 requests. The server code looks like:

const PORT = process.env.PORT || 3000;
const INDEX = '/index.html';

const server = express()
  .use((req, res) => res.sendFile(INDEX, { root: __dirname }))
  .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 events.

const { Server } = require('ws');

const wss = new Server({ server });

Handle Connections

We listen for and log connections and disconnections. After a client connects, you can add event handlers for messages from that client. The server code looks like:

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 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 HTML page that listens for time updates from the server. The client code can go between <script> tags in the HTML, and it looks like:

var HOST = location.origin.replace(/^http/, 'ws')
var ws = new WebSocket(HOST);
var el;

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

Start the App

You can now start the server.

$ npm start
> node server.js

Listening on 3000

Test the app locally at http://localhost:3000 to confirm that the time is updated in real time. You also see Client connected in your server logs.

When you’re satisfied with the behavior, commit all your files to git, except node_modules, which you want to add to .gitignore. Then deploy the app to Heroku.

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

Option 2: Socket.io

A real-time 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 cover each step in setting up the app, but you can also view the full source on GitHub.

Install Dependencies

This app requires a basic express web server and socket.io.

$ npm install --save 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 server code looks like:

const PORT = process.env.PORT || 3000;
const INDEX = '/index.html';

const server = express()
  .use((req, res) => res.sendFile(INDEX, { root: __dirname }))
  .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 log clients connecting and disconnecting. After a client connects, you can add event handlers to the SocketIO instance for receiving client messages.

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 to clients without waiting for a client’s request. In this example, we push the current time on the server once per second.

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

Create a Socket.io Client

Our client, index.html, is a HTML simple page that listens for time updates from the server. The client code can go between <script> tags in the HTML, and it looks like:

var socket = io();
var el;

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

Start the App

You can now start the server.

$ npm start
> node server.js

Listening on 3000

Test the app locally at http://localhost:3000 to confirm that the time is updated in real time. You also see Client connected in your server logs.

When you’re satisfied with the behavior, commit all your files to git, with node_modules in .gitignore. Then deploy the app to Heroku.

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

You want apps using Socket.io to enable session affinity. If you plan to use Node’s Cluster module, or to scale your app to multiple dynos, follow Socket.io’s multiple-nodes instructions.

$ heroku features:enable http-session-affinity