The following code accepts data from a WebSocket connection and adds a clickable Twitter-style "x number of new updates" message to the DOM. If clicked, the updates are added to the timeline.

mcgrath_websockets

$(function() {
  var updates = {
    'total': 0,
    'new': []
  }
  var faye = new Faye.Client('http://localhost:9292/faye');

  faye.subscribe("/" + fayeChannel + "/new", function(data) {
    var update_valid = checkDataValidity(data);
    if (update_valid === true) {
      updates['new'].push(data);
      updates['total'] += 1;
      var $new_updates = $("#new_updates");
      var $total_updates = $("#total_updates");
      var $no_updates = $("#no_updates");

      if ($no_updates.length === 1) {
        addNewUpdatesToList(updates['total'], updates['new']); 
        $no_updates.remove();
      } else {
        showTotalNewUpdates(updates['total']); 
      }
    }

    function checkDataValidity(data) {
      var data_attributes = ['provider', 'type', 'value', 'date', 'created_at']
      for (var i=0; i<data_attributes.length; i++) {
        if (data[data_attributes[i]] === undefined) {
          return false;
        }
      }
      return true;
    }

    $("#total_updates").click(function() {
      $(this).remove();
      addNewUpdatesToList(updates['total'], updates['new']); 
    });

    function addNewUpdatesToList(totalNewUpdates, newUpdates) {
      var updateHtml = "";
      var now = new Date();
      var nowSeconds = Math.round(now.getTime() / 1000);
      for (var i=totalNewUpdates-1; i>=0; i--) {
        var timeAgo = addTimeAgo(nowSeconds, newUpdates[i].created_at);
        var provider = capitalize(newUpdates[i].provider); 
        var label = getLabel(newUpdates[i].type);
        var type = capitalize(label + " " + newUpdates[i].type);
        var value = newUpdates[i].value;
        updateHtml += "<li class='list-group-item row update'>"
          + "<div class='row'><div class='col-md-8'>"
          + "<b>" + provider + "</b>"
          + "</div><div class='col-md-4'>"
          + "<small><p class='text-right text-muted timeAgo'>"
          + timeAgo
          + "</small></p>"
          + "</div></div>"
          + "<p>" + type + ": " + value + "</p>"
          + "</li>";
        if (i === 0) {
          $new_updates.prepend(updateHtml);
          updates['total'] = 0;
          updates['new'] = [];
        }
      }
    }

    function getLabel(type) {
      var label = "Total";
      if (type === 'Weight') {
        label = "Current";
      }
      return label;
    }

    function capitalize(text) {
      return text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();
    }

    function addTimeAgo(now, createdAt) {
      var elapsedTime = now - createdAt;
      return getTimeAgoString(elapsedTime);
    }

    function getTimeAgoString(elapsedTime) {
      var timeString = "";
      var days = elapsedTime / 60 / 60 / 24;
      var hours = elapsedTime / 60 / 60;
      var minutes = elapsedTime / 60;
      var seconds = elapsedTime < 60;
      if (seconds === true) {
        timeString += "<1m";
      } else if (days >= 1) {
        timeString += Math.round(days) + "d";
      } else if (hours >= 1) {
        timeString += Math.round(hours) + "h";
      } else if (minutes >= 1)  {
        timeString += Math.round(minutes) + "m";
      }
      return timeString;
    }

    function showTotalNewUpdates(total) {
      $total_updates = $("#total_updates");
      var message = total + " new update";
      if (total > 1) {
        message += "s";
      }
      var html = "<div class='panel-default row'><div class='panel-body' id='total_updates'>" + message + "</div></div>";
      if ($total_updates.length === 0) {
        $new_updates.prepend(html);
      } else {
        $total_updates.text(message);
      }
    }
  });
});