Aplicação web didática que simula visualmente o envio de dados em uma conexão TCP entre um cliente (modo ativo) e um servidor (modo passivo). Ideal para estudo e demonstração de conceitos de redes de computadores.
- Computador Cliente (Modo Ativo) — Campo para digitar a mensagem e botão para enviar
- Rede — Área central onde um pacote é animado da esquerda para a direita (envio) e da direita para a esquerda (ACK)
- Servidor (Modo Passivo) — Lista de mensagens recebidas com horário; cada mensagem enviada aparece aqui quando o pacote “chega”
- Console de Logs — Registro em tempo real de cada evento (preparação do pacote, envio, recebimento no servidor, ACK, confirmação)
- HTML5
- Bootstrap 5 (via CDN)
- Bootstrap Icons (via CDN)
- CSS3 (animações e layout)
- JavaScript (lógica do simulador, animação do pacote e logs)
servertester/
├── index.html # Página principal
├── styles.css # Estilos e animações
├── js/
│ └── app.js # Lógica do simulador e eventos
└── README.md
-
Clone o repositório:
git clone https://github.com/SEU_USUARIO/servertester.git cd servertester -
Abra o arquivo
index.htmlno navegador (duplo clique ou arrastar para o navegador).Ou use um servidor local, por exemplo:
# Python 3 python -m http.server 8000 # Node.js (npx) npx serve .
Depois acesse
http://localhost:8000no navegador.
Não é necessário instalar dependências: Bootstrap e ícones são carregados via CDN (requer internet na primeira carga).
- Usuário digita a mensagem no Cliente e clica em Enviar Mensagem (ou pressiona Enter).
- O pacote é animado da caixa do Cliente até a caixa do Servidor (através da “Rede”).
- Ao “chegar” no Servidor, a mensagem é exibida na lista Mensagens recebidas e um ACK é enviado de volta.
- O pacote (ACK) é animado do Servidor de volta ao Cliente.
- O console registra cada etapa; o campo de mensagem é limpo e uma nova mensagem pode ser enviada.
Projeto de uso livre para fins educacionais.