JSFiddle - React, Tailwind, and code Playground

by sandro_paganotti

HTML

<strong>BroadCast!</strong><br>
<span></span> partecipanti:<br><br>
<input type="text" placeholder="messaggio">
<button disabled>invia</button>
<ul></ul>

JavaScript

var ws = new WebSocket('ws://172.20.10.2:8080'),
    bt = document.querySelector('button'),
    sp = document.querySelector('span'),
    ul = document.querySelector('ul'),
    ip = document.querySelector('input[type=text]');
    
ws.addEventListener('message', function(e){
    if(e.data === 'ok'){
        bt.removeAttribute('disabled');
    } else if(e.data.substr(0,3) === 'new'){
        sp.textContent = e.data.substr(3);
    } else {
        ul.insertAdjacentHTML('afterbegin','<li>' + e.data + '</li>');
    }
}, false);

bt.addEventListener('click', function(e){
    ws.send(ip.value);
    ip.value = "";
});