64 lines
2.7 KiB
JavaScript
64 lines
2.7 KiB
JavaScript
window.Echo.channel('chatroom')
|
|
.listen('.message.sent', (e) => {
|
|
console.log(e);
|
|
// Assuming e.message contains the message content, e.user_id contains the user ID of the sender,
|
|
// and e.user_name contains the user's name
|
|
const messagesContainer = document.getElementById('chat-messages');
|
|
const isCurrentUser = e.user_id === window.userId; // Ensure window.userId is set to the current user's ID when the page loads
|
|
|
|
const messageDiv = document.createElement('div');
|
|
messageDiv.classList.add('mb-4');
|
|
|
|
const authorDiv = document.createElement('div');
|
|
authorDiv.classList.add('flex', 'items-center', 'mb-1');
|
|
|
|
const authorSpan = document.createElement('span');
|
|
authorSpan.classList.add('font-bold', 'mr-2');
|
|
authorSpan.innerText = e.name;
|
|
|
|
const timestampSpan = document.createElement('span');
|
|
timestampSpan.classList.add('text-gray-500', 'text-xs');
|
|
timestampSpan.innerText = new Date().toLocaleString(); // You can format the timestamp as needed
|
|
|
|
authorDiv.appendChild(authorSpan);
|
|
authorDiv.appendChild(timestampSpan);
|
|
|
|
const messageContentDiv = document.createElement('div');
|
|
messageContentDiv.classList.add('flex');
|
|
messageContentDiv.classList.add(isCurrentUser ? 'justify-end' : 'justify-start');
|
|
|
|
const messageBodyDiv = document.createElement('div');
|
|
messageBodyDiv.classList.add(isCurrentUser ? 'bg-blue-500' : 'bg-gray-200', 'text-gray-800', 'p-2', 'rounded-lg');
|
|
if (isCurrentUser) {
|
|
messageBodyDiv.classList.remove('text-gray-800');
|
|
messageBodyDiv.classList.add('text-white');
|
|
}
|
|
|
|
const messageP = document.createElement('p');
|
|
messageP.classList.add('text-sm');
|
|
messageP.innerText = e.message;
|
|
|
|
messageBodyDiv.appendChild(messageP);
|
|
messageContentDiv.appendChild(messageBodyDiv);
|
|
|
|
messageDiv.appendChild(authorDiv);
|
|
messageDiv.appendChild(messageContentDiv);
|
|
|
|
messagesContainer.appendChild(messageDiv);
|
|
messagesContainer.scrollTop = messagesContainer.scrollHeight; // Scroll to the bottom of the chat messages container
|
|
});
|
|
|
|
window.sendMessage = function() {
|
|
const messageInput = document.getElementById('messageInput');
|
|
const message = messageInput.value.trim();
|
|
if (message === '') return; // Prevent sending empty messages
|
|
|
|
axios.post('/chat/send', { message: message })
|
|
.then(response => {
|
|
console.log(response.data);
|
|
messageInput.value = ''; // Clear the input field after sending
|
|
})
|
|
.catch(error => console.error(error));
|
|
console.log('sent message');
|
|
};
|