JSFiddle - React, Tailwind, and code Playground

by Regisc

HTML

<div id="chat"></div>
<form id="send-message" action="">
    <input size="35" id="message"></input>
    <input type="submit"></input>
</form>

JavaScript

var io = {
    connect: function() {
        return socket;
    }
};
var socket = {
    emit: function(msg, val) {
        console.log('emit:', { msg: msg, val: val });
    },
    on: function(event, callback) {
        // ignore
    }
};
jQuery(function ($) {
    var socket = io.connect();
    var $messageForm = $('#send-message');
    var $messageBox = $('#message');
    var $chat = $('#chat');
    
    $messageForm.submit(function (event) {
        event.preventDefault();
        alert("jQuery Loaded.");
        socket.emit('send message', $messageBox.val());
        $messageBox.val('');
    });
    
    socket.on('new message', function (data) {
        $chat.append(data + '<br />');
    });
});