websocket-test.html

<style>
    button {
        font-size: 16px;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        background: #ddd;
        padding: 1em 2em;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin: .5em;
    }

    .connectionstatus {
        display: block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: red;
    }

    .connectionstatus.connected {
        background: green;
    }
</style>

<span class="connectionstatus"></span>

<button data-send-color data-color="0,0,0">Blackout!</button><br />
<br />
<button data-send-color data-color="255,0,0">Send red!</button><br />
<button data-send-color data-color="0,255,0">Send blue!</button><br />
<button data-send-color data-color="0,0,255">Send green!</button><br />
<br /><br />
<button data-send-color data-color="255,0,0" data-fade>Fade red!</button><br />
<button data-send-color data-color="0,255,0" data-fade>Fade blue!</button><br />
<button data-send-color data-color="0,0,255" data-fade>Fade green!</button><br />

<script src="https://cdn.jsdelivr.net/npm/socket.io-client@2/dist/socket.io.js"></script>
<script>
    const socket = io('http://pixelpi.local:3030');
    const statusEl = document.querySelector('.connectionstatus');

    socket.on('connect', function () {
        console.log('connected!');
        statusEl.classList.add('connected');
    });

    socket.on('disconnect', function () {
        console.log('disconnected!')
        statusEl.classList.remove('connected');
    });

    socket.on('error', function (e) {
        console.log('error!', e)
        statusEl.classList.remove('connected');
    });

    [...document.querySelectorAll('[data-send-color]')].forEach(button => {
        button.addEventListener('click', () => {
            sendColor(button.dataset.fade, button.dataset.color.split(','));
        });
    });

    function sendColor(fade, [r, g, b]) {
        console.log('send color', fade, r,g,b);
        const arr = new Array(300).fill([r, g, b]);

        socket.emit(typeof fade !== undefined ? 'data-fade' : 'data', arr);
    }
</script>