Este é um projeto desenvolvido para o portfólio que visa demonstrar o uso prático do Socket.io para comunicação bi-direcional em tempo real via web sockets entre o Backend e o Frontend, utilizando como exemplo um chat online simples e funcional.
O objetivo principal deste projeto é apresentar uma implementação robusta de uma comunicação via socket. Ele demonstra como clientes e servidores podem estabelecer conexões persistentes e assíncronas de baixa latência. Através do projeto, explora-se a criação de salas de bate-papo, fluxos de identificação e transmissão instantânea de mensagens entre os diversos usuários conectados.
O repositório é divido em duas frentes com uma estrutura clássica cliente-servidor. Ambas são coordenadas localmente por scripts no diretório raiz:
/frontend: Aplicação SPA (Single Page Application) modular construída com React. Responsável por toda a interface consumível pelo usuário, telas de identificação, salas e pelo gerenciamento reativo da conexão socket./backend: API e servidor WebSocket estruturado e construído com NestJS. Responsável pela regra de negócios focada no gerenciamento de usuários, criação de salas virtuais (rooms), guarda de recados (messages) e o Gateway do chat que escuta e emite os eventos globalmente.
- Identificação de Usuário: Tela de boas-vindas (
WhoAreYou) para que o usuário informe seu nome/apelido e seja identificado na sessão. - Painel & Gerenciamento de Salas: Uma Dashboard que provê a visualização das sessões ativas com um fluxo de criação (
FormRoom) para o usuário ingressar ou iniciar conversas sobre novos tópicos. - Chat Real-time: Envio e recepção quase imediata de texto nas salas, propagando as mensagens ativamente aos clientes inscritos.
- Persistência de Interações: Armazenamento histórico de usuários, mensagens e métricas das salas utilizando um banco de dados relacional.
- Arquitetura Reativa de Estado: Uso de observáveis não só no backend como no frontend para processar o fluxo de novas mensagens sem necessitar de polling agressivo (requisições repetidas HTTP) ou reloads de página.
- NestJS: Framework Node.js progressivo baseado em componentes, serviços e injeção de dependências.
- Socket.IO Server: (Plataforma Nest Sockets) Motor que viabiliza a abertura das conexões com clientes front-end em tempo real.
- TypeORM: ORM utilizando classes TypeScript que facilita imensamente as interações com o sistema de base de dados.
- PostgreSQL (pg): RDBMS (banco de dados relacional) de alta eficiência usado no projeto.
- RxJS: Utilizado sob o capô para construção assíncrona reativa nos pipes de conexão e observação das rotas REST/Sockets.
- React 18: Biblioteca central que provê o desenho em componentes da interface.
- Socket.IO Client: Biblioteca irmã da usada no backend para firmar a recepção/emissão de eventos Socket por dentro do navegador.
- Material-UI (MUI) & Emotion: Base extensa de componentes (Botões, Cards, Textfields) implementando as guias rígidas e responsivas do Material Design.
- React Router DOM: Gerenciamento de rotas fluídas (Dashboard vs Salas) simulando troca de páginas numa SPA rápida.
- React Hook Form: Focado no ganho de performance, isola os re-renderings das entradas de formulário e gere suas validações eficientemente.
- RxJS & @react-rxjs: Gestão de estados globais que se beneficiam dos streams contínuos (eventos que chegam a qualquer momento pelo websocket).
- Sass: Pré-processador CSS para uma estilização global refinada fora das barreiras dos utilitários.
- Axios: Em auxílio, o projeto usa este cliente HTTP em chamadas sem estado (REST) para interagir com o backend quando um WebSocket não faz sentido técnico.