Com a evolução das aplicações web modernas, oferecer atualizações em tempo real se tornou essencial para melhorar a experiência do usuário. Seja em notificações, chats, sistemas de monitoramento ou dashboards, a comunicação instantânea é hoje um diferencial competitivo. Nesse contexto, o uso de WebSockets dentro do Laravel permite que os desenvolvedores entreguem funcionalidades em tempo real de maneira eficiente e elegante.
Este guia completo vai te mostrar como implementar WebSockets no Laravel, utilizando o pacote Laravel WebSockets, de forma prática e sem complicações. Vamos do zero até a emissão e recebimento de eventos em tempo real!
O que são WebSockets e por que usá-los?
Antes de colocar a mão na massa, é importante entender o que são WebSockets.
WebSockets são uma tecnologia que possibilita a comunicação bidirecional entre o cliente e o servidor através de uma única conexão TCP persistente. Diferente do modelo tradicional HTTP, que é baseado em requisições/respostas, os WebSockets permitem que o servidor envie dados para o cliente assim que uma atualização acontece, sem a necessidade de novas requisições.
Principais benefícios:
- Tempo real verdadeiro: Atualizações imediatas.
- Menos consumo de banda: Reduz o tráfego comparado ao polling.
- Experiência de usuário aprimorada: Menos latência e interações mais fluídas.
Preparando o ambiente no Laravel
Requisitos de sistema e pacotes necessários
Antes de começarmos, certifique-se de ter:
- Laravel 8 ou superior
- Composer instalado
- Node.js e NPM para lidar com o front-end (Laravel Echo)
- Redis instalado (opcional, mas recomendado para maior desempenho em broadcasting)
Além disso, vamos utilizar o pacote oficial Laravel WebSockets desenvolvido pela Beyond Code.
Instalando o Laravel WebSockets package
Dentro do seu projeto Laravel, rode o comando:
composer require beyondcode/laravel-websocketsApós a instalação, publique as configurações padrão:
php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="config"E também as migrations:
php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="migrations"
php artisan migrateIsso cria a tabela necessária para monitorar conexões ativas.
Configurando o servidor WebSocket
Ajustando o websockets.php e broadcasting.php
No arquivo config/websockets.php, você pode ajustar detalhes como apps, dashboard e configuração de SSL se necessário.
No config/broadcasting.php, atualize o driver padrão para pusher, mesmo que esteja usando WebSockets locais:
'connections' => [
'pusher' => [
'driver' => 'pusher',
'key' => env('PUSHER_APP_KEY'),
'secret' => env('PUSHER_APP_SECRET'),
'app_id' => env('PUSHER_APP_ID'),
'options' => [
'cluster' => env('PUSHER_APP_CLUSTER'),
'useTLS' => false,
'host' => '127.0.0.1',
'port' => 6001,
'scheme' => 'http',
],
],
],Configure também as variáveis no seu .env:
BROADCAST_DRIVER=pusher
PUSHER_APP_ID=local
PUSHER_APP_KEY=local
PUSHER_APP_SECRET=local
PUSHER_APP_CLUSTER=mt1Executando o servidor localmente
Para rodar o servidor WebSocket localmente:
php artisan websockets:servePronto! O seu servidor WebSocket já estará rodando na porta 6001.
Criando eventos e escutando em tempo real
Definindo eventos de broadcast
Vamos criar um evento de broadcast:
php artisan make:event NewMessageNo evento NewMessage.php, ajuste para implementar a interface ShouldBroadcast:
use Illuminate\Broadcasting\Channel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
class NewMessage implements ShouldBroadcast
{
public $message;
public function __construct($message)
{
$this->message = $message;
}
public function broadcastOn()
{
return new Channel('chat');
}
}Isso permitirá que o evento seja enviado para todos os clientes conectados ao canal chat.
Front-end: Integrando com Laravel Echo
No front-end, instale o Laravel Echo e Pusher-js:
npm install --save laravel-echo pusher-jsEm seu JavaScript, configure o Echo:
import Echo from "laravel-echo";
window.Pusher = require('pusher-js');
window.Echo = new Echo({
broadcaster: 'pusher',
key: 'local',
wsHost: window.location.hostname,
wsPort: 6001,
forceTLS: false,
disableStats: true,
});
window.Echo.channel('chat')
.listen('NewMessage', (e) => {
console.log('Nova mensagem:', e.message);
});Assim, toda vez que o evento NewMessage for disparado no back-end, os clientes receberão a mensagem em tempo real!
Dicas de segurança e boas práticas
Autenticação de canais privados
Se seu app exige que apenas usuários autenticados possam ouvir certos eventos, use canais privados e configure políticas no arquivo routes/channels.php:
Broadcast::channel('chat', function ($user) {
return Auth::check();
});Assim, apenas usuários autenticados conseguirão escutar o canal.
Gerenciamento de conexões
Sempre monitore e limite a quantidade de conexões abertas simultaneamente para evitar sobrecarga no servidor. Use o painel do Laravel WebSockets acessando /laravel-websockets no navegador.
Conclusão
Implementar WebSockets no Laravel não é complicado, e os ganhos para aplicações modernas são enormes. Com WebSockets, é possível criar experiências dinâmicas, intuitivas e altamente responsivas para os usuários.
Ao seguir este passo a passo, você configurará um sistema eficiente de comunicação em tempo real sem precisar de serviços pagos como Pusher. Além disso, terá controle total sobre seu servidor e poderá escalar de acordo com a necessidade do seu projeto.
Então, que tal começar agora mesmo a transformar sua aplicação Laravel em um app de verdade em tempo real?
🔥 Construa seus projetos com a melhor infraestrutura e ainda apoie o DevsBrasil!
Na Hostinger, você encontra hospedagem rápida, segura e com suporte top de linha — ideal para desenvolvedores e empreendedores digitais.
💡 Use o nosso link exclusivo do DevsBrasil e garanta:
✅ Descontos especiais nos planos de hospedagem, e-mail profissional, VPS e criador de sites com IA
✅ Ferramentas otimizadas para performance, com ótimo custo-benefício
✅ Apoio direto à nossa comunidade e ao nosso conteúdo gratuito 💚
👉 Acesse agora com nosso link exclusivo e aproveite os benefícios!
