Skip to main content

Using WebSockets on Heroku with Node.js

Table of Contents

  • Create a new app
  • Option 1: WebSocket
  • Option 2: Socket.io

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": "13.1.x"
},
"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 express

For WebSockets, we’ll install the ws module as well as bufferutil and utf-8-validate. Only the wsmodule 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 will look like this:

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

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

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 the time is being updated in realtime. You will also see Client connected in your server logs.

Once you’re satisfied with the behavior, commit all your files to git (except node_modules, which should be added to .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 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 this:

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’ll log clients connecting and disconnecting. Once a client has connected, you can also 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 out to clients without waiting for a client’s request. In this example, we’ll 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 looks like this:

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 the time is being updated in realtime. You will also see Client connected in your server logs.

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

Comments

Post a Comment

Popular posts from this blog

4 Ways to Communicate Across Browser Tabs in Realtime

1. Local Storage Events You might have already used LocalStorage, which is accessible across Tabs within the same application origin. But do you know that it also supports events? You can use this feature to communicate across Browser Tabs, where other Tabs will receive the event once the storage is updated. For example, let’s say in one Tab, we execute the following JavaScript code. window.localStorage.setItem("loggedIn", "true"); The other Tabs which listen to the event will receive it, as shown below. window.addEventListener('storage', (event) => { if (event.storageArea != localStorage) return; if (event.key === 'loggedIn') { // Do something with event.newValue } }); 2. Broadcast Channel API The Broadcast Channel API allows communication between Tabs, Windows, Frames, Iframes, and  Web Workers . One Tab can create and post to a channel as follows. const channel = new BroadcastChannel('app-data'); channel.postMessage(data); And oth...
Post a Comment
Read more

Certbot SSL configuration in ubuntu

  Introduction Let’s Encrypt is a Certificate Authority (CA) that provides an easy way to obtain and install free  TLS/SSL certificates , thereby enabling encrypted HTTPS on web servers. It simplifies the process by providing a software client, Certbot, that attempts to automate most (if not all) of the required steps. Currently, the entire process of obtaining and installing a certificate is fully automated on both Apache and Nginx. In this tutorial, you will use Certbot to obtain a free SSL certificate for Apache on Ubuntu 18.04 and set up your certificate to renew automatically. This tutorial will use a separate Apache virtual host file instead of the default configuration file.  We recommend  creating new Apache virtual host files for each domain because it helps to avoid common mistakes and maintains the default files as a fallback configuration. Prerequisites To follow this tutorial, you will need: One Ubuntu 18.04 server set up by following this  initial ...
Post a Comment
Read more

Working with Node.js streams

  Introduction Streams are one of the major features that most Node.js applications rely on, especially when handling HTTP requests, reading/writing files, and making socket communications. Streams are very predictable since we can always expect data, error, and end events when using streams. This article will teach Node developers how to use streams to efficiently handle large amounts of data. This is a typical real-world challenge faced by Node developers when they have to deal with a large data source, and it may not be feasible to process this data all at once. This article will cover the following topics: Types of streams When to adopt Node.js streams Batching Composing streams in Node.js Transforming data with transform streams Piping streams Error handling Node.js streams Types of streams The following are four main types of streams in Node.js: Readable streams: The readable stream is responsible for reading data from a source file Writable streams: The writable stream is re...
Post a Comment
Read more