JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.16/socket.io.min.js"></script>
<script src="http://documentcloud.github.io/underscore/underscore-min.js"></script>
<h1>stream.wikimedia.org example</h1>

<p>Below is a live example from the recent changes stream, sampled every seven seconds. There are currently <span id="rate">0</span> changes per minute.</p>
<div id="results"></div>

CSS

body {
    font-family: sans-serif;
    font-size: 0.8em;
}
#results {
    margin: 2em;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    overflow: hidden;
}
#results p {
    margin: 0;
    padding: 0.5em 1em;
    background: #f8f8f8;
}
#results a {
    color: #00f;
    text-decoration: none;
}
#results a:hover {
    text-decoration: underline;
}
#results pre {
    margin: 1em;
}
#rate {
    color: #f50;
}

JavaScript

var LIMIT = 3;
var recent_edits = [];
var socket = io.connect('stream.wikimedia.org/rc');

socket.on('connect', function () {
    socket.emit('subscribe', '*');
});

function add_edit(data) {
    $('#results').fadeOut('slow', function () {
        // note, I could make a human readable language code from data.wiki, using https://github.com/hatnote/lidnote/blob/master/wikis.json
        $('#results').fadeIn().html('<p>User <a href="' + data.server_url + '/wiki/User:' + data.user + '">' + data.user + '</a> changed <a href="' + data.server_url + '/wiki/' + data.title + '">' + data.title + '</a> on ' + data.wiki + '</p><pre>' + JSON.stringify(data, null, '\t') + '</pre>');
    });

}

socket.on('change', _.throttle(add_edit, 7000));
socket.on('change', function (data) {
    // Count edits per minute
    recent_edits.push(new Date(data.timestamp * 1000));
    recent_edits = recent_edits.filter(function (edit) {
        return Date.now() - edit <= 60000;
    });
    $('#rate').html(recent_edits.length);
});