interface.html

<!DOCTYPE html>
<html>

<head>
    <title>WebSocket Test</title>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.1.2/socket.io.js"></script>

</head>

<body data-bs-theme="dark">
    <div class="card m-2">
        <div class='card-body' id="antennas">
            <h5 class="card-title">RemoteBox</h5>
        </div>
    </div>

</body>

</html>
<script>
    $(document).ready(function() {
        var pollStatus = setInterval(getStatus, 1000)
    })

    const socket = io.connect('http://localhost:3001'); // Replace 'localhost' with your server's hostname or IP address

    socket.on('connect', () => {
        console.log('Connected to WebSocket server');
    });

    socket.on('disconnect', () => {
        console.log('Disconnected from WebSocket server');
    });

    socket.on('status', (data) => {
        // data = { 1: [bool x8], 2: [bool x8] }, one key per radio
        const $box = $("#antennas")
        Object.keys(data).forEach((radio) => {
            let $row = $(`#radio${radio}`)
            if (!$row.length) {
                $row = $(`<div id="radio${radio}" class="mb-2"><div class="small text-muted">Radio ${radio}</div></div>`)
                data[radio].forEach((_, i) => {
                    $row.append(`<button type="button" class="btn btn-secondary me-1" data-radio="${radio}" data-ant="${i}">ANT-${i + 1}</button>`)
                })
                $box.append($row)
            }
            $row.find("button").each(function () {
                const on = data[radio][this.dataset.ant]
                $(this).toggleClass("btn-success", on).toggleClass("btn-secondary", !on)
            })
        })
    });

    function getStatus() {
        socket.emit('get-status');
    }

    $(document).on("click", "#antennas button", function () {
        // radio, antenna index (0..7), on
        socket.emit('set-antenna', Number(this.dataset.radio), Number(this.dataset.ant), true)
    })
</script>