index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>Just test websockets</h2>

    <input type="text" placeholder="type message to server" />
    <button id="send">Send</button>
    <button id="close-ws">Close connection</button>

    <script>
        const ws = new WebSocket('ws://localhost:8073');

        // close ws
        function closeConnection() {
            console.log('trying to close ws');
            ws.close(1000, 'Closed by button click');
        }

        // send message to server
        function sendMessage() {
            console.log('trying to send a message');
            const input = document.querySelector('input');
            ws.send(input?.value);
        }

        // add listener when ws open
        ws.addEventListener('open', () => {
            console.log("I'm connected"); 
        });
        // add listener for every message from server
        ws.addEventListener('message', ({data}) => {
            console.log("Message from server: " + data); 
        });

        // add listener for click by close button
        const btnClose = document.querySelector('#close-ws');
        btnClose.addEventListener('click', closeConnection);
        // add listener for click by send button
        const btnSend = document.querySelector('#send');
        btnSend.addEventListener('click', sendMessage);


    </script>
</body>
</html>