JSFiddle - React, Tailwind, and code Playground

HTML

<input id="userName"></input>
<button id="setUsername" disabled="disabled">Set username</button>
<br />
<input id="messageSending"></input>
<button id="sendMessage" disabled="disabled">Send Message</button>
<div id="thingsThatHappened"></div>

JavaScript

var websocket;

function sendMessage() {
    if (!($("#messageSending").val() === "")) {
        websocket.send("Message: " + $("#messageSending").val());
        $("#messageSending").val("");
    }
}

function setUsername() {
    websocket.send("Username: " + $("#userName").val());
    $("#setUsername").prop("disabled", true);
    $("#messageSending").keyup(function (event) {
        if (event.keyCode == 13) {
            $("#sendMessage").click();
        }
    });
}

function ProcessMessageFromServer(messageFromServer) {

    if (messageFromServer === "Connection accepted") {
        $("#setUsername").click(setUsername);
        $("#setUsername").prop("disabled", false);
    } else if (messageFromServer === "Someone else already has that username") {
        $("#setUsername").prop("disabled", false);
    } else if (messageFromServer === "Name is unique") {
        $("#sendMessage").click(sendMessage);
        $("#sendMessage").prop("disabled", false);
    }
}


window.addEventListener('load', function () {


    if ("WebSocket" in window) {
        websocket = new WebSocket("ws://appName.userName.c9.io/", "chat-server");


        websocket.onopen = function (event) {
            $("#thingsThatHappened").html($("#thingsThatHappened").html() + "<br />" + "Connected to server");
        };
        websocket.onclose = function (event) {

            $("#thingsThatHappened").html($("#thingsThatHappened").html() + "<br />" + "Server disconnected");
        };
        websocket.onmessage = function (event) {
            $("#thingsThatHappened").html($("#thingsThatHappened").html() + "<br />" + "New message received: " + event.data);

            ProcessMessageFromServer(event.data);
        };
        websocket.onerror = function (event) {
            $("#thingsThatHappened").html($("#thingsThatHappened").html() + "<br />" + "There was an error with your websocket.");
        };
    } else {
        alert("Websocket is not supported by your browser");
       ...