Live Chat App

Sobre

Este é um aplicativo de chat em tempo real que permite a comunicação instantânea entre vários usuários. O diferencial do app é o uso de WebSockets, que possibilita uma comunicação bidirecional eficiente entre cliente e servidor, permitindo atualizações imediatas das mensagens sem a necessidade de recarregar a página.

Tabela de Conteúdos

• Funcionalidades implementadas
• Tecnologias utilizadas
  • Backend
  • Frontend
• Como começar
• Endpoint do app
• Imagens
• O que eu aprendi?
• Observações

Funcionalidades implementadas

• Login simples com nome de usuário.
• Envio e recebimento de mensagens em tempo real.
• Exibição das mensagens com identificação visual do remetente por cores distintas.
• Área de chat com rolagem automática para as mensagens mais recentes.
• Validação para garantir que o usuário informe o nome antes de acessar o chat.
• Interface responsiva usando Bootstrap.
• Comunicação via protocolo STOMP sobre WebSocket com fallback SockJS.

Tecnologias utilizadas

Backend

• Java 21
• Spring Boot 3.5.3 (Web, WebSocket)
• Lombok
• Maven para gerenciamento de dependências

Frontend

• Thymeleaf (template engine)
• HTML5 e CSS3 (com Bootstrap 5)
• JavaScript (SockJS, STOMP.js e lógica customizada)
• Bootstrap 5 para estilos e componentes UI

Como começar

1. Clonar o repositório:

git clone https://github.com/MarceloB-Junior/live_chat_app.git
cd live_chat_app

2. Rodar o backend:

Certifique-se de ter Java 21 e Maven instalados.

mvn clean spring-boot:run

O servidor iniciará na porta padrão 8080.

3. Acessar o frontend:

Abra o navegador e acesse:

http://localhost:8080/chat

Você verá a tela inicial para entrar no chat.

Endpoint do app

• GET /chat: Endpoint HTTP que serve a página principal do chat.

  • Exibe o formulário para o usuário digitar seu nome e entrar no chat.
  • Após o login, carrega a interface do chat em tempo real.
  • Internamente, o frontend conecta-se ao WebSocket no endpoint /chat (configurado no backend) para enviar e receber mensagens via STOMP.

Imagens

• Tela inicial (login):
  
• Tela de chat:

O que eu aprendi?

• Como configurar e usar WebSockets no Spring Boot com STOMP para comunicação em tempo real.
• A importância do protocolo STOMP para organizar mensagens e tópicos.
• Como usar SockJS para fallback em ambientes onde WebSocket não está disponível.
• Como integrar o frontend com bibliotecas JavaScript (SockJS e STOMP.js) para conectar e interagir com o backend via WebSocket.
• Técnicas para atualizar a interface do usuário dinamicamente com mensagens recebidas em tempo real.

Observações

• Configurar CORS adequadamente para restringir origens confiáveis.
• Usar WebSocket seguro (wss://) com TLS para proteger a comunicação.
• Implementar autenticação e autorização para controlar o acesso ao chat.
• Considerar broker de mensagens mais robusto (ex: RabbitMQ) para escalabilidade.
• Tratar possíveis falhas de conexão e reconexão automática no frontend.