JSFiddle - React, Tailwind, and code Playground

by Eric Blanchette

HTML

<script src="http://socketio.mtgox.com/socket.io/socket.io.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<div class="col">Depth
    <div id="depth-price"></div>
    <br/>
    <div id="24e67e0d-1cad-4cc0-9e7a-f8523ef460fe"></div>
</div>
<div class="col">Ticker
    <div id="d5f06780-30a8-4a48-a2f8-7ed181b4a13f"></div>
</div>
<div class="col">Trades
    <div id="dbf1dee9-4f2e-4a08-8cb7-748919a71b21"></div>
</div>
<div class="col">Bots
    <div id="bots"></div>
</div>

CSS

.col {
    float:left;
    width:32%;
}

JavaScript

$(function () {

    
    
    var PubSub = {};
 
(function(p){
 
    "use strict";
 
    
 
    var topics = {},
 
          lastUid = -1;
 
    
 
    var publish = function( topic , data){
 
        if ( !topics.hasOwnProperty( topic ) ){
 
            return false;
 
        }
 
        
 
        var notify = function(){
 
            var subscribers = topics[topic],
 
                throwException = function(e){
 
                return function(){
 
                    throw e;
 
                };
 
            }; 
 
            
 
            for ( var i = 0, j = subscribers.length; i < j; i++ ){
 
                try {
 
                    subscribers[i].func( topic, data );
 
                } catch( e ){
 
                    setTimeout( throwException(e), 0);
 
                }
 
            }
 
        };
 
        
 
        setTimeout( notify , 0 );
 
        return true;
 
    };
 
    
 
    /**
     *  Publishes the topic, passing the data to it's subscribers
     *  @topic (String): The topic to publish
     *  @data: The data to pass to subscribers
    **/
 
    p.publish = function( topic, data ){
 
        return publish( topic, data, false );
 
    };
 
    
 
    /**
     *  Subscribes the passed function to the passed topic. 
     *  Every returned token is unique and should be stored if you need to unsubscribe
     *  @topic (String): The topic to subscribe to
     *  @func (Function): The function to call when a new topic is published
    **/
 
    p.subscribe = function( topic, func ){
 
        // topic is not registered yet
 
        if ( !topics.hasOwnProperty( topic ) ){
 
            topics[topic] = [];
 
        }
 
        var token = (++lastUid).toString();
 
        topics[topic].push( { token : token, func : func } );
 
        // return token for unsubscribing
 
        return token;
 
    };
 
    /**
     *  Unsubscribes a specific subscriber from a specific topic using the unique token
     *  @token (String): The...