websocket-powered tag history in browser

also upgrade from jade 1.11 to pug 2 (project changed names due to
copyright issues)

package.json

@@ -16,9 +16,10 @@
   "dependencies": {
     "express": "^4.14.0",
     "glob": "^7.1.1",
-    "jade": "^1.11.0",
     "morgan": "^1.7.0",
     "nodemon": "^1.9.2",
-    "stylus": "^0.54.5"
+    "pug": "^2.0.0-beta11",
+    "stylus": "^0.54.5",
+    "ws": "^2.2.2"
   }
 }

player.js

@@ -3,6 +3,22 @@ const spawn = require('child_process').spawn;
 const tag_reader = spawn('/home/annika/rfid/run-tag-reader');
 const player = spawn('/usr/bin/mpg321', ['-R', '-']);
 
+const express = require('express');
+const logger = require('morgan')
+const pug = require('pug');
+
+var app = express();
+var server = require('http').createServer();
+
+const WebSocket = require('ws');
+const WebSocketServer = WebSocket.Server;
+var wss = new WebSocketServer({server: server});
+
+var template = pug.compileFile(__dirname + '/source/templates/homepage.pug'),
+    log_tpl = pug.compileFile(__dirname + '/source/templates/log.pug');
+
+var play_log = [];
+
 tag_reader.on('error', function(err) {
   console.log(`[tag_reader:error] ${err}`);
 });
@@ -13,8 +29,8 @@ player.on('error', function(err) {
 
 // player.stdin.write("GAIN 100");
 
-last_tag = null;
+var last_tag = null;
-debounce_until = 0;
+var debounce_until = 0;
 
 function lookup(tag, cb) {
   if (tag === 'b9506555d9') {
@@ -23,24 +39,42 @@ function lookup(tag, cb) {
   if (tag === 'aa89665510') {
     return cb('PAUSE', 2);
   }
+
   glob('media/' + tag + ' - *.mp3', function(er, files) {
     if (files.length > 0) {
+      appendLog(files[0]);
       return cb("LOAD " + files[0], 5);
     }
+    appendLog(tag);
   });
 }
 
+function appendLog(message) {
+  if (play_log.length > 10) {
+    play_log.pop();
+  }
+
+  play_log.unshift(message);
+
+  var data = {
+    html: log_tpl({ play_log: play_log }),
+    tag: last_tag
+  };
+
+  wss.broadcast(JSON.stringify(data));
+}
+
 tag_reader.stdout.on('data', (data) => {
   if (Date.now() / 1000 < debounce_until) {
     return;
   }
   last_tag = String(data).trim();
-  console.log("Tag: " + last_tag);
+  console.log("[tag] " + last_tag);
   lookup(last_tag, function(action, wait_sec) {
     wait_sec = wait_sec || 1;
     if (action) {
       debounce_until = Date.now() / 1000 + wait_sec;
-      console.log(`Running ${action} for ${last_tag}`);
+      console.log(`[action] [${action}] for [${last_tag}]`);
       player.stdin.write(action + "\n");
     }
   });
@@ -57,23 +91,40 @@ player.stderr.on('data', (data) => {
   console.log(`[player:stderr] ${data}`);
 });
 
-var express = require('express')
-  , logger = require('morgan')
-  , app = express()
-  , template = require('jade').compileFile(__dirname + '/source/templates/homepage.jade')
-
 app.use(logger('dev'))
 app.use(express.static(__dirname + '/static'))
 
 app.get('/', function (req, res, next) {
   try {
-    var html = template({ title: 'Home', last_tag: last_tag })
+    var html = template({
+      title: 'Home',
+      last_tag: last_tag,
+      play_log: play_log
+    })
     res.send(html)
   } catch (e) {
     next(e)
   }
-})
+});
 
-app.listen(process.env.PORT || 80, function () {
+wss.broadcast = function broadcast(data) {
-  console.log('Listening on http://localhost:' + (process.env.PORT || 80))
+  wss.clients.forEach(function each(client) {
+    if (client.readyState === WebSocket.OPEN) {
+      client.send(data);
+    }
+  });
+};
+
+wss.on('connection', function (ws) {
+  console.log('[websocket] client connected');
+  ws.on('close', function () {
+    console.log('[websocket] client disconnected');
+  });
+});
+
+server.on('request', app);
+
+var server_port = process.env.PORT || 80;
+server.listen(server_port, function () {
+  console.log('[http] listening on http://localhost:' + server_port)
 })

source/stylesheets/index.styl

@@ -16,7 +16,7 @@ body
     font-weight 200
     font-size 80px
     text-align center
-    padding 100px
+    padding 20px 100px
     text-transform uppercase
     color #fff
 

source/templates/default.pug

@@ -2,10 +2,11 @@ doctype html
 html
   head
     link(rel='stylesheet', href='/css/index.css')
-    title World Wide Web
+    title jukebox.stop.wtf
+    script(src='/jukebox.js')
   body
     .header
-      h1.page-title World Wide Web
+      h1.page-title jukebox.stop.wtf
 
     ul.nav
       li: a(href='/') Home
@@ -17,4 +18,4 @@ html
       block content
 
     .footer
-      p Copyright © 2020 Futurecorpz. Futurecorpz ® is a Registered Trademark of Futures (un)Ltd. in the Mars Community and other solar systems.
+      p made with love by annika

source/templates/homepage.jade

@@ -1,5 +0,0 @@
-extend default
-
-block content
-  p.
-    Last tag seen: #{last_tag}

source/templates/homepage.pug

@@ -0,0 +1,8 @@
+extend default
+
+block content
+  p
+    | Last tag seen:
+    span#last_tag #{last_tag}
+  ul#play-log
+    include log

source/templates/log.pug

@@ -0,0 +1,4 @@
+for tag in play_log
+  li= tag
+else
+  li nothing in the log

static/jukebox.js

@@ -0,0 +1,19 @@
+window.onload = function() {
+    console.log('window.onload');
+
+    var play_log = document.getElementById('play-log');
+    var last_tag = document.getElementById('last_tag');
+
+    function updateLog(data) {
+        last_tag.innerHTML = data.tag;
+        play_log.innerHTML = data.html;
+    }
+
+    var host = window.document.location.host.replace(/:.*/, '');
+    var ws = new WebSocket('ws://' + host + ':80');
+    ws.onmessage = function (event) {
+        console.log(event.data);
+        updateLog(JSON.parse(event.data));
+    };
+
+};