se cargan modulos de chat en tiempo real

2026-02-28 16:10:19 -06:00
parent 68d32dbd88
commit aeb24f2874
28 changed files with 1830 additions and 33 deletions
@@ -0,0 +1,160 @@
+@extends('layouts.landing')
+
+@section('title',"Chat")
+
+@section('content')
+
+<div class="container-fluid">
+    <div class="card shadow mb-4">
+
+        <div class="card-header py-3">
+            <h6 class="m-0 font-weight-bold text-primary">
+                Mensajes
+            </h6>
+        </div>
+
+        <div class="card-body">
+
+            {{-- CONTENEDOR CHAT --}}
+            <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;">
+
+                    @foreach($conversation->messages 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>
+
+                    @endforeach
+
+                </div>
+
+                {{-- INPUT --}}
+                <div style="margin-top:10px;display:flex;gap:10px;">
+                    <input id="messageInput"
+                           class="form-control"
+                           placeholder="Escribe mensaje...">
+
+                    <button onclick="sendMessage()"
+                            class="btn btn-primary">
+                        Enviar
+                    </button>
+                </div>
+
+            </div>
+
+        </div>
+    </div>
+</div>
+
+@endsection
+
+
+@push('scripts')
+
+<script>
+window.USER_ID = {{ auth()->id() }};
+</script>
+
+<script>
+
+document.addEventListener('DOMContentLoaded', function () {
+
+    const chatApp = document.getElementById('chat-app');
+    const messagesDiv = document.getElementById('messages');
+
+    if (!chatApp || !messagesDiv) {
+        console.error('Chat DOM no encontrado');
+        return;
+    }
+
+    const conversationId =
+        chatApp.dataset.conversationId;
+
+    console.log('Chat conectado a:', conversationId);
+
+    /*
+    |--------------------------------------------------------------------------
+    | ESCUCHAR MENSAJES REALTIME
+    |--------------------------------------------------------------------------
+    */
+
+    window.Echo.private(`chat.${conversationId}`)
+        .listen('.ChatMessageSent', (e) => {
+
+            console.log('Nuevo mensaje:', e);
+
+            let mine =
+                e.message.user_id == window.USER_ID;
+
+            let div = document.createElement('div');
+
+            div.className =
+                'message ' + (mine ? 'mine' : 'theirs');
+
+            div.innerHTML = `
+                <div class="bubble">
+                    <strong>${e.message.user.name}</strong><br>
+                    ${e.message.message}
+                </div>
+            `;
+
+            messagesDiv.appendChild(div);
+
+            scrollChat();
+        });
+
+    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,
+
+        message: input.value
+    });
+
+    input.value = '';
+}
+
+
+/*
+|--------------------------------------------------------------------------
+| AUTO SCROLL
+|--------------------------------------------------------------------------
+*/
+
+function scrollChat() {
+
+    const container =
+        document.getElementById('messages');
+
+    container.scrollTop =
+        container.scrollHeight;
+}
+
+</script>
+
+@endpush