Time

The Shy Clock

james

This clock freezes in embarrassment when it is viewed.

bit.ly/shy-clock

Setting Up the Server

These are the parts of the node.js server side that keep things running:

  • DigitalOcean droplet
    • I caved and used a paid account
  • Express router
    • A way to route url hits to specific files
  • Socket.io
    • A way to send realtime updates to connected clients
  • An interval timer
    • A way to do something at regular intervals (more below)

The Brains

Logically the shy clock is very simple. You need to keep track of what the clock thinks time is, which I’ve done in a variable called ‘visibleTime’. visibleTime is a Date.now() timestamp taken when the server starts, and updated according to the below system.

At regular intervals (for instance every half second):

  1. Check whether there are any active connections.
  2. If there are any active connections:
    1. Do Not Update Time
  3. Otherwise:
    1. Increment visibleTime partially towards the actual current time (Date.now());

Whenever a user connects, send them the current visibleTime.

The Clock

In its current form the clock is a slightly modified version of the p5.js clock example. Rather than getting seconds, minutes, and hours from the built in p5 functions, the program waits until the server sends a timestamp (which will be visibleTime in javascript timestamp format). Then it can extract the seconds, minutes, and hours necessary to construct a clock.

Since the clock will not move while the user is viewing it, the above needs only happen once.

The Outcome

The above algorithm results in a clock that freezes when any user is viewing it. Once everyone has disconnected, the clock slowly catches up to real time.