Visão Geral da Integração

Este tutorial demonstra como configurar o Laravel Echo com o Reverb para estabelecer comunicação WebSocket em aplicações Laravel. O Reverb atua como driver de transmissão local, eliminando dependência de serviços externos como Pusher ou Ably.

Vantagens do Reverb como Driver de Transmissão

• Autossuficiência: Executa diretamente no servidor Laravel sem necessidade de contas de terceiros
• Desempenho Otimizado: Protocolo WebSocket customizado oferece latência reduzida
• Integração Nativa: Suporte nativo a autenticação de canais e criptografia de eventos

Instalação do Pacote Necessário

Execute o seguinte comando para instalar as dependências frontend:

npm install laravel-echo @reverb-js/client

Configuração do Cleinte Echo

No arquivo de inicialização da aplicação JavaScript, configure a instância do Echo para utilizar o Reverb:

import Echo from 'laravel-echo';
import { ReverbClient } from '@reverb-js/client';

const configReverb = new ReverbClient({
  appKey: import.meta.env.VITE_REVERB_APP_KEY,
  host: import.meta.env.VITE_REVERB_HOST || 'localhost',
  port: Number(import.meta.env.VITE_REVERB_PORT) || 8080,
  tlsEnabled: import.meta.env.VITE_REVERB_SCHEME === 'https',
});

window.Echo = new Echo({
  broadcaster: 'reverb',
  connection: configReverb,
});

Subscrição de Canais e Tratamento de Eventos

Exemplo de escuta em canal público para eveentos de atualização:

window.Echo.channel('system-updates')
  .listen('.StatusChanged', (payload) => {
    console.log('Alteração de status:', payload);
    updateInterface(payload);
  });

Arquitetura dos Canais

O Laravel Echo suporta múltiplos tipos de canais para diferentes cenários:

• Canais Públicos: Transmissão aberta sem verificação de identidade
• Canais Privados: Requerem autenticação do usuário através do middleware Laravel Sanctum
• Canais de Presença: Gerenciam listas de usuários conectados com eventos de entrada/saída

Formatação de Eventos

O sistema transforma automaticamente nomes de eventos do backend para camelCase no frontend. Por exemplo, um evento chamado user.registered pode ser ouvido como .UserRegistered no cliente.

Solução de Problemas Comuns

Falhas na Conexão WebSocket

1. Verifique se o servidor Reverb está em execução com php artisan reverb:start
2. Confirme as variáveis de ambiente do frontend correspondem à configuração do backend
3. Teste a conectividade na porta especificada usando ferramentas de diagnóstico de rede

Atrasos na Entrega de Eventos

• Alternar entre protocolos ws e wss conforme a infraestrutura de rede
• Monitorar o uso de recursos do servidor durante picos de tráfego
• Implementar compressão de payloads para eventos com dados extensos