fernando/Sistema-Educativo-Laravel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Se corrigen bugs de chat en tiempo real

Browse Source
This commit is contained in:
unknown
2026-03-04 16:26:45 -06:00
parent e47938001a
commit ec6a72ba0c
6 changed files with 216 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/chat/show.blade.php
+121 -50
View File
@@ -19,22 +19,25 @@
<div id="chat-app"
data-conversation-id="{{ $conversation->id }}">
{{-- MENSAJES --}}
<div id="messages"
style="height:400px;overflow-y:auto;padding:10px;background:#f5f5f5;border-radius:10px;">
<div id="messages"
style="height:70vh;overflow-y:auto;padding:10px;background:#f5f5f5;border-radius:10px;">
@foreach($conversation->messages as $message)
@foreach($conversation->messages->sortBy('created_at') as $message)
<div class="message {{ $message->user_id == auth()->id() ? 'mine' : 'theirs' }}">
<div class="bubble">
<strong>{{ $message->user->name }}</strong><br>
{{ $message->message }}
</div>
<div class="message {{ $message->user_id == auth()->id() ? 'mine' : 'theirs' }}">
<div class="bubble">
<strong>{{ $message->user->name }}</strong><br>
{{ $message->message }}
</div>
</div>
@endforeach
@endforeach
</div>
</div>
<div id="typingIndicator"
style="font-size:12px;color:#888;padding:8px 5px;height:20px;">
</div>
{{-- INPUT --}}
<div style="margin-top:10px;display:flex;gap:10px;">
@@ -50,6 +53,7 @@
</div>
</div>
</div>
</div>
@@ -64,97 +68,164 @@ window.USER_ID = {{ auth()->id() }};
</script>
<script>
let conversationId;
let typingTimeout;
let typingActive = false;
document.addEventListener('DOMContentLoaded', function () {
const chatApp = document.getElementById('chat-app');
const messagesDiv = document.getElementById('messages');
const input = document.getElementById('messageInput');
if (!chatApp || !messagesDiv) {
console.error('Chat DOM no encontrado');
return;
}
const conversationId =
chatApp.dataset.conversationId;
conversationId = chatApp.dataset.conversationId;
console.log('Chat conectado a:', conversationId);
/*
|--------------------------------------------------------------------------
| ESCUCHAR MENSAJES REALTIME
| ESCUCHAR "USUARIO ESCRIBIENDO"
|--------------------------------------------------------------------------
*/
window.Echo.private(`chat.${conversationId}`)
.listen('.ChatMessageSent', (e) => {
.listen('.UserTyping', (e) => {
console.log('Nuevo mensaje:', e);
if (e.user.id == window.USER_ID) return;
let mine =
e.message.user_id == window.USER_ID;
document.getElementById('typingIndicator').innerText =
e.user.name + ' está escribiendo...';
});
let div = document.createElement('div');
/*
|--------------------------------------------------------------------------
| ESCUCHAR "USUARIO DEJÓ DE ESCRIBIR"
|--------------------------------------------------------------------------
*/
div.className =
'message ' + (mine ? 'mine' : 'theirs');
window.Echo.private(`chat.${conversationId}`)
.listen('.UserStoppedTyping', (e) => {
div.innerHTML = `
<div class="bubble">
<strong>${e.message.user.name}</strong><br>
${e.message.message}
</div>
`;
if (e.user.id == window.USER_ID) return;
messagesDiv.appendChild(div);
document.getElementById('typingIndicator').innerText = '';
});
scrollChat();
/*
|--------------------------------------------------------------------------
| ESCUCHAR MENSAJES
|--------------------------------------------------------------------------
*/
window.Echo.private(`chat.${conversationId}`)
.listen('.ChatMessageSent', (e) => {
if (e.message.user_id == window.USER_ID) return;
appendMessage(e.message);
document.getElementById('typingIndicator').innerText = '';
});
/*
|--------------------------------------------------------------------------
| DETECTAR ESCRITURA
|--------------------------------------------------------------------------
*/
input.addEventListener('input', () => {
if (!typingActive) {
typingActive = true;
axios.post('/chat/typing', {
conversation_id: conversationId
});
}
clearTimeout(typingTimeout);
typingTimeout = setTimeout(() => {
typingActive = false;
axios.post('/chat/stop-typing', {
conversation_id: conversationId
});
}, 700);
});
scrollChat();
});
/*
|--------------------------------------------------------------------------
| ENVIAR MENSAJE
|--------------------------------------------------------------------------
*/
function sendMessage() {
let input = document.getElementById('messageInput');
if (!input.value.trim()) return;
axios.post('/chat/send', {
conversation_id:
document
.getElementById('chat-app')
.dataset.conversationId,
typingActive = false;
axios.post('/chat/stop-typing', {
conversation_id: conversationId
});
axios.post('/chat/send', {
conversation_id: conversationId,
message: input.value
})
.then(response => {
appendMessage(response.data.message);
document.getElementById('typingIndicator').innerText = '';
});
input.value = '';
}
/*
|--------------------------------------------------------------------------
| AUTO SCROLL
|--------------------------------------------------------------------------
*/
function appendMessage(message) {
const messagesDiv = document.getElementById('messages');
let mine = message.user_id == window.USER_ID;
let div = document.createElement('div');
div.className = 'message ' + (mine ? 'mine' : 'theirs');
div.innerHTML = `
<div class="bubble">
<strong>${message.user.name}</strong><br>
${message.message}
</div>
`;
messagesDiv.appendChild(div);
scrollChat();
}
function scrollChat() {
const container =
document.getElementById('messages');
const container = document.getElementById('messages');
container.scrollTop = container.scrollHeight;
container.scrollTop =
container.scrollHeight;
}
</script>
@endpush