parte do cliente
unknown
javascript
2 years ago
2.4 kB
6
Indexable
Never
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) } })