demo/serial-basic.html

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">

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

    <title>WebSocket Serial</title>
</head>
<body>
<main class="container" role="main">
    <h1 class="mt-5">WebSocket Serial</h1>

    <form id="form">
        <p>Input:</p>
        <div class="input-group mb-3">
            <input class="form-control" id="input" name="input" placeholder="Input" type="text" value=""/>

            <div class="input-group-append">
                <button class="btn btn-success" type="submit">Send</button>
            </div>
        </div>

        <p>Output:</p>
        <textarea class="form-control" rows="10" id="output" name="output"></textarea>
    </form>

    <script src="websocket-serial.js"></script>
    <script>
        const $form = document.getElementById("form");
        const $input = document.getElementById("input");
        const $output = document.getElementById("output");

        const serial = new WebSocketSerial({
            url: 'ws://127.0.0.1:12212/serial/DISPLAY',
            onMessage: function (message) {
                $output.value = $output.value + message;
            }
        });

        $form.onsubmit = function (e) {
            serial.send($input.value);
            $input.value = '';
            e.preventDefault();
        }
    </script>
</main>
</body>
</html>