JSFiddle - React, Tailwind, and code Playground

by HugeHugh

HTML

Status: <span id="status"></span><br />
    URL: <input id="url" /><br />
    <input id="open" type="button" value="Connect" /> 
    <input id="close" type="button" value="Disconnect" /><br />
    <form id="wordForm">
        <input type="text" id="words" value="hello world"/>
        <input type="submit" value="send" id="send" />
    </form>
    <span id="message"></span>

JavaScript

"use strict";
        // Initialize everything when the window finishes loading

            var status = document.getElementById("status");
            var url = document.getElementById("url");
            var open = document.getElementById("open");
            var close = document.getElementById("close");
            var send = document.getElementById("send");
            var wordForm = document.getElementById("wordForm");
            var words = document.getElementById("words");
            var message = document.getElementById("message");
            var socket;

            status.textContent = "Not Connected";
            url.value = "wss://smartjs-programico.dotcloud.com";
            close.disabled = true;
            send.disabled = true;

            // Create a new connection when the Connect button is clicked
            open.addEventListener("click", function (event) {
                open.disabled = true;
                socket = new WebSocket(url.value, "echo-protocol");

                socket.addEventListener("open", function (event) {
                    close.disabled = false;
                    send.disabled = false;
                    status.textContent = "Connected";
                });

                // Display messages received from the server
                socket.addEventListener("message", function (event) {
                    message.innerHTML += "<p>Server Says: " + event.data + "</p>";
                });
                
                var a = 0;

                // Display any errors that occur
                socket.addEventListener("error", function (event) {
                    message.textContent = "Error: " + event;
                    a++;
                    console.log(a);
                });

                socket.addEventListener("close", function (event) {
                    open.disabled = false;
                    status.textContent = "Not Connected";
                });
            });

            // Close...