JSFiddle - React, Tailwind, and code Playground

HTML

<div class="online"></div>
<div><input type="text" class="text" /><input type="button" class="send" value="Send" /></div>
<div class="messages">
</div>

CSS

body {
    font-family: sans-serif;
    color: #333;
}

.message .author, .message .text {
    display: inline-block;
}

.message .author {
    font-weight: bold;
}

JavaScript

var request = function(url, data, callback) {
    $.ajax({
        url: 'http://broadcast.andrewdunai.com' + url,
        data: data,
        jsonp: 'callback',
        dataType: 'jsonp',
        success: callback,
        error: callback,
    });
};

var start_engine = function() {
    request('/events', {}, function(data) {
        $.each(data.messages, function(i, item) {
            $('.messages').prepend('<div class="message"><div class="author">'+item.user_name+'</div>: <div class="text">'+item.text+'</div></div>');
        });
        $('.online').html('Users online: <b>'+data.online+'</b>');
        window.setTimeout(start_engine, 0);
    })
};

$('.send').click(function(){ send_message(); });
$('.text').keydown(function(e) {
    if(e.keyCode == 13) {
        send_message();
    }
});

var send_message = function() {
    if(!$('.text').val()) {
        return;
    }
    request('/post', {text: $('.text').val()}, function(){});
    $('.text').val('');
};

request('/state', {}, function(data) {
    if(!data.authorized) {
        name = '';
        while(!name || name == 'null') {
            name = prompt('Please enter your name:');
        }
        request('/auth', {name: name}, function(data) {
            start_engine();
        });
    } else {
        start_engine();
    }
});