Web application state, à la Dogfight (1983)

Adding real-time notifications to your Node.js app

Glynn Bird
Feb 7, 2017 · 5 min read

Pushing data to the client’s browser keeps a websites’ data fresh and can make the user experience more compelling.

As an example, let’s take a multi-player game. By the end of the post we shall have turned a vintage video game from the 1980s into a web app that allows two players to duel in separate web browsers:

Dogfight (1983)

Before we write some code, I should describe the game. When I was a kid, I had a BBC Micro computer. One of my favourite games was “Dogfight” by Opus Software, which allowed two players to control two aeroplanes and shoot each other.

Recreating Dogfight in a web browser

There are many game frameworks to help you build in-browser JavaScript games. I didn’t use any of them — they seemed to be overkill for my simple game. To simplify things, here’s what I used:

  • an HTML Canvas control to allow the scene to be drawn
  • transparent PNG images to render the planes, cloud and sun. Note that the cloud and the sun are green, as in the original, for reasons unknown
  • CSS transformations to rotate the plane images in response to user controls
  • HTML Audio tags to play sounds
  • a JavaScript setInterval timer to control the recalculation redrawing of the scene

What data needs syncing between browsers?

I started by building the app as if two players were sharing the keyboard: one player uses the A & D keys to control one plane, and the other player users J & L to control theirs. In this case, the state of the application is automatically shared because it resides on the same machine.

  • y coordinate
  • direction of travel (degrees)
  • array of objects for each bullet (x, y, direction of missile)
  • number of rounds fired
  • number of hits on the opponent

Adding the Simple Notification Service to your app

The Simple Notification Service (SNS) can be baked into your web app to add real-time notifications. It handles the “last mile” between the browser and the server and uses RethinkDB to handle the storage of data and streaming of changes.

  • create your webpage assets and place them in a ‘public’ folder in your project
  • add SNS to your app using npm install --save simple-notification-service
  • pass your routes and public directory to the SNS module at startup
  • your custom routes
  • the SNS client library /sns-client.js

Sending real-time data from your client-side app

The client-side code needs to include the SNS client library:

<script src="/sns-client.js"></script>

Try it yourself

You can try Dogfight (2017) yourself at dogfight.mybluemix.net, which is running with RethinkDB from Compose.com or simply clone the code to run it with your local RethinkDB database.

IBM CODAIT

Things we made with data at IBM’s Center for Open Source Data and AI Technologies.

Glynn Bird

Written by

Developer @ IBM. https://glynnbird.com

IBM CODAIT

Things we made with data at IBM’s Center for Open Source Data and AI Technologies.