🚀 Tutorial 2: Configuração do WebSocket/Laravel Echo Server - UNIT3D

📋 Visão Geral

Este tutorial complementa o Tutorial 1 e foca na configuração do sistema de WebSocket para o chat em tempo real do UNIT3D. O Laravel Echo Server é necessário para gerenciar as conexões WebSocket e permitir comunicação em tempo real.

🎯 Pré-requisitos

• UNIT3D instalado e funcionando (ver Tutorial 1)
• Redis configurado e ativo
• Nginx corretamente configurado
• Node.js e npm instalados

🔧 Passo a Passo

1. Instalação do Laravel Echo Server

cd /caminho/para/seu/projeto
npm install laravel-echo-server --save-dev

Verifique se foi instalado corretamente:

ls -la node_modules/.bin/laravel-echo-server

2. Configuração do Laravel Echo Server

Crie o arquivo de configuração:

nano laravel-echo-server.json

Exemplo de conteúdo:

{
  "authHost": "https://seudominio.com:8443",
  "authEndpoint": "/broadcasting/auth",
  "clients": [
    {
      "appId": "app-id-aqui",
      "key": "chave-secreta-aqui"
    }
  ],
  "database": "redis",
  "databaseConfig": {
    "redis": {
      "host": "127.0.0.1",
      "port": "6379"
    }
  },
  "devMode": false,
  "host": "0.0.0.0",
  "port": "6001",
  "protocol": "http",
  "socketio": {},
  "subscribers": {
    "http": true,
    "redis": true
  },
  "apiOriginAllow": {
    "allowCors": false,
    "allowOrigin": "",
    "allowMethods": "",
    "allowHeaders": ""
  }
}

Defina as permissões:

chmod 644 laravel-echo-server.json
chown usuario:usuario laravel-echo-server.json

3. Configurar o Serviço Systemd

Crie o serviço:

sudo nano /etc/systemd/system/laravel-echo-server.service

Conteúdo:

[Unit]
Description=Laravel Echo Server
After=network.target

[Service]
Type=simple
User=usuario
Group=usuario
WorkingDirectory=/caminho/para/seu/projeto
ExecStart=/caminho/para/seu/projeto/node_modules/.bin/laravel-echo-server start --config=/caminho/para/seu/projeto/laravel-echo-server.json
Restart=always
RestartSec=10

[Install]
WantedBy=multi-user.target

Ative e inicie:

sudo systemctl daemon-reload
sudo systemctl enable laravel-echo-server
sudo systemctl start laravel-echo-server
sudo systemctl status laravel-echo-server

4. Configuração do Nginx (Proxy WebSocket)

Edite o vhost do seu domínio:

sudo nano /etc/nginx/sites-available/seu-dominio.com

Adicione dentro do bloco server:

location /socket.io/ {
    proxy_pass http://127.0.0.1:6001;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_cache_bypass $http_upgrade;
    proxy_read_timeout 86400;
    proxy_send_timeout 86400;
}

Recarregue o Nginx:

sudo nginx -t
sudo systemctl reload nginx

5. Variáveis de Ambiente no .env

Abra o .env:

nano .env

Atualize as variáveis:

VITE_ECHO_ADDRESS=https://seudominio.com
VITE_ECHO_PORT=8443
VITE_ECHO_PROTOCOL=https
BROADCAST_CONNECTION=redis

6. Atualizar Política de Segurança (CSP)

Abra:

nano config/secure-headers.php

Atualize connect-src:

'connect-src' => [
    'self' => true,
    'allow' => [
        'https://seudominio.com:8443/socket.io/',
        'wss://seudominio.com:8443/socket.io/',
        'https://api.themoviedb.org/',
    ],
],

Remova diretivas não suportadas:

• 'ambient-light-sensor'
• 'battery'
• 'document-domain'
• 'execution-while-not-rendered'
• 'execution-while-out-of-viewport'
• 'navigation-override'

7. Limpar Cache e Recompilar

php artisan config:clear
php artisan cache:clear
php artisan view:clear
php artisan route:clear
npm run build

8. Testar WebSocket

Verificar serviços:

sudo systemctl status laravel-echo-server
netstat -tlnp | grep 6001
redis-cli ping

Testar conexão:

curl -I http://127.0.0.1:6001
curl -I https://seudominio.com/socket.io/

Ver logs:

sudo journalctl -u laravel-echo-server -f
sudo tail -f /caminho/para/logs/nginx/error.log

9. Diagnóstico e Solução de Problemas

Erros comuns:

• Config file inválido: verifique permissões e sintaxe.
• SSL_do_handshake: use http no proxy_pass e "protocol": "http".
• Connection refused: verifique se o Echo Server está ativo e a porta liberada.
• CSP violation: atualize secure-headers.php e limpe cache do navegador.

✅ Finalização

Se tudo estiver correto, seu sistema UNIT3D agora suporta:

• Chat em tempo real
• Notificações em tempo real
• Comunicação cliente-servidor via WebSocket

O Echo Server estará sempre ativo via systemd.