WebSockets Example

Based off of: - http://jsfiddle.net/bmknight/RqbYB/ - https://www.websocket.org/echo.html

by humanzing

HTML

<h1>WebSocket API Example</h1>

<div id="controls">
    <label>Enter your message to send to the WebSocket server:</label>
    <input type="text" id="message" />
    <button type="button" id="sendbutton" onclick="sendMessage();">Send my message to the server</button>
</div>
<div id="info">
    <p><span class="lbl">Status: </span><span id="connectionstatus">Disconnected</span></p>
</div>
<div id="log"></div>
<br />
<button type="button" id="connectBtn" onclick="closeConnection();">Disconnect from the WebSocket Server</button>
<button type="button" id="clearBtn" onclick="clearLog();">Clear Log</button>

CSS

body {
    font-family: sans-serif;
    padding: 10px;
}
h1 {
    font-weight: bold;
    margin-bottom: 8px;
}
label {
    font-size: small;
}
.lbl {
    font-weight: bold;
}
#controls {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #000;
}

.err-msg {
    color : #F00;
}
.info-msg {
    color : #00F;
}
.debug-msg {
    color : #0A0;
}

div#log {
    height: 300px;
    overflow: auto;
    margin: 1em 0;
    border: 2px inset #DDD;
}

JavaScript

const SOCKET_CONNECTING = 0; // Connection not yet established.
const SOCKET_OPEN = 1; // Conncetion established.
const SOCKET_CLOSING = 2; // In closing handshake.
const SOCKET_CLOSED = 3; // Connection closed or could not open.

// First test for the browsers support for WebSockets
if (!window.WebSocket) {
    // If the user's browser does not support WebSockets, give an alert message
    alert("Your browser does not support the WebSocket API!");
} else {
    // Set the websocket server URL
    var websocketUrl = "wss://fstream.binance.com/ws/btcusdt@forceOrder/btcusdt@aggTrade/";

    // Get status element
    var connStatus = document.getElementById("connectionstatus");

    // Get info div element
    var infoDiv = document.getElementById("info");

    // Get log div element
    var logDiv = document.getElementById("log");

    // Create the WebSocket object (web socket echo test service provided by websocket.org)
    socket = new WebSocket(websocketUrl);

    // This function is called when the websocket connection is opened
    socket.onopen = function () {
        connStatus.innerHTML = 'Connected!';
        addMessage(logDiv, '>> Connected from the websocket server at: ' + websocketUrl, 'debug-msg');
    };

    // This function is called when the websocket connection is closed
    socket.onclose = function () {
        connStatus.innerHTML = 'Disconnected';
        connStatus.className += ' err-msg';
        addMessage(logDiv, '>> Disconnected from the websocket server at: ' + websocketUrl, 'debug-msg');
    };

    // This function is called when the websocket receives a message. It is passed the message object as its only parameter
    socket.onmessage = function (message) {
        addMessage(logDiv, '>> Message received from server: ' + message.data);
    };
}

// Function to send a message to the websocket server
function sendMessage(e) {
    // Check to ensure that the socket variable is present i.e. the browser support tests passed
    if (socket...