NOTE本文全部代码已全部开源至 Github。
Waiting for api.github.com...
本系统的目标是实现一个实时监测水流量的解决方案，通过 WebSocket 获取数据，并进行本地存储、前端可视化以及异常检测与告警。系统包括三个主要模块：数据抓取与存储、前端数据展示与处理、异常检测与告警，并通过 内网穿透技术 将前端网页暴露到公网，方便其他用户访问。下面将详细介绍各个模块的工作原理与算法。
数据抓取与存储（catch.js）
本模块的核心功能是从水表数据平台获取实时数据并将其保存在本地，以便后续分析和展示。数据通过 WebSocket 协议实时推送，确保系统能快速响应水流的变化。
WebSocket 数据接收
每秒钟，水表平台会通过 WebSocket 向客户端发送水流数据。为了确保数据完整性和时序性，每次接收到数据时，系统都会将当前的时间戳和数据一同记录下来，并将数据写入到本地存储文件中。每条数据记录包括：时间戳（精确到毫秒）和水流量数据（即每秒钟的水流量值）。该方式保证了数据的实时性与高效存储，方便后续读取和分析。
数据存储与缓冲机制
系统使用了本地文件（Data.txt）来存储水流数据，文件内容包括时间戳与水流量信息，按时序排列。虽然数据存储方式相对简单，但它可以保证在网络不稳定或数据源发生异常时，系统仍能保留历史数据，便于后续的回溯与分析。
前端数据展示与处理
前端部分的核心目的是将从后端获得的水流数据进行展示。通过图表将水流量的时间变化趋势展示给用户，并提供交互功能，如选择不同的时间段、查看水流量的动态变化等。
数据获取与展示
前端会向后端请求特定时间范围内的水流数据。请求到的数据被传递给 Chart.js，以便进行图表绘制。为保证图表的性能，前端使用了数据采样算法。如果数据量较大，系统会将数据按比例进行抽样，确保每个图表最多显示固定数量的数据点，避免因数据量过大导致页面加载和渲染变慢。
数据采样与重采样算法
由于原始数据可能包含大量的冗余信息（如每秒钟一个数据点），而前端的图表显示并不需要如此细致的粒度，因此前端实现了一个采样算法。该算法通过计算从原始数据中抽取一定比例的数据，确保图表的准确性与实时性。一般情况下，图表会根据最大显示数据点数（如 100）对数据进行重采样，保留重要的时间节点数据。
均值计算与动态阈值
为了进一步分析水流量的异常情况，系统计算用户选定时间段内水流量的均值。具体来说，在每次绘制图表时，系统会选择用户设定的时间段（如 7 天、14 天、30 天），并计算该时间段内所有水流量数据的均值。这一均值将作为判断是否存在异常的基准值。
异常检测与告警（sender.js）
系统的异常检测机制基于动态阈值算法和滑动窗口方法。通过对数据流的实时分析，系统能够在水流量异常时发出告警，确保操作人员能够及时采取措施。
异常检测算法
在实际运行过程中，系统会动态地计算水流量的均值，并与当前水流量值进行比较。如果水流量在短时间内偏离正常范围（目前设定为超出均值两倍），则会被认为是异常情况。系统会根据设定的时间周期（如最近 7 天、14 天、30 天）动态计算该周期内的水流量均值，并判断当前水流量是否超出该范围。如果超出，则触发异常警报。
滑动窗口与动态阈值
系统采用滑动窗口机制来计算时间段内的水流量均值。例如，当设定时间范围为 7 天时，系统会计算过去 7 天的水流量均值，并与当前的水流量进行比较。这一机制可以帮助系统适应水流量的波动，在不同时间段内调整异常检测的阈值。
告警机制
一旦检测到异常，系统将通过邮件发送告警信息。邮件中包括了异常水流量的具体值、时间戳等信息，帮助操作人员快速识别问题并采取适当措施。邮件的发送是通过 nodemailer 模块实现的，SMTP 配置允许系统通过指定的邮件服务商发送邮件。通过这种方式，系统能够实时通知相关人员，确保水流监控的高效响应。
内网穿透与公网暴露
由于本地开发环境运行的前端网页默认绑定在 localhost:3000 上，其他外部用户无法直接访问到这个地址。为了解决这一问题，我使用了内网穿透技术，通过第三方穿透工具（如 OpenFrp 或其他类似工具）将本地服务映射到公网。具体而言，内网穿透工具将本地 Web 服务（如前端网页）通过安全的隧道连接到外部服务器，并为该服务分配一个公网可访问的 URL。
域名解析： 一旦系统通过内网穿透暴露了前端网页到公网，用户可以通过访问分配的公网地址访问到该系统的前端页面。为了增强用户体验，我进一步将该公网地址解析到我个人的域名下。这样，用户只需访问域名即可轻松访问水位监测系统，且通过自定义域名进一步提升了系统的易用性。
总结
整个系统的运行原理可以概括为以下几个关键点：
- 实时数据抓取与存储：通过 WebSocket 协议从水表数据平台实时获取数据，并将其按时序存储到本地文件中，确保数据完整性和持久性。
- 数据可视化与动态展示：前端通过对数据进行采样与均值计算，将水流量数据呈现为折线图，用户可以交互式地选择不同时间段查看数据趋势。
- 异常检测与告警：采用滑动窗口和动态阈值算法监测水流量的变化，当检测到异常时，通过邮件告警功能及时通知相关人员，保障水流监控的及时响应。
- 内网穿透与公网暴露：通过内网穿透技术，将本地服务暴露到公网，并通过域名解析将其映射到用户友好的域名上，使得外部用户能够访问监测系统。
通过这种综合的数据抓取、处理、可视化与告警机制，以及内网穿透技术的应用，系统能够实现高效、准确的水流量监测，并及时发现和处理异常情况，确保水流监控的稳定性与可靠性，同时为外部用户提供便捷的访问方式。