http://creeptech.com.br/tags/websocket/Recent content in WebSocket on Creep.techHugopt-brWed, 20 May 2026 00:00:00 +0000http://creeptech.com.br/projects/neon-grid-dashboard/Wed, 20 May 2026 00:00:00 +0000http://creeptech.com.br/projects/neon-grid-dashboard/<h2 id="-cat-resumotxt"><code>&gt; cat resumo.txt</code></h2> <p><strong>NeonGrid</strong> é um dashboard de monitoramento em tempo real que coleta métricas de múltiplos serviços e as exibe em uma interface estilizada de sala de controle. Pensado para times de plantão que precisam enxergar o estado do sistema num piscar de olhos.</p> <h2 id="-stackjson"><code>&gt; stack.json</code></h2> <ul> <li><strong>Back-end:</strong> Go com goroutines para coleta concorrente de métricas</li> <li><strong>Transporte:</strong> WebSockets para streaming sub-segundo</li> <li><strong>Front-end:</strong> TypeScript + Canvas para os gráficos animados</li> <li><strong>Infra:</strong> Docker Compose, Prometheus como fonte de dados</li> </ul> <h2 id="-features"><code>&gt; features[]</code></h2> <ol> <li>Streaming de métricas com latência abaixo de 200ms</li> <li>Alertas visuais com efeito de glitch quando um limite é ultrapassado</li> <li>Tema escuro neon de alto contraste, legível em ambientes 24/7</li> <li>Histórico de 24h armazenado em memória com snapshot periódico</li> </ol> <h2 id="-aprendizados"><code>&gt; aprendizados</code></h2> <p>O maior desafio foi manter o front-end fluido com centenas de pontos chegando por segundo. A solução foi agrupar atualizações em <em>frames</em> e desenhar tudo no <code>requestAnimationFrame</code>, evitando reflows do DOM.</p>