JSFiddle - React, Tailwind, and code Playground

by FZambia

HTML

<script src="https://d1fxtkz8shb9d2.cloudfront.net/sockjs-0.3.4.min.js"></script>
<script src="https://rawgithub.com/FZambia/centrifuge/master/javascript/centrifuge.min.js"></script>
<p>
    Demo chat using <a target="_blank" href="https://github.com/FZambia/centrifuge">Centrifuge</a>. <span class="help">Please, open several browser tabs to see it in action.</span>
</p>
<div id="input-wrapper">
    <input type="text" id="nickname" placeholder="type nickname" />
    <input type="text" id="input" placeholder="type your message and press ENTER" />
</div>
<div id="log"></div>

CSS

#input-wrapper {
    padding: 10px;
}
#nickname {
    width: 20%;
    height: 20px;
}
#input {
    width: 70%;
    height:20px;
}
#log {
    padding: 10px;
}
.help {
    font-size: 0.7em;
    color: #CCC;
    display: block;
}
.time {
    font-size: 0.8em;
    color: #2d2d2d;
}
.from {
    margin-left: 5px;
    color: #2d2d2d;
}
.text {
    margin-left: 5px;
    color: #2d2d2d;
}
.system .time {
    color: #7697D1;
}
.system .from {
    color: #7697D1;
}
.system .text{
    color: #7697D1;
}

JavaScript

var url = "https://cent.herokuapp.com/connection";
var project = "c64afd2612c94f5da43265303222c279";
var user = "42";
var token = "6a8a10492e630e0fed1482adfb11206b";

var log = $('#log');
var nickname = $('#nickname');
var input = $('#input');

function generate_uuid () {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
        return v.toString(16);
    });
};

var get_current_time = function() {
    var pad = function (n) {return ("0" + n).slice(-2);};
    var d = new Date();
    return pad(d.getHours()) + ':' + pad(d.getMinutes()) + ':' + pad(d.getSeconds());
}

var create_message = function(text, from) {
    var time = get_current_time();
    var add_class = "";
    if (typeof(from) == "undefined") {
        add_class += " system";
    }
    var from  = from || "system";
    var message = $('<div class="message ' + add_class + '"></div>');
    var time_span = $('<span class="time"></span>');
    var from_span = $('<span class="from"></span>');
    var text_span = $('<span class="text"></span>');
    time_span.text(time);
    from_span.text(from + ':');
    text_span.text(text);
    message.append(time_span).append(from_span).append(text_span);
    return message;
}

var add_message = function(text, from) {
    log.prepend(create_message(text, from))
}

var centrifuge = new Centrifuge({
    // please, read Centrifuge documentation to understand 
    // what does each option mean here
    "url": url,
    "project": project,
    "user": user, 
    "token": token
});

var subscribe = function() {
    var subscription = centrifuge.subscribe('test:test', function(message) {
        if (message.data) {
            add_message(message.data["input"], message.data["nick"]);
        }
    });

    subscription.on('ready', function() {
        add_message("subscribed on channel test from namespace test");

        setInterval(function() {
            // Heroku closes...