examples/mcp_server.html

<html data-bs-theme="dark">

<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>

<body>
    <nav class="navbar navbar-dark bg-primary">
        <div class="container">
            <span class="navbar-brand mb-0 h1">Bumble LEA Media Control Client</span>
        </div>
    </nav>
    <br>

    <div class="container">

        <label class="form-label">Server Port</label>
        <div class="input-group mb-3">
            <input type="text" class="form-control" aria-label="Port Number" value="8989" id="port">
            <button class="btn btn-primary" type="button" onclick="connect()">Connect</button>
        </div>

        <button class="btn btn-primary" onclick="send_opcode(0x01)">Play</button>
        <button class="btn btn-primary" onclick="send_opcode(0x02)">Pause</button>
        <button class="btn btn-primary" onclick="send_opcode(0x03)">Fast Rewind</button>
        <button class="btn btn-primary" onclick="send_opcode(0x04)">Fast Forward</button>
        <button class="btn btn-primary" onclick="send_opcode(0x05)">Stop</button>

        </br></br>

        <button class="btn btn-primary" onclick="send_opcode(0x30)">Previous Track</button>
        <button class="btn btn-primary" onclick="send_opcode(0x31)">Next Track</button>

        <hr>

        <div id="socketStateContainer" class="bg-body-tertiary p-3 rounded-2">
            <h3>Log</h3>
            <code id="log" style="white-space: pre-line;"></code>
        </div>
    </div>


    <script>
        let portInput = document.getElementById("port")
        let log = document.getElementById("log")
        let socket

        function connect() {
            socket = new WebSocket(`ws://localhost:${portInput.value}`);
            socket.onopen = _ => {
                log.textContent += 'OPEN\n'
            }
            socket.onclose = _ => {
                log.textContent += 'CLOSED\n'
            }
            socket.onerror = (error) => {
                log.textContent += 'ERROR\n'
                console.log(`ERROR: ${error}`)
            }
            socket.onmessage = (event) => {
                log.textContent += `<-- ${event.data}\n`
            }
        }

        function send(message) {
            if (socket && socket.readyState == WebSocket.OPEN) {
                let jsonMessage = JSON.stringify(message)
                log.textContent += `--> ${jsonMessage}\n`
                socket.send(jsonMessage)
            } else {
                log.textContent += 'NOT CONNECTED\n'
            }
        }

        function send_opcode(opcode) {
            send({ 'opcode': opcode })
        }
    </script>
    </div>
</body>

</html>