JSFiddle - React, Tailwind, and code Playground

by FZambia

HTML

<script src="https://rawgit.com/Caligatio/jsSHA/master/src/sha256.js"></script>
<script src="https://cdn.jsdelivr.net/sockjs/1.0/sockjs.min.js"></script>
<script src="https://rawgit.com/centrifugal/centrifuge-js/master/centrifuge.min.js"></script>
<p>
    Demo chat using <a target="_blank" href="https://github.com/centrifugal/centrifugo">Centrifugo server and client</a>. <span class="help">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.9em;
    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://centrifugo.herokuapp.com/connection";

// note that you MUST NEVER reveal project secret key in production
// this is just a demo where we generate connection token on client side
var secret = "secret";

var user = "42";
var timestamp = parseInt(new Date().getTime()/1000).toString();

var hmacBody = user + timestamp;

var shaObj = new jsSHA("SHA-256", "TEXT");
shaObj.setHMACKey(secret, "TEXT");
shaObj.update(hmacBody);
var token = shaObj.getHMAC("HEX");

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

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,
    "user": user,
    "timestamp": timestamp,
    "token": token,
    "debug": true
});

var subscription;

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

    subscription.on('subscribe', function() {
   ...