Cómo crear una aplicación de chat en tiempo real con Laravel Reverb

Reverb es un paquete independiente de código abierto que es un servidor WebSocket propio para aplicaciones Laravel. Ayuda a facilitar la comunicación en tiempo real entre el cliente y el servidor.

Antes de este nuevo paquete, Laravel tenía transmisión de eventos, pero básicamente no tenía una forma integrada de configurar un servidor WebSocket autohospedado. Afortunadamente, Reverb ahora nos da esa opción.

Laravel Reverb tiene algunas características clave: está escrito en PHP, es rápido y escalable. Fue desarrollado en particular para ser escalable horizontalmente.

Básicamente, Reverb te permite ejecutar una aplicación en un solo servidor, pero si la aplicación comienza a superar ese servidor, puedes agregar varios servidores adicionales. Luego, todos esos servidores pueden comunicarse entre sí para distribuir los mensajes entre ellos.

En este artículo aprenderá cómo crear una aplicación de chat en tiempo real utilizando Laravel Reverb. Esto le permitirá implementar fácilmente comunicaciones WebSocket entre su backend y su frontend.

Para una tecnología frontend, puedes usar lo que quieras, pero en este caso usaremos React.js con la herramienta de compilación Vite.js.

Al final de este artículo, tendrá una aplicación completa en tiempo real en su máquina local, que funcionará así:

Cómo instalar Laravel

Para comenzar, instale Laravel 11 usando el comando del compositor:

composer create-project laravel/laravel:^11.0 laravel-reverb-react-chat && cd laravel-reverb-react-chat/

En este punto, puedes comprobar la aplicación ejecutando el comando de servicio:

php artisan serve

Cómo crear el modelo y la migración

Puede generar un modelo y una migración para los mensajes usando este único comando:

php artisan make:model -m Message

Luego necesitarás configurar el modelo del Mensaje con el siguiente código:

app/Models/Message.php

<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\BelongsTo;
class Message extends Model
{
   use HasFactory;
   public $table = 'messages';
   protected $fillable = ['id', 'user_id', 'text'];
   public function user(): BelongsTo {
       return $this->belongsTo(User::class, 'user_id');
   }
   public function getTimeAttribute(): string {
       return date(
           "d M Y, H:i:s",
           strtotime($this->attributes['created_at'])
       );
   }
}

Como puede ver, hay un descriptor de acceso getTimeAttribute() que formateará la marca de tiempo de creación del mensaje en un formato de fecha y hora legible por humanos. Lo mostrará en la parte superior de cada mensaje en el cuadro de chat.

A continuación, configure la migración de la tabla de la base de datos de mensajes con este código:

<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
   public function up(): void {
       Schema::create('messages', function (Blueprint $table) {
           $table->id();
           $table->foreignId('user_id')->constrained();
           $table->text('text')->nullable();
           $table->timestamps();
       });
   }
   public function down(): void {
       Schema::dropIfExists('messages');
   }
};

Esta migración crea una tabla de mensajes en la base de datos. La tabla contiene columnas para una clave primaria de incremento automático (id), una clave externa (user_id) que hace referencia a la columna de id de la tabla de usuarios, una columna de texto para almacenar el contenido del mensaje y marcas de tiempo para rastrear automáticamente los tiempos de creación y modificación de cada registro.

La migración también incluye un método de reversión (down()) para eliminar la tabla de mensajes si es necesario.

En este artículo, usaremos la base de datos MySQL, pero puedes usar SQLite como base de datos predeterminada si lo prefieres. Solo asegúrese de configurar correctamente las credenciales de su base de datos en el archivo .env:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database_name
DB_USERNAME=username
DB_PASSWORD=password

Cómo configurar las rutas

En esta aplicación de chat en tiempo real, necesitarás tener algunas rutas:

home para la página de inicio (ya debería estar agregada)
mensaje para agregar un nuevo mensaje
mensajes para obtener todos los mensajes existentes

Tendrás este tipo de rutas en el archivo web.php:

<?php
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\HomeController;
Route::get('/', function () { return view('welcome'); });
Auth::routes();
Route::get('/home', [HomeController::class, 'index'])
   ->name('home');
Route::get('/messages', [HomeController::class, 'messages'])
   ->name('messages');
Route::post('/message', [HomeController::class, 'message'])
   ->name('message');

Artículo original:

https://www.freecodecamp.org/news/laravel-reverb-realtime-chat-app/

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz En Udemy