JSFiddle - React, Tailwind, and code Playground

by sandro_paganotti

HTML

<button class="close" disabled>close</button>
<span class="subs"></span> Subscribers
<br/>
<input type="text" disabled>
<button class="send">Send</button>
<div></div>

JavaScript

var ws = new WebSocket('ws://10.10.30.159:8080/');
var sub = document.querySelector('.subs');
var close = document.querySelector('.close');
var input = document.querySelector('input');
var send = document.querySelector('.send');
var div = document.querySelector('div');

ws.addEventListener('open', function(){
    close.removeAttribute('disabled');
    input.removeAttribute('disabled');
}, false);

ws.addEventListener('message', function(evt){
    var token = evt.data.substring(0,2);
    var msg = evt.data.substring(2);
    if(token === 'n_'){
        sub.textContent = msg;
    }else if(token === 'c_'){
        div.insertAdjacentHTML(
            "afterbegin", msg + "<br/>"
        );
    }
}, false);

send.addEventListener('click', function(evt){
    ws.send(input.value);
    input.value = "";
}, false);

close.addEventListener('click', function(evt){
    ws.onclose = function () {}; 
    sub.style.display = 'none';
    ws.close();
}, false);