JSFiddle - React, Tailwind, and code Playground

by tonyleeper

HTML

Enter your name: <input id="name" type="text" value="Samih" /><br />
<input id="message" type="text" />
<button id="send">Send Message</button>
<div id="output"></div>

JavaScript

var name = document.getElementById('name');
var message = document.getElementById('message');
var send = document.getElementById('send');
var output = document.getElementById('output');

if ("WebSocket" in window) {
    var webSocket = new WebSocket('ws://br-tleeper-lt:1978');

    webSocket.onopen = function () {
        
    };

    webSocket.onmessage = function (evt) {
        console.timeEnd('response time');
        var data = JSON.parse(evt.data);
        output.innerHTML = '<p>' + data.name + ' : ' + data.message + ' (' + data.clients + ' clients)</p>' + output.innerHTML;
    };
    
    webSocket.onclose = function () {
        
    };
    
    webSocket.onerror = function (evt) {
        
    };
    
    send.addEventListener('click', function () {
        if (message.value === '') {
            return;
        }
        
        console.time('response time');
        webSocket.send(JSON.stringify({
            name: name.value,
            message: message.value
        }));
        
        message.value = '';
    });
} else {
    alert('Oh dear, looks like web sockets are not supported by your browser... have you tried Google Chrome?');
}