lado do cliente

$(document).ready(() => {

    const socket = io()
    const chatNsp = io('/chat')



    function otherUser(user) {
        $('#otherUser').append(`${user}`)
    }


    function renderMessageSend(message) {
        $('#messagesSec').append(`<li class="d-flex user-select-none justify-content-end mb-4">
        <img src="${message.authorAvatar}" alt="avatar"
            class="rounded-circle d-flex align-self-start me-3 shadow-1-strong" width="40">
        <div class="card mask-custom">
            <div class="card-header d-flex justify-content-start p-3"
                style="border-bottom: 1px solid rgba(37, 37, 37, 0.776);">
                <p class="fw-bold mb-0 user-select-all">${message.author}</p>
            </div>
            <div class="card-body float-start user-select-all" id="message">
                <p class="mb-0">
                ${message.message}
                </p>
            </div>
        </div>
    </li>`)

    }

    function renderMessageReceived(message) {
        $('#messagesSec').append(`<li class="d-flex justify-content-start user-select-none mb-4">
        <img src="${message.authorAvatar}" alt="avatar"
            class="rounded-circle d-flex align-self-start me-3 shadow-1-strong" width="40">
        <div class="card mask-custom">
            <div class="card-header d-flex justify-content-start p-3"
                style="border-bottom: 1px solid rgba(37, 37, 37, 0.776);">
                <p class="fw-bold mb-0 user-select-all">${message.author}</p>
            </div>
            <div class="card-body float-start user-select-all" id="message">
                <p class="mb-0">
                ${message.message}
                </p>
            </div>
        </div>
    </li>`)

    }


    function notificationMsg(user) {

        $('#messagesSec').append(`<li class="d-flex user-select-none mb-4">
        <div class="card mask-custom">
            <div class="card-body float-start user-select-all" id="message">
                <p class="mb-0">
               O Usuario <i>${user}</i> entrou no chat!
                </p>
            </div>
        </div>
    </li>`)

    }



    $('#chat').submit((event) => {
        event.preventDefault()



        var author = $('#user').val()
        var authorImg = $('#userImg').val()
        var message = $('#textArea').val()

        if (message.length) {
            var messageObject = {
                author: author,
                authorAvatar: authorImg,
                message: message
            }



            renderMessageSend(messageObject)

            document.getElementById('textArea').value = ""

            socket.emit('sendMessage', messageObject)
        }



    })

    socket.emit('user', $('#user').val() )

   socket.on('userArrive', user => {
       notificationMsg(user)
    })

    socket.on('receivedMessage', (message) => {
        renderMessageReceived(message)
    })


    socket.on('chat start', (data) => {
        socket.emit('room', data.room)
        room = data.room;
        console.log(room);
        
    });





})