Tecnologias usadas: Laravel 11, Laravel Echo Server, Redis, Socket.IO, Laravel Echo (frontend)

📦 1. Requisitos

Antes de começar, certifique-se de que você tem:

  • Laravel instalado (ex: laravel new websockets-demo)

  • Node.js e npm instalados

  • Redis instalado e em execução (local ou Docker)

  • PHP + Extensão phpredis ou predis configurado no Laravel

⚙️ 2. Instalando dependências

Laravel (backend)

1.Instale o Laravel Echo Server globalmente:

npm install -g laravel-echo-server

2.Instale Redis e os pacotes para broadcasting:

composer require predis/predis

3.Configure o .env do Laravel para usar Redis:

BROADCAST_DRIVER=redis
CACHE_DRIVER=redis
QUEUE_CONNECTION=sync
SESSION_DRIVER=redis

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379
REDIS_PREFIX=''

🐳 3. Instalando o Redis com Docker

Se você não quiser instalar o Redis diretamente na sua máquina, pode rodá-lo com Docker facilmente:

1. Suba o Redis com um comando: 

docker run -d --name redis \
  -p 6379:6379 \
  redis:alpine
  • Baixar a imagem redis:alpine (mais leve)
  • Rodar o Redis em background (-d)
  • Disponibilizar na porta padrão 6379

2. Teste se o Redis está rodando: 

docker exec -it redis redis-cli ping
> PONG

🛠 4. Configurando Laravel Echo Server

No terminal, rode:

laravel-echo-server init

Preencha conforme abaixo:

appId: yourAppId

key: yourAppKey

host: localhost

port: 6001

redis: yes

auth endpoint: /broadcasting/auth

Você verá o arquivo laravel-echo-server.json com algo assim:

{
    "authHost": "http://127.0.0.1",
    "authEndpoint": "/broadcasting/auth",
    "clients": [
        {
            "appId": "f69ac286d57300e7",
            "key": "530b4d1ae1b137acd2ffaff8b3171bc7"
        }
    ],
    "database": "redis",
    "databaseConfig": {
        "redis": {
            "port": "6379",
            "host": "127.0.0.1",
            "keyPrefix": ""
        },
        "sqlite": {
            "databasePath": "/database/laravel-echo-server.sqlite"
    }
    },
    "devMode": true,
    "host": null,
    "port": "6001",
    "protocol": "http",
    "socketio": {},
    "secureOptions": 67108864,
    "sslCertPath": "",
    "sslKeyPath": "",
    "sslCertChainPath": "",
    "sslPassphrase": "",
    "subscribers": {
        "http": true,
        "redis": true
    },
    "apiOriginAllow": {
        "allowCors": false,
        "allowOrigin": "",
        "allowMethods": "",
        "allowHeaders": ""
    }
}

🔐 5. Habilitando autenticação de canais privados

Em routes/channels.php, adicione a rota para o channel:

//estamos criando um canal 'notification'
Broadcast::channel('notification.{id}', function ($user, $id) {
    return true;//(int) $user->id=== (int) $id;
});

🧠 6. Criando um evento para transmissão

Para transmitir as mensagens para o serviço de websocket, criamos um novo contrato Illuminate\Contracts\Broadcasting\ShouldBroadcast.

  1. Criando o Event 
php artisan make:event PrivateDispatchMessage
  1. Abra o arquivo app/Events/PrivateDispatchMessage.php e altere para: 
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Queue\SerializesModels;
use App\Models\User;

class PrivateDispatchMessage implements ShouldBroadcast
{
    use InteractsWithSockets, SerializesModels;

    public $message;
    public $user;

    public function __construct(User $user, string $message)
    {
        $this->message = $message;
        $this->user = $use;
    }

    public function broadcastOn(): PrivateChannel
    {
        //rota criada anteriormente
        return new PrivateChannel('notification.' . $this->user->id);
    }

    public function broadcastAs():string
    {
        return 'notification.private';
    }

    public function broadcastWith():string
    {
        return $this->data;
    }
}

🖥 6. Configurando o Frontend

  1. Instale os pacotes necessários: 
npm install --save laravel-echo socket.io-client
  1. Configurar o Echo para ouvir o websocket
  • No arquivo resources/js/bootstrap.js, adicione o seguinte conteúdo 
import Echo from 'laravel-echo';
window.io = require('socket.io-client');

window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: window.location.hostname + ':6001',
});

Esse script deve ser global e estar disponível em toda aplicação mix('/js/app.js').

▶️ 7. Rodando tudo

  1. Inicie o servidor php php artisan serve
  2. Inicie o echo-server em um prompt novo laravel-echo-server start

Crie um arquivo notification.blade.php e adicione o script no conteúdo

Notificações em Tempo Real
    


    Notificações em tempo real
    Aguardando notificações via WebSocket...

    
    
        const USER_ID = {{ auth()->id() ?? 1 }};

        if (USER_ID) {
            window.Echo.private(`notification.${USER_ID}`)
                .listen('.notification.private', (data) => {
                    const message = data?.message || "Tarefa processada com sucesso!";

                    }
                });
        }

    





    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  Testando
Crie uma rota que chame o arquivo notification.blade.php, acesse pelo http://localhost:8000/listern-notificationDispare um evento manualmente com Tinker:

php artisan tinker
event(new \App\Events\PrivateDispatchMessage (App\Models\User::find(1), 'Olá mundo via WebSocket!'));



    Enter fullscreen mode
    


    Exit fullscreen mode
    





Note que precisamos de um usuário App\Models\User::find(1) para o evento.

  
  
  ✅ Conclusão
E pronto! Agora você tem WebSocket em tempo real funcionando com Laravel, Echo Server e Socket.IO. Esse setup é poderoso para:ChatsNotificações em tempo realDashboards interativosSistemas colaborativosSe curtiu o conteúdo, deixe um ❤️ ou salve este post. Comentários e dúvidas são super bem-vindos!