<ul id="messages"></ul>

<div class="bar">
    <form action="" id="room">
        <input id="j" autocomplete="off"/>
        <button>Send</button>
    </form>

    <form action="" id="message">
        <input id="m" autocomplete="off"/>
        <button>Send</button>
    </form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(function () {
        const socket = io();
        $('#message').submit(function () {
            const roomId = $('#j').val();
            const message = $('#m').val();
            socket.emit('message', {roomId: roomId, message: message});
            return false;
        });

        $('#room').submit(function () {
            const roomId = $('#j').val();
            socket.emit('room', {roomId: roomId});
            return false;
        });

        socket.on('message', function (msg) {
            $('#messages').append($('<li>').text(msg));
            window.scrollTo(0, document.body.scrollHeight);
        });
    });
</script>
</body>
</html>