🔌 Como implementar WebSocket com Laravel, Laravel Echo Server e Socket.IO

Luís Paulo Ferreira — Tue, 22 Apr 2025 18:05:27 +0000

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.

Criando o Event

php artisan make:event PrivateDispatchMessage

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

Instale os pacotes necessários:

npm install --save laravel-echo socket.io-client

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

Inicie o servidor php php artisan serve
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

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Notificações em Tempo Real</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body>
    <h1>Notificações em tempo real</h1>
    <p>Aguardando notificações via WebSocket...</p>

    <script src="{{ mix('/js/app.js') }}"></script>
    <script>
        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!";

                    }
                });
        }

    </script>
</body>
</html>

Testando

Crie uma rota que chame o arquivo notification.blade.php, acesse pelo http://localhost:8000/listern-notification

Dispare um evento manualmente com Tinker:

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

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:

Chats

Notificações em tempo real

Dashboards interativos

Sistemas colaborativos

Se curtiu o conteúdo, deixe um ❤️ ou salve este post. Comentários e dúvidas são super bem-vindos!

DEV Community: Luís Paulo Ferreira