TCP Visualizer — 浏览器内 TCP 拥塞控制实时模拟器

原文链接：https://github.com/Overshoot-ai/tcp-visualizer
Live Demo：https://tcp.overshoot.ai

TCP Visualizer 是一个交互式浏览器内模拟器，可视化展示单条大流量传输中的 TCP 行为——从发送端离开、穿越网络、在瓶颈路由器排队、到达接收端的完整过程，同时动画展示拥塞窗口、内核缓冲区、ACK 时钟和丢包恢复。

核心能力

支持两种主流 TCP 拥塞控制算法：

算法	特性
TCP Cubic	Linux 默认（~2008 起），含慢启动、Hystart、快速重传、NewReno 快速恢复、RTO
TCP BBR	Google 2016，含 BtlBw/RTprop 估算器、paced sends、完整状态机

同时模拟瓶颈队列动态、内核缓冲区与流控、以及 UDP 无控模式作为对比。

快速开始

无需构建步骤，直接 serve 目录：

npm run serve            # 或 python3 -m http.server 8080
open http://localhost:8080/tcp-inflight.html

选择预设场景，点击 Start，调整模拟速度滑块（默认 50× 慢动作以便观察单个包）。

CLI 使用

node sim-cli.js --preset cold-iw10 --seconds 5
node sim-cli.js --preset warm-iw3500-rwnd-warm --seconds 5

架构

文件	职责
sim-core.js	纯模拟模型 — 状态工厂、步进函数、预设场景。无 DOM，可在 Node 或浏览器运行
sim-runner.js	共享运行器 — RAF 循环（浏览器）或 tight 循环（Node）
sim-agent-api.js	暴露 window.SimAgent
tcp-inflight.html	主页面：Canvas 可视化、旋钮、术语表
sim-cli.js	Node CLI 入口

部署

纯静态站点，Vercel 无需额外配置。生产部署：https://tcp.overshoot.ai

项目信息

• Stars: 14 | Forks: 2
• Language: HTML/JavaScript
• License: MIT
• Created: 2026-06-16

保真度说明

教学模型，非包级精确模拟。定性动态（斜坡、锯齿波、常驻队列、窗口停滞）与真实 trace 一致，但部分机制有简化。

本文转载自 GitHub，如有侵权请联系删除。