JSFiddle - React, Tailwind, and code Playground

by Warspawn

HTML

<script src="http://www.xarg.org/download/jquery.xcolor.js"></script>
<input type="text" id="txtUser" /> <button id="btnConnect">Connect</button>
<input type="text" id="txtSend" /> <button id="btnSend">Send</button>
<br />
<div id="log"/>

CSS

#log { height: 400px; overflow: auto; }
.self { color: teal; font-style: italic; }
.self-user {color: blue; font-weight: bold; }

JavaScript

$(document).ready(function() {
    var ws = {}; // holder for the socket
    var userObj = {
        user: $("#txtUser").val(),
        color: $.xcolor.random().getHex()
    };

    var sendHandler = function() {
        var msg = $("#txtSend").val();
        ws.send(msg);
        var msgEL = $("<li class='self-user'>" + userObj.user + ": <span class='self'>" + msg + "</div></li>").appendTo($("#log"));
        $("#txtSend").val("");
    };

    $("#txtSend").keydown(function(e) {
        if (e.keyCode == 13) {
            e.preventDefault();
            sendHandler();
        }
    });

    $("#btnConnect").click(function() {
        userObj.user = $("#txtUser").val();
        if (userObj.user.length > 0) {
            if ("WebSocket" in window) {
                ws = new WebSocket("ws://10.15.15.128:8124");
                ws.onopen = function() {
                    // Web Socket is connected. You can send data by send() method.
                    ws.send(JSON.stringify(userObj));
                    $("<li />").html("Connection Opened").appendTo($("#log"));
                    $("#btnConnect").hide();
                };
                ws.onmessage = function(evt) {
                    var msgData = JSON.parse(evt.data);
                    var msgEL = $("<li style='color:" + $.xcolor.darken(msgData.color).getHex() + ";'>" + msgData.username + ": <span style='color:" + msgData.color + ";'>" + msgData.message + "</div></li>").appendTo($("#log"));
                };
                ws.onclose = function() {
                    $("<li/>").html("Connection Closed").appendTo($("#log"));
                    $("#btnConnect").show();
                };

                $("#btnSend").click(sendHandler);
            } else {
                // the browser doesn't support WebSocket.
                $("#log").html("browser doesn't support web sockets");
            }
        }
    });
});