En este tutorial, crearemos una aplicación de chat en tiempo real con Laravel, Nuxt 3, Sanctum y Laravel Reverb para gestionar la mensajería segura y en directo entre usuarios. Configuraremos la autenticación de usuarios, nos conectaremos a una API segura y nos aseguraremos de que el chat se actualice al instante para ofrecer una experiencia fluida y con capacidad de respuesta.  Utilizaremos el módulo para gestionar la autenticación SPA, que gestiona de forma eficiente tanto la autenticación de API como la de aplicaciones de página única (SPA). Para obtener más información sobre el uso de este módulo, consulte el artículo sobre   . la autenticación SPA de Nuxt 3  En este proyecto, configuraremos Laravel Reverb para la transmisión de eventos en tiempo real, implementaremos la autenticación con Sanctum y crearemos una interfaz de Nuxt 3 que muestre y administre mensajes de chat de manera dinámica. ¡Comencemos!   https://www.youtube.com/watch?v=bjcM8E5s8p0&embedable=true  Prerrequisitos  Familiaridad básica con Laravel, Sanctum y Nuxt 3.  Comprensión de la transmisión de eventos en Laravel.  Un proyecto Laravel creado con Sanctum.  Nuxt 3 está instalado y configurado como el frontend de su aplicación.  Paso 1: Configurar Laravel Sanctum y Laravel Reverb  En primer lugar, asegúrese de que Laravel Sanctum esté instalado y configurado. Sanctum permite la autenticación basada en tokens para aplicaciones de una sola página (SPA). Luego, instale y configure Laravel Reverb para obtener capacidades en tiempo real.  Agregue las siguientes variables de entorno de Reverb a su archivo   : .env   REVERB_APP_ID=my-app-id REVERB_APP_KEY=my-app-key REVERB_APP_SECRET=my-app-secret REVERB_HOST="localhost" REVERB_PORT=8080 REVERB_SCHEME=http  Paso 2: Crear la tabla de migración de mensajes de chat  Para almacenar mensajes de chat, cree una migración para una tabla   . Ejecute: chat_messages   php artisan make:migration create_chat_messages_table  Actualice el archivo de migración de la siguiente manera:   Schema::create('chat_messages', function (Blueprint $table) { $table->id(); $table->foreignId('receiver_id'); $table->foreignId('sender_id'); $table->text('text'); $table->timestamps(); });  Ejecute la migración para crear la tabla:   php artisan migrate  Paso 3: Crear el evento MessageSent  Para transmitir mensajes en tiempo real, cree una clase de evento   : MessageSent   php artisan make:event MessageSent  Actualizar la clase de evento:   <?php namespace App\Events; use App\Models\ChatMessage; use Illuminate\Broadcasting\InteractsWithSockets; use Illuminate\Broadcasting\PrivateChannel; use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow; use Illuminate\Foundation\Events\Dispatchable; use Illuminate\Queue\SerializesModels; class MessageSent implements ShouldBroadcastNow { use Dispatchable, InteractsWithSockets, SerializesModels; public function __construct(public ChatMessage $message) { // } public function broadcastOn(): array { return [new PrivateChannel("chat.{$this->message->receiver_id}")]; } }  Paso 4: Definir canales de transmisión  En   , defina el canal de transmisión: channels.php   Broadcast::channel('chat.{id}', function ($user, $id) { return (int) $user->id === (int) $id; });  Paso 5: Definir rutas para obtener y enviar mensajes  Agregue estas rutas para administrar el envío y la recuperación de mensajes de chat:   Route::get('/messages/{user}', function (User $user, Request $request) { return ChatMessage::query() ->where(function ($query) use ($user, $request) { $query->where('sender_id', $request->user()->id) ->where('receiver_id', $user->id); }) ->orWhere(function ($query) use ($user, $request) { $query->where('sender_id', $user->id) ->where('receiver_id', $request->user()->id); }) ->with(['sender', 'receiver']) ->orderBy('id', 'asc') ->get(); })->middleware('auth:sanctum'); Route::post('/messages/{user}', function (User $user, Request $request) { $request->validate(['message' => 'required|string']); $message = ChatMessage::create([ 'sender_id' => $request->user()->id, 'receiver_id' => $user->id, 'text' => $request->message ]); broadcast(new MessageSent($message)); return $message; });  Paso 6: Configurar la reverberación en Nuxt 3  Para permitir que Nuxt 3 se conecte con Reverb, agregue estas variables a su archivo   : .env   NUXT_PUBLIC_REVERB_APP_ID=my-app-id NUXT_PUBLIC_REVERB_APP_KEY=my-app-key NUXT_PUBLIC_REVERB_APP_SECRET=my-app-secret NUXT_PUBLIC_REVERB_HOST="localhost" NUXT_PUBLIC_REVERB_PORT=8080 NUXT_PUBLIC_REVERB_SCHEME=http  Luego, cárguelos en   : nuxt.config.ts   export default defineNuxtConfig({ runtimeConfig: { public: { REVERB_APP_ID: process.env.NUXT_PUBLIC_REVERB_APP_ID, REVERB_APP_KEY: process.env.NUXT_PUBLIC_REVERB_APP_KEY, REVERB_APP_SECRET: process.env.NUXT_PUBLIC_REVERB_APP_SECRET, REVERB_HOST: process.env.NUXT_PUBLIC_REVERB_HOST, REVERB_PORT: process.env.NUXT_PUBLIC_REVERB_PORT, REVERB_SCHEME: process.env.NUXT_PUBLIC_REVERB_SCHEME, }, }, });  Paso 7: Configurar el cliente Laravel Echo en Nuxt 3  Para administrar actualizaciones en tiempo real, cree un complemento   : laravel-echo.client.ts   import Echo from "laravel-echo"; import Pusher, { type ChannelAuthorizationCallback } from "pusher-js"; declare global { interface Window { Echo: Echo; Pusher: typeof Pusher; } } export default defineNuxtPlugin(() => { window.Pusher = Pusher; const config = useRuntimeConfig(); const echo = new Echo({ broadcaster: "reverb", key: config.public.REVERB_APP_KEY, wsHost: config.public.REVERB_HOST, wsPort: config.public.REVERB_PORT ?? 80, wssPort: config.public.REVERB_PORT ?? 443, forceTLS: (config.public.REVERB_SCHEME ?? "https") === "https", enabledTransports: ["ws", "wss"], authorizer: (channel, options) => ({ authorize: (socketId, callback) => { useSanctumFetch("api/broadcasting/auth", { method: "post", body: { socket_id: socketId, channel_name: channel.name }, }) .then(response => callback(null, response)) .catch(error => callback(error, null)); }, }), }); return { provide: { echo } }; });  Paso 8: Crea la interfaz de chat en tiempo real en Nuxt 3  Para habilitar el chat en tiempo real en nuestra aplicación Nuxt 3, creé una nueva página,   , donde los usuarios pueden seleccionar y chatear con otros usuarios. Esta página se conecta a un backend de Laravel para administrar los mensajes de chat y los datos de los usuarios, utilizando Laravel Echo y WebSockets para actualizaciones en tiempo real e indicadores de escritura. chats > [id].vue  A continuación se muestra un desglose de cómo estructuramos esta funcionalidad de chat:  Paso 8.1: Cargar los datos del chat del usuario seleccionado  Primero, recuperamos el   de la URL con el componente   . Este   identifica al usuario con el que estamos chateando y carga los mensajes de usuario y chat necesarios. userID useRoute userID   const route = useRoute(); const userID = route.params.id; const { user: currentUser } = useSanctum<User>(); const { data: user } = await useAsyncData( `user-${userID}`, () => useSanctumFetch<User>(`/api/users/${userID}`) ); const { data: messages } = useAsyncData( `messages-${userID}`, () => useSanctumFetch<ChatMessage[]>(`/api/messages/${userID}`), { default: (): ChatMessage[] => [] } );  Este fragmento utiliza   , un componente personalizado, para cargar mensajes de forma asincrónica cuando se monta la página. useSanctumFetch  Paso 8.2: Visualización de mensajes de chat  Representamos cada mensaje de forma dinámica y les damos estilo en función de si provienen del usuario actual o del participante del chat.   <div ref="messagesContainer" class="p-4 overflow-y-auto max-h-fit"> <div v-for="message in messages" :key="message.id" class="flex items-center mb-2"> <div v-if="message.sender_id === currentUser.id" class="p-2 ml-auto text-white bg-blue-500 rounded-lg"> {{ message.text }} </div> <div v-else class="p-2 mr-auto bg-gray-200 rounded-lg"> {{ message.text }} </div> </div> </div>  La ventana de chat se desplaza automáticamente al último mensaje usando   . nextTick()   watch( messages, () => { nextTick(() => messageContainerScrollToBottom()); }, { deep: true } ); function messageContainerScrollToBottom() { if (!messagesContainer.value) return; messagesContainer.value.scrollTo({ top: messagesContainer.value.scrollHeight, behavior: 'smooth' }); }  Paso 8.3: Envío de mensajes nuevos  Los usuarios pueden enviar mensajes con un campo de entrada. Una vez enviados, se envía una solicitud POST al backend de Laravel.   const newMessage = ref(""); const sendMessage = async () => { if (!newMessage.value.trim()) return; const messageResponse = await useSanctumFetch<ChatMessage>(`/api/messages/${userID}`, { method: "post", body: { message: newMessage.value } }); messages.value.push(messageResponse); newMessage.value = ""; };  Los mensajes se actualizan inmediatamente después de ser enviados.  Paso 8.4: Funciones en tiempo real con Laravel Echo  Laravel Echo escucha eventos clave como   y   . MessageSent typing   onMounted(() => { if (currentUser.value) { $echo.private(`chat.${currentUser.value.id}`) .listen('MessageSent', (response: { message: ChatMessage }) => { messages.value.push(response.message); }) .listenForWhisper("typing", (response: { userID: number }) => { isUserTyping.value = response.userID === user.value?.id; if (isUserTypingTimer.value) clearTimeout(isUserTypingTimer.value); isUserTypingTimer.value = setTimeout(() => { isUserTyping.value = false; }, 1000); }); } });  Esto maneja las actualizaciones de mensajes en tiempo real y los indicadores de escritura, que desaparecen después de un segundo de inactividad.  Paso 8.5: Indicador de escritura  Para mostrar un indicador de escritura, activamos un evento de "escritura" con   . whisper   const sendTypingEvent = () => { if (!user.value || !currentUser.value) return; $echo.private(`chat.${user.value.id}`).whisper("typing", { userID: currentUser.value.id }); };  Este evento se envía cada vez que el usuario escribe y el destinatario ve el indicador de escritura.  Paso 8.6: Interfaz de usuario  La interfaz de chat incluye un encabezado con el nombre del usuario seleccionado y secciones para mensajes y el campo de entrada.   <template> <div> <header v-if="user" class="bg-white shadow"> <div class="px-4 py-6 mx-auto max-w-7xl sm:px-6 lg:px-8"> <h1 class="text-2xl font-bold ">{{ user.name }}</h1> </div> </header> <div class="flex flex-col items-center py-5"> <div class="container w-full h-full p-8 space-y-3 bg-white rounded-xl"> <div v-if="currentUser"> <div class="flex flex-col justify-end h-80"> <div ref="messagesContainer" class="p-4 overflow-y-auto max-h-fit"> <div v-for="message in messages" :key="message.id" class="flex items-center mb-2"> <div v-if="message.sender_id === currentUser.id" class="p-2 ml-auto text-white bg-blue-500 rounded-lg"> {{ message.text }} </div> <div v-else class="p-2 mr-auto bg-gray-200 rounded-lg"> {{ message.text }} </div> </div> </div> </div> <div class="flex-shrink-0"> <span v-if="user && isUserTyping" class="text-gray-500"> {{ user.name }} is typing... </span> <div class="flex items-center justify-between w-full p-4 border-t border-gray-200"> <input type="text" v-model="newMessage" @keydown="sendTypingEvent" @keyup.enter="sendMessage" class="w-full p-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Type a message..." /> <button @click.prevent="sendMessage" class="inline-flex items-center justify-center w-12 h-12 ml-4 text-white bg-blue-500 rounded-lg hover:bg-blue-600"> <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" /> </svg> </button> </div> </div> </div> </div> </div> </div> </template>  Esto completa la configuración de la función de chat en tiempo real usando Laravel Sanctum y Echo con Nuxt 3.  Conclusión  Ahora hemos creado una aplicación de chat segura y en tiempo real utilizando Laravel, Sanctum, Reverb y Nuxt 3. Esta configuración se puede escalar fácilmente para incluir funciones adicionales como reacciones a mensajes o múltiples salas de chat.  Para ver el código completo, visita el   . repositorio de GitHub

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Read My Stories

Este audio es producido en el idioma original de la historia!

Estos son los marcos que necesitas para crear una aplicación de chat en tiempo real

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Telegram: el puente de Crypto Island hacia el continente

Aumente su productividad con estas 18 herramientas para desarrolladores 🚀🔥

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

Navegando por las aguas: desarrollo de aplicaciones RAG de nivel de producción con lagos de datos

Telegram: el puente de Crypto Island hacia el continente

Aumente su productividad con estas 18 herramientas para desarrolladores 🚀🔥

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

Navegando por las aguas: desarrollo de aplicaciones RAG de nivel de producción con lagos de datos

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps