WebSocket com Spring Boot e Stomp: Como criar um chat em tempo real de verdade
Aprenda como funciona (de verdade) a comunicação em tempo real: da teoria ao código, aplicando Spring Boot, WebSocket, Stomp e integração com front-end moderno.
Por que isso é importante
As pessoas estão exaustas de páginas lentas e chats que travam. Sistemas modernos precisam conversar em tempo real, sem sobrecarregar o servidor e sem “reinventar a roda” com milhares de requisições HTTP. Neste artigo/vídeo especial, você vai entender o que separa um chat em tempo real profissional de um “puxadinho” usando polling. É hora de saber como WebSocket e Stomp com Spring Boot tornam elegante, confiável e performática qualquer comunicação instantânea – segredo usado em sistemas financeiros, bancos digitais, apps de mensagem, trading e muito mais.
Pare de perguntar: como funciona o real-time de verdade?
WebSocket é o protocolo padrão para comunicação instantânea – só que pouca gente entende a diferença entre ele e o clássico HTTP. WebSocket deixa o canal “sempre aberto”, pronto para servidor e client trocarem dados a qualquer momento, sem ficar "atrasando" com requisições repetidas.
⚠️Atenção
Se você já usou setInterval para buscar mensagens no backend, está gastando recursos sem necessidade. O WebSocket muda esse jogo!
O que é e para que serve o WebSocket?
WebSocket é um protocolo ultraleve para manter uma conexão aberta entre navegador e back-end. Assim, servidor pode “empurrar” dados para o front no exato instante em que recebe (pense: chats, dashboards, sistemas de alerta).
ℹ️Dica técnica
Com WebSocket, você reduz drasticamente o tráfego de rede e elimina delays de “polling” tradicional. Ideal para apps que demandam velocidade.
Stomp: o segredo da mensageria com Spring
Stomp (Simple Text Oriented Messaging Protocol) é um protocolo que roda sobre WebSocket e padroniza a troca de mensagens. Ele define comandos claros – como send, subscribe, message – facilitando gerenciamento do fluxo e destinos pelo Spring Boot.
⚠️Atenção
Não tente trabalhar direto com frames binários do WebSocket: Stomp torna o tráfego JSON simples e legível, perfeito para integrações modernas.
Broker de Mensagens: o intermediário invisível
No Spring Boot, temos o ‘broker’, que roteia tudo o que chega pelos canais WebSocket. Ele identifica o destino (por exemplo, /topic ou /queue) e garante que só quem assina determinado canal recebe as mensagens – evitando ruído e mantendo foco.
ℹ️Info rápido
/topic permite envio para múltiplos clientes simultaneamente; /queue foca em comunicação “privada” entre client e client, sem abrir para todos.
Spring Boot: ativando WebSocket e Stomp na prática
Com poucas anotações (@Configuration + @EnableWebSocketMessageBroker), você ativa instantaneamente todo o suporte WebSocket/Stomp no Spring. Um único endpoint (/ws) permite o handshake, com controle automático de origens e segurança.
⚠️Atenção ao detalhe
Não esqueça o “setAllowedOrigins” para liberar os domínios que podem conectar no seu chat – evitará bugs chatos de CORS.
App, Topic e Queue: domando o fluxo de mensagens
O prefixo /app define tudo o que chega do front para o servidor (e dispara métodos com @MessageMapping). /topic e /queue comandam a saída – cada um para seu tipo de mensagem: broadcast ou privada.
ℹ️Insight de arquitetura
É exatamente como dividir endereços de entrega: o Spring trata “/app” como entrada de pedidos; “/topic” e “/queue” como rotas de saída do correio.
Modelando o dado: o objeto das mensagens
Seu chat transmite objetos JSON elegantes – contendo conteúdo, remetente, timestamp. O modelo (tipicamente ChatMessage) é serializado e deserializado automaticamente do back-end ao front-end sem esforço extra.
Controller: ponto de entrada do chat real
O Spring Boot recebe mensagens via métodos com @MessageMapping, quase igual ao clássico @PostMapping. Eles processam, enriquecem, e devolvem para os destinos definidos, entregando instantaneamente para todos os conectados!
❌Evite erro comum
Não use @RestController nem @PostMapping para WebSocket: aqui o fluxo é assíncrono e disparado a qualquer segundo.
Bibliotecas do front-end: Socket.js e Stomp.js
Para integrar com o navegador, usamos o combo Socket.js (faz handshake e fallback seguro) + Stomp.js (implementa o protocolo Stomp na web). O Stomp.js gerencia assinar tópicos e enviar mensagens, mantendo tudo sincronizado.
⚠️Atenção a versões
Use sempre versões alinhadas de stomp.js e socket.js, ou o handshake pode falhar sem explicação no browser!
Fluxo resumido completo: como a mágica acontece
1. Front conecta no endpoint /ws via socket.js, 2. Stomp.js ativa o protocolo e assina um tópico (por exemplo, /topic/chat/sala), 3. Mensagens do front vão para /app/chat.send/{sala} e Spring distribui a todos da sala via /topic/chat/{sala}, 4. Broker cuida do broadcast, ninguém fica de fora.
Cuidados com CORS, origens permitidas e portabilidade
O chat local precisa de atenção extra para os endpoints corretos (localhost, portas, origens). No deployment, configure corretamente com setAllowedOrigins e ajuste URLs nos arquivos HTML de front-end.
⚠️Atenção final
Sempre teste o fluxo com diversas abas, navegadores e devices – todo real-time só é real se todos recebem ao mesmo tempo!
Não deixe passar: recomendações finais e troubleshooting
Monitore logs, verifique as rotas dos endpoints e mantenha suas bibliotecas atualizadas. Use ferramentas como devTools de navegador e WebSocket debuggers. A cada alteração, valide o handshake e subscribe dos tópicos.
❌Erros comuns
1. Endpoint errado (/ws faltando), 2. Origem não liberada no backend, 3. Rotas de tópico inconsistentes (“/topic” ou “/queue” trocado), 4. Cliente não assinando antes de mandar mensagem.
Ganhe tempo: repositório pronto e dicas de ouro
Baixe o exemplo de front-end já estruturado para conexão, envio, subscribe e gerenciamento de sala. Adapte para seu projeto, testando múltiplas salas e múltiplos dispositivos.
✅Sucesso garantido
Todo o front-end e back-end deste artigo estão disponíveis para consulta. Use, altere, pense em novas ideias!
Por dentro do código: principais trechos em destaque
- Como habilitar @EnableWebSocketMessageBroker
- Como configurar endpoints de handshake e brokers
- Como definir os destinos e assinar tópicos
- Como conectar e enviar mensagens (recomendo ver e pausar o vídeo para analisar cada trecho!)
Conclusão: tudo pronto para um chat realmente instantâneo!
Agora, você não só sabe “copiar e colar” código, mas entende o motivo de cada detalhe na arquitetura do chat em tempo real. Aplique este conhecimento para criar qualquer sistema que exija mensagens instantâneas com garantia de performance e robustez. É assim que grandes soluções nascem: integrando teoria, boas práticas e código limpo, sempre explicando o porquê de cada decisão.
✅Aprofunde o conhecimento
Quer ver tudo em ação, com exemplos práticos passo a passo e comentários claros? Visite o canal Dev Doido no YouTube e confira o vídeo completo: https://www.youtube.com/@DevDoido