parte do cliente

const socket = io()

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



     function renderMessageSend (message) {
        $('#messagesSec').append(`<li class="d-flex 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">${message.author}</p>
            </div>
            <div class="card-body float-start" id="message">
                <p class="mb-0">
                ${message.message}
                </p>
            </div>
        </div>
    </li>`)

    }

    function renderMessageReceived (message) {
        $('#messagesSec').append(`<li class="d-flex justify-content-start 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">${message.author}</p>
            </div>
            <div class="card-body float-start" id="message">
                <p class="mb-0">
                ${message.message}
                </p>
            </div>
        </div>
    </li>`)

    }

    // socket.on('previousMessages', (messages) => {
    //     for (message of messages) {
    //         renderMessageSend(message)
    //         renderMessageReceived(message)
    //     }
    // })

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

    

    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)
    }



})