DEV Community

Cover image for 🔌 Como implementar WebSocket com Laravel, Laravel Echo Server e Socket.IO
Luís Paulo Ferreira
Luís Paulo Ferreira

Posted on

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

#php #laravel #websocket #broadcasting

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
Enter fullscreen mode Exit fullscreen mode

2.Instale Redis e os pacotes para broadcasting:

composer require predis/predis
Enter fullscreen mode Exit fullscreen mode

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=''
Enter fullscreen mode Exit fullscreen mode

🐳 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
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

🛠 4. Configurando Laravel Echo Server

No terminal, rode:

laravel-echo-server init
Enter fullscreen mode Exit fullscreen mode

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": "" } }
Enter fullscreen mode Exit fullscreen mode

🔐 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; });
Enter fullscreen mode Exit fullscreen mode

🧠 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
Enter fullscreen mode Exit fullscreen mode
  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; } }
Enter fullscreen mode Exit fullscreen mode

🖥 6. Configurando o Frontend

  1. Instale os pacotes necessários: 
npm install --save laravel-echo socket.io-client
Enter fullscreen mode Exit fullscreen mode
  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', });
Enter fullscreen mode Exit fullscreen mode

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

<!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>
Enter fullscreen mode Exit fullscreen mode

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!'));
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:

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!

Top comments (0)