MeyerThorsten/Signalro

# Signalro [](LICENSE) [](https://nodejs.org) [](https://threejs.org) [](#testing) [-blue.svg)](package.json) **一款用于实时可视化您机器网络流量的 3D 可视化工具 —— 每一个数据包** **都会化身夜间高速公路上的一辆车。** 出站数据包在左侧车道上驶离您； 入站数据包在右侧车道上向您驶来。基于 Three.js 和单一的 Node 依赖构建。 ▶️ **[试用在线演示 →](https://flint-knoll-me7j.here.now)**  ·  📖 **[文档网站 →](https://sunny-cottage-dd88.here.now)**  ·  📋 **[完整参考 →](DOCUMENTATION.md)** [](https://flint-knoll-me7j.here.now) | 协议 | 车辆 | | --- | --- | | HTTPS (TCP 443) | 半挂卡车（绿色货柜） | | QUIC (UDP 443) | 红色跑车 | | HTTP (TCP 80) | 厢式货车 | | 通用 TCP | 蓝色轿车 | | DNS (53/5353) | 琥珀色摩托车 | | 通用 UDP | 橙色掀背车 | | SSH (TCP 22) | 黑色 SUV | | ICMP (ping) | 救护车 | | 其他 | 紫色巴士 | 数据包大小决定车辆尺寸。拖拽可环绕视角，滚动可缩放。 交互： - **点击车辆**以检查其数据包（主机名/IP、端口、协议、大小）；点击空旷路面可关闭。 - **点击图例标签**可隐藏该协议；**Alt-点击**可仅显示该协议。 - 右侧路肩的**出口标志**标示了排名前列的远程目的地（基于 `public/geoip.json` 的离线组织/国家查询）；主机名来自服务器端缓存的反向 DNS。 - **HUD 迷你图**显示过去 60 秒的 pkt/s 和 KB/s。 - **🔇 声音** 开启程序化生成的引擎轰鸣声，该声音会随交通密度变化（默认关闭）；救护车 (ICMP) 会闪烁微弱的警笛声。 - 同一连接的数据包将作为**车队**行驶：同一车道、相同速度、均匀分布 —— 下载操作表现为一排连续行驶的卡车。 ## 分析与洞察 Signalro 不仅是一个可视化工具，更是一个检查器： - **具名目的地** —— 从 ClientHello 中解析 TLS **SNI**，因此 HTTPS 车辆会显示真实域名（例如 `github.com`），而不是纯粹的 IP。 - **进程归属** —— 每个连接都会被标记上归属应用程序（`lsof`/`ss`），显示在提示框、活跃主控面板和连接表中。 - **洞察面板**（右侧） —— 按主机 / 组织 / 应用显示最活跃的连接，带有实时带宽条；点击可聚光灯显示该流量（其他流量将变暗）。 - **搜索**（顶部） —— 按 IP、主机名、端口、协议或应用高亮显示车辆。 - **连接表**（`⊞`） —— 类似 netstat 风格的视图，可对每个实时数据流进行排序；点击某行可聚光灯显示其车队。 - **安全性** —— 明文 (HTTP/FTP/Telnet…) 和高风险端口 (RDP/SMB/VNC…) 会显示警示灯和 HUD 计数；远程 IP/域名会与离线 **拦截列表**（`public/blocklist.json`：Tor/已知恶意网段、广告/追踪器和加密挖矿域名）进行比对。**端口扫描和流量激增** 异常将触发警报。 - **时间进度条**（`⏱` / `t`） —— 从任意节点重播过去 2 分钟的数据。 - **地球仪视图**（`🌐` / `g`） —— 在 3D 地球仪上以 GeoIP 弧线展示相同的流量。 - **导出** —— 将会话下载为 **CSV** 或 Wireshark 可打开的 **PCAP**。 - **设置**（`⚙` / `s`） —— 色盲友好调色板、减少动态效果、自定义端口→协议规则，以及协议→车辆重映射（所有设置均会持久化保存）。 键盘快捷键：`/` 搜索 · `p` 暂停 · `d` 演示 · `t` 时间线 · `g` 地球仪 · `s` 设置 · `Esc` 关闭/清除。 ## 主题 可通过右上角的下拉菜单切换周围环境（设置会持久化保存，或使用 `/?theme=`）：`night`（默认）、`hawaii`（日落海岸）、`autobahn`（阴天的德国高速公路，带有龙门架标志和风力发电机）、`bigcity`（霓虹灯罪恶之城）、`ocean`（导航浮标之间的堤道、货船、灯塔）、`rome`（罗马斗兽场和伞松），以及受电影启发的场景：`fury`（沙漠平顶山）、`neon`（赛博朋克雨夜）、`grid`（青色线框世界）、`snow`（飘雪的山口）、`jungle`（设有大门的热带岛屿）、`mars`（带有栖息地圆顶的红色星球）、`gotham`（哥特式塔楼和探照灯）、`west`（峡谷日落）、`space`（星空堤道和环形空间站），以及 `shire`（带有圆形门的青山）。雨、雪、涡轮机、探照灯和空间站环都是动态的。所有场景均为程序化生成的低多边形几何体 —— 无外部素材。 ### 游戏与艺术风格场景 第二批原创场景旨在致敬游戏和独立艺术美学（带有意境的标签，全部为程序化生成 —— 无抄袭素材）：`voxel`、`witcher`（北方领域）、`halo`（天空中的环）、`fallout`（原子废土）、`battlefield`（前线，动态烟雾）、`nightcity`（赛博朋克巨型城市）、`crystal`（最终幻想风格）、`velvet`（女神异闻录红/黑）、`mirrorsedge`（临床风的白+红）、`deusex`（黑与金）、`mario`（管道与方块）、`antigrav`（反重力赛车/F-Zero，宇宙飞船舰队）、`trench`（星球大战式冲锋，宇宙飞船舰队）、`tron`（霓虹高速公路）、`radar`（RTS 战术地图）、`citymap`（模拟城市）、`motorways`（迷你公路）、`observatory`（赛博朋克仪表盘）、`limbo`（黑白单色剪影）、`cuphead`（橡胶软管动画）、`okami`（水墨画）、`journey`（沙丘）、`windwaker`（卡通海洋，船只舰队）、`borderlands`（卡通渲染废土）、`monument`（纪念碑谷）、`hallownest`（空洞骑士）。**共计 52 种场景。** ### 车队 某些主题会将汽车替换为匹配的车队 —— 同样保留了九种协议槽位，因此图例、过滤器、提示框和车队功能依然适用：`ocean` → 船只（货柜船、快艇、渡轮、帆船、喷气式滑艇…），`space` → 宇宙飞船，以及十种非汽车场景：`reef` → 鱼类（海底总动员），`sky` → 飞机（云海之上），`rails` → 火车（午夜快车），`savanna` → 动物（荣耀国），`arctic` → 极地动物与动态极光（企鹅大游行），`dino` → 恐龙（巨人谷），`magic` → 龙、扫帚和幽灵（巫师之夜），`christmas` → 雪橇和雪人（圣诞老人的奔跑），`depths` → 热液喷口间的潜水艇（寂静深海），以及 `skyfair` → 气球和飞艇（随风而逝）。船只会起伏摇摆，飞行物会悬浮，动物会小跑。 ## 运行 ``` npm install sudo npm start # sudo needed for live packet capture on macOS ``` 然后打开 http://localhost:8090。 ### 一键运行 ``` npx signalro # once published to npm; or `node bin/signalro.js` from a clone ``` 或者使用 Docker（无需安装 Node/tcpdump）： ``` docker build -t signalro . docker run --rm --net=host --cap-add=NET_RAW --cap-add=NET_ADMIN signalro # 打开 http://localhost:8090 （省略 flags 以仅探索 demo 模式） ``` 如果不使用 `sudo`，服务器仍会运行，但 tcpdump 无法打开 BPF 设备，因此页面会自动切换为模拟的 **演示流量**（也可通过右上角的按钮或打开 `/?demo` 进行切换）。 要在不使用 `sudo` 的情况下捕获实时数据包，请为您的用户授予一次 BPF 访问权限（采用与 Wireshark 相同的 `access_bpf` 用户组方法 —— 这将创建该用户组，将您添加进去，并安装一个 LaunchDaemon 以在重启后依然生效）： ``` sudo scripts/grant-bpf.sh # then open a new terminal and: npm start sudo scripts/grant-bpf.sh uninstall # to undo ``` 选项： - `PORT=9000 sudo -E npm start` — 更改 Web 端口 - `IFACE=en1 sudo -E npm start` — 捕获特定接口（默认：默认路由的接口，通常是 `en0`） ### Linux 工作方式相同；默认接口通过 `ip route show default` 自动检测。 实时捕获需要权限 —— 要么使用 `sudo` 运行，要么一次性授予 tcpdump 捕获能力并以非特权身份运行： ``` sudo setcap cap_net_raw,cap_net_admin+eip "$(command -v tcpdump)" npm start ``` ### Windows 安装 [npcap](https://npcap.com/) 及其兼容 WinDump/tcpdump 的工具， 然后从管理员终端运行。使用 `windump -D` 列出设备并通过索引选择一个： ``` $env:IFACE = "1" # device index from `windump -D` npm start ``` 如果您的 tcpdump 构建版本名称不同，请使用 `CAPTURE_BIN` 覆盖该二进制文件；其输出内容的解析方式与 tcpdump 相同。 ### 远程 / 无头捕获 在树莓派、路由器或远程主机上运行服务器，并从任何浏览器进行观看。使用共享令牌保护实时数据流： ``` SIGNALRO_TOKEN=choose-a-secret HOST=0.0.0.0 sudo -E npm start # 然后打开 http://that-host:8090/?token=choose-a-secret ``` 如果没有令牌，页面会加载，但不会接收到任何数据包数据。`HOST` 用于设置绑定地址（默认为 `0.0.0.0`）。 ### 导出 **⊞ 连接与导出** 面板可将当前会话下载为 **CSV**（流量摘要，通用于所有平台）或 **PCAP**（可被 Wireshark 打开；需要实时捕获 —— 服务器会维护一个滚动缓冲区）。 ## 工作原理 - `server.js` 启动 `tcpdump -i -n -q -l -t -U`，解析每一行（协议、端口、长度），对其进行分类（端口 → 协议族），通过将源地址与机器的本地地址进行比较来确定传输方向，并每隔 100 毫秒通过 WebSocket 将批次流式传输到浏览器。 数据包会被标记上数据流 ID（规范化的五元组；空闲流将在 30 秒后被清理），以便客户端能将一个连接的数据包分组为一个车队：同一车道，相同速度，均匀间隔。 - `public/main.js` 使用 Three.js 渲染高速公路。车辆是由合并的彩色方块构建的低多边形模型，并使用 `InstancedMesh` 绘制（每种车辆类型只需两次绘制调用），因此数百辆同时出现的车辆依然能保持流畅。大灯/尾灯是未点亮的几何体，因此它们会在夜间发光。 如需深入了解架构、捕获管道、流车队、主题引擎，以及如何添加您自己的场景或车队，请参阅 **[DOCUMENTATION.md](DOCUMENTATION.md)**。 ## 图库 | | | | |---|---|---| |  **夏威夷海岸** |  **德国高速公路** |  **罪恶之城** | |  **广阔海洋**（船只） |  **星际之门**（宇宙飞船） |  **海底世界**（鱼类） | |  **荣耀国**（动物） |  **巨人谷**（恐龙） |  **圣诞老人的奔跑** | |  **霓虹雨夜** |  **网格世界** |  **随风而逝**（气球） | 全部 52 种场景及其车队均在 [DOCUMENTATION.md](DOCUMENTATION.md#themes--fleets) 中进行了编目整理。 ## 测试 面向浏览器的功能（拾取、过滤器、主题、车队、迷你图）在开发期间已通过无头 Playwright 脚本进行了验证。 ## 贡献 欢迎提交 Issues 和 Pull Requests。在 `public/themes.js` 中添加一个新场景大约只需 20 行的主题规范；在 `public/fleets.js` 中添加一个新车队只需包含九种车辆定义的表格 —— 详情请参阅 [DOCUMENTATION.md](DOCUMENTATION.md#extending-signalro) 指南。 ## 许可证 [MIT](LICENSE) © 2026 Thorsten Meyer. Signalro 不包含任何第三方素材 —— 每一辆车、道具和场景均为运行时程序化生成的低多边形几何体。Three.js 在 `public/index.html` 中通过 CDN 按固定版本加载。

标签：3D可视化, GNU通用公共许可证, MITM代理, Node.js, Three.js, 特征检测, 网络流量, 自定义脚本, 请求拦截