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