使用 InfluxDB 和 React 进行超凡脱俗的监控
作者：Gene Hynson / 产品, 用例, 开发者
2021 年 4 月 6 日
导航至
经许可转载。© IDG Communications, Inc., 2021。 https://www.infoworld.com/article/3609389/out-of-this-world-monitoring-with-influxdb-and-react.html
在 InfluxData 内部黑客马拉松期间，我正在寻找一个可以帮助我加强 Telegraf 和 Flux 技能的项目。我还想使用 InfluxData 的 Giraffe 在 React 应用程序中可视化我的项目。在阅读了 Sean Brickley 关于使用 InfluxDB 跟踪国际空间站的博文 后，我受到了启发，并在此想法的基础上进行了构建。因此，我最终构建了一个 React 应用程序，该应用程序可以使用 InfluxDB、ExpressJS、Telegraf 和 Giraffe 实时跟踪国际空间站的位置并记录其旅程。
此项目有三个主要组件
- Telegraf 配置
- ExpressJS API 服务器
- React 应用程序
让我们从 Telegraf 配置开始。
像 Sean 一样，我使用了一个 公共 API 来获取国际空间站的当前位置。我的计划是使用 Telegraf 轮询此 API，解析坐标数据，并将此位置信息发送到 InfluxDB。我使用了 Telegraf 的 HTTP 插件 来实现此目的。下一步是从 JSON 中解析坐标信息，并将字符串转换为浮点数。这可以使用 Telegraf 的 Converter 插件 完成。最后，我需要将我的位置数据发送到我在 AWS 中运行的 InfluxDB 云实例。当然，这可以轻松地通过 Telegraf 的 InfluxDB 插件完成。第一步完成！现在我们可以运行 telegraf --config ./telegraf/iss.conf 并开始收集国际空间站的位置。
现在我们开始收集一些数据，下一步是查询数据。我决定使用 ExpressJS 构建一个 API，并使用 InfluxDB JS 客户端 查询我的 InfluxDB 实例。这里的目标是构建一个 React 应用程序可以使用的 API，以检索可视化国际空间站飞行路径所需的位置数据，使用 Giraffe。
首先，我们需要连接到 InfluxDB，我们可以通过将我们的 URL 和令牌传递给 InfluxDB 对象来完成。由于我们将使用客户端来运行查询，因此我们需要获取 Query API 对象。例如，如果您想获取存储桶信息，则需要获取 Bucket API 对象。
const influxDB = new InfluxDB({ url: baseURL, token: influxToken })
const queryApi = influxDB.getQueryApi(orgID)接下来，我们可以使用 InfluxDB JS 客户端来查询我们的 InfluxDB 实例，如下所示
app.get('/iss, (_, res) => {
let csv = ''
const issQuery = `todo`
let clientQuery = flux``+issQuery
queryApi.queryLines(clientQuery, {
next(line) {
csv = `${csv}${line}\n`;
},
error(error) {
console.error(error)
console.log('\nFinished /iss ERROR')
res.end()
},
complete() {
console.log('\nFinished /iss SUCCESS')
res.end(JSON.stringify({ csv }))
},
})
})此路由将使用 InfluxDB 客户端中的 Query API 对象来执行我们的查询（我们尚未定义）。我们将使用 queryLines 函数逐行获取我们的响应。生成的字符串将是 Giraffe 可以理解的 csv 响应。
太棒了！现在我们只需要一个 Flux 查询。我尝试了几个查询，试图看看哪个查询最能突出国际空间站的运动。如果我只是抓取过去几个小时的所有数据，Giraffe 图可能会太繁忙。如果我专注于尝试抓取完整轨道的数据，那么在平面地图上绘制圆形、连续线会有一个奇怪的问题需要解决。因此，我最终决定绘制国际空间站从西向东的当前轨道，这意味着我抓取了从经度 0 度到其当前位置的所有数据点。国际空间站每 93 分钟绕轨道运行一次，因此我将我的查询限制在该范围内。这是我想出的
import "experimental/geo"
currentPos = from(bucket: "iss")
|> range(start: -1m)
|> filter(fn: (r) => r._field == "iss_position_longitude")
|> tail(n: 1)
|> findRecord(
fn: (key) => true,
idx: 0
)
from(bucket: "iss")
|> range(start: -93m)
|> aggregateWindow(every: 3m, fn: min, createEmpty: false)
|> geo.shapeData(latField: "iss_position_latitude", lonField: "iss_position_longitude", level: 14)
|> filter(fn: (r) => r.lon <= currentPos._value)
|> geo.asTracks()查询首先找到国际空间站的当前经度位置，这将是最近的记录。然后，我们查询所有位置数据，聚合到三分钟的窗口中，其中经度小于国际空间站的当前位置。我们使用 Flux 的实验性 Geo 包来塑造数据并将位置数据作为轨迹返回。
好的，现在开始有趣的部分——绘制图表！我将只介绍重点，因此请随时查看 repo 中的 实现细节。基本上，我们有一个 React 应用程序，它正在使用 InfluxData 的 Giraffe 可视化库。Giraffe 最近添加了 Geo 图，能够绘制标记和轨迹（查看 Storybook 来试用它们）。我们的 React 应用程序将每 30 秒左右查询我们的 API 以检索最新数据。我们将使用 fromFlux 函数 将响应解析为 Giraffe 可以使用的表格。正如您从 Storybook 中看到的那样，Geo 图有很多旋钮可以调整。一个重要的参数是 tileServerConfiguration，它告诉 Giraffe 从哪里获取地图图像。我使用了 OpenStreetMap，并为 Giraffe 提供了以下对象，以便它知道如何检索正确的地图瓦片
const osmTileServerConfiguration = {
tileServerUrl: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
}此时，所有部分都组合在一起了！我在我的 UI 中添加了一个复选框来添加标记作为可选层，并且还提供了查询自定义时间范围的历史数据的能力。
我们有了——国际空间站的位置随着它在地球周围的移动而实时更新！请随时 查看源代码 并自己试用。如果您发现其他 Flux 查询可以生成此数据的有趣可视化效果，请告诉我。
正如 Sean 在他的帖子中提到的，此处显示的 Geo 功能仍处于实验阶段，但我们正在努力使它们为生产做好准备。请继续关注此领域的更多激动人心的更新（双关语！）。如果您正在进行像 Sean 这样有趣的 InfluxDB 项目，并且需要帮助，请在我们的 社区论坛 或 Slack 上联系我们。我们很乐意回答您的问题，并了解您正在使用 InfluxDB 做什么。
