Laravel & Vue: Notificaciones en Tiempo Real usando Reverb, Redis y TDD - 01

Capítulo 1: Introducción y Configuración de Reverb y Redis en el Entorno Laravel

Objetivo

Configurar Reverb en un proyecto Laravel para habilitar notificaciones en tiempo real, integrando Redis como sistema de almacenamiento en caché y validando un modelo básico de notificaciones mediante TDD (Desarrollo Guiado por Pruebas).

Introducción

Reverb es una solución nativa de Laravel para transmisión en tiempo real que simplifica el uso de WebSockets sin depender de terceros. Combinado con Redis, permite manejar notificaciones de manera eficiente. Este capítulo establece las bases del sistema, siguiendo el ciclo de rojo → verde → refactor del TDD.

Configuración Inicial

Crear el Proyecto Laravel

1. Genera un proyecto Laravel:

composer create-project laravel/laravel shipping-notifications
cd shipping-notifications

2. Instala Sail para entornos Dockerizados:

composer require laravel/sail --dev
php artisan sail:install
./vendor/bin/sail up -d

3. Verifica que Laravel esté funcionando accediendo a http://localhost.

Instalación y Configuración de Reverb

Añadir Reverb

1. Instala Reverb en tu proyecto:

./vendor/bin/sail artisan install:broadcasting

2. Durante la instalación:

• Selecciona Reverb como driver.
• Configura localhost como host, 8080 como puerto y http como esquema.

3. Modifica tu archivo .env con estos valores:

BROADCAST_CONNECTION=reverb
QUEUE_CONNECTION=redis

Los variables de reverb en el .env las define de forma autmática la implementación, veras algo similar a esto:

REVERB_APP_ID=155758
REVERB_APP_KEY=0h6i5q1g0ymdolgci5mt
REVERB_APP_SECRET=d9rqhmvvjyaxp4kakgj9
REVERB_HOST="localhost"
REVERB_PORT=8080
REVERB_SCHEME=http

Configuración de Redis

1. Verifica la conexión de Redis en el archivo .env:

CACHE_STORE=redis
QUEUE_CONNECTION=redis
REDIS_HOST=redis
REDIS_PORT=6379

2. Prueba Redis con Tinker:

./vendor/bin/sail artisan tinker

Dentro de Tinker:

Cache::put('key', 'value', 10);
Cache::get('key'); // Devuelve 'value'

Configuración de Pruebas

Modifica el archivo phpunit.xml para usar una base de datos SQLite en memoria durante las pruebas:

<php>
    <env name="DB_CONNECTION" value="sqlite"/>
    <env name="DB_DATABASE" value=":memory:"/>
</php>

Implementación del Modelo de Notificaciones

1. Genera el modelo con su migración:

./vendor/bin/sail artisan make:model Notification -m

2. Define la estructura de la tabla en la migración:

Schema::create('notifications', function (Blueprint $table) {
	$table->id();
	$table->foreignId('user_id')->constrained()->cascadeOnDelete();
	$table->string('status');
	$table->timestamps();
});

3. Ejecuta las migraciones:

./vendor/bin/sail artisan migrate

Desarrollo Guiado por Pruebas (TDD)

Escribir el Test Inicial

Crea un test en tests/Feature/NotificationTest.php:

namespace Tests\Feature;

use App\Models\Notification;
use App\Models\User;
use Illuminate\Foundation\Testing\RefreshDatabase;
use Tests\TestCase;

class NotificationTest extends TestCase
{
    use RefreshDatabase;

    public function test_it_creates_a_notification()
    {
        // Given
        $user = User::factory()->create();
        $data = [
            'user_id' => $user->id,
            'status' => 'Enviado',
        ];

        // When
        Notification::create($data);

        // Then
        $this->assertDatabaseHas('notifications', $data);
    }
}

Detalles del Test

• GIVEN (Dado): Configuramos el entorno necesario para la prueba, creando un usuario y definiendo los datos de la notificación.
• WHEN (Cuando): Ejecutamos la acción a probar, en este caso, creamos una notificación.
• THEN (Entonces): Verificamos que los datos se hayan guardado correctamente en la base de datos usando assertDatabaseHas.

Ejecución del Ciclo Rojo → Verde → Refactor

1. Rojo (Red): Ejecuta el test inicial:

./vendor/bin/sail artisan test

Fallará porque aún no hemos implementado el modelo.

2. Verde (Green): Implementa el modelo en app/Models/Notification.php:

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Notification extends Model
{
	use HasFactory;

	protected $fillable = ['user_id', 'status'];
}

Corre el test nuevamente. Ahora debería pasar:

./vendor/bin/sail artisan test

3. Refactor: Revisa el código y refactoriza si es necesario. Por ejemplo, puedes asegurarte de que los datos se validen en el controlador en futuras etapas.

Tip: Crear un Alias para el comando sail

Para facilitar el uso de ./vendor/bin/sail, puedes crear un alias de la siguiente manera:

Para Bash

Añade esta línea al archivo ~/.bashrc:

alias sail='./vendor/bin/sail'

Luego, recarga el archivo de configuración con:

source ~/.bashrc

Para Zsh

Añade esta línea al archivo ~/.zshrc:

alias sail='./vendor/bin/sail'

Luego, recarga el archivo de configuración con:

source ~/.zshrc

Con esto, puedes usar el comando sail en lugar de ./vendor/bin/sail.

Conclusión

En este capítulo, configuramos Reverb y Redis, definimos un modelo básico de notificaciones y validamos su funcionamiento mediante TDD. El próximo capítulo se centrará en transmitir notificaciones en tiempo real a través de Reverb.

¡Sigue adelante! 🚀