A simple HTML/Javascript chat using zenoh REST API

zenoh-chat.html

<dl>
    <dd>
        <p>
            Chat via zenoh!<br>
        <form id="connect-form">
            URL of zenoh router's REST API:
            <input id="router_url" type="text" required value="http://localhost:8000">
            <input type="submit" value="connect"
                class="w3-button w3-round w3-border w3-padding-small w3-theme-d1 w3-right w3-section"
                onclick="return subscribeChatroom();"><br>
            Your nickname:
            <input id="nickname" type="text" required value=""><br>
            Chatroom:
            <input id="chatroom" type="text" required value="/demo/chat"><br>
        </form>
        </p>
        Messages board:
        <br>
        <div id="messages_board" style="overflow:auto; height:500px; border:1px solid black;"></div>
        <input id="message" type="text" required value="" style="overflow:auto; width:500px; border:1px solid black;">
        <input type="submit" value="Send"
            class="w3-button w3-round w3-border w3-padding-small w3-theme-d1 w3-right w3-section"
            onclick="return publishMessage();">

        <script>

            const Http = new XMLHttpRequest();

            function publishMessage() {
                // Get bridge URL and cmd_vel resource to publish from HTML
                var router_url = document.getElementById("router_url").value
                var chatroom = document.getElementById("chatroom").value
                var nickname = document.getElementById("nickname").value
                var message = document.getElementById("message").value

                // PUT it to zenoh via its REST API
                Http.open('PUT', router_url + chatroom, true);
                Http.setRequestHeader('Content-Type', 'application/string');
                Http.send(nickname + "> " + message);
            }

            function onkeydown(e) {
                e = e || window.event;
                console.log("KeyPressed: " + e);
                if (e.keyCode == '13') {
                    // enter key => send message
                    publishMessage()
                    document.getElementById("message").value = ""
                }
            }

            // register callback on key down
            document.onkeydown = onkeydown;

            // EventSource receiving messages
            var event_source;

            function subscribeChatroom() {
                if (typeof (EventSource) !== "undefined") {
                    var router_url = document.getElementById("router_url").value
                    var chatroom = document.getElementById("chatroom").value
                    console.log("Subscribe to EventSource: " + router_url + chatroom);
                    event_source = new EventSource(router_url + chatroom);
                    event_source.addEventListener("PUT", function (e) {
                        console.log("Received sample: " + e.data);
                        // The zenoh REST API sends JSON objects
                        // that includes "key", "value", "encoding" and "time" (same than a result to GET)
                        let sample = JSON.parse(e.data)
                        let message = sample.value
                        // Add it to "messages_board" HTML element
                        let elem = document.getElementById("messages_board");
                        elem.innerHTML += message + "<br>";
                        // Auto-scroll to the bottom
                        elem.scrollTop = elem.scrollHeight;
                    }, false);

                } else {
                    document.getElementById("messages_board").innerHTML = "Sorry, your browser does not support server-sent events...";
                }
                return false;
            }

            // Initiate nickname with a random user name
            var id = Math.floor(Math.random() * 100)
            document.getElementById("nickname").value = "User-" + id;

            // subscribe at page loading
            subscribeChatroom();
        </script>
    </dd>

</dl>