InfluxDB 和 React 的超凡监控
2021 年 4 月 6 日
导航至
经许可转载。© IDG Communications, Inc., 2021。
在一次 InfluxData 内部黑客马拉松期间，我想做一项能帮助我加强我的 Telegraf 和 Flux 技能的项目。我还想使用 InfluxData 的 Giraffe 在 React 应用程序中可视化我的项目。在阅读了 Sean Brickley 的博客文章 关于使用 InfluxDB 跟踪国际空间站后，我受到了启发，决定在此基础上构建。因此，我着手开发了一个 React 应用程序，可以实时跟踪 ISS 的位置并使用 InfluxDB、ExpressJS、Telegraf 和 Giraffe 记录其行程。
该项目有三个主要组件
- Telegraf配置
- ExpressJS API服务器
- React应用
让我们从Telegraf配置开始。
和Sean一样，我使用了一个公开API来获取国际空间站（ISS）的当前位置。我的计划是使用Telegraf轮询这个API，解析坐标数据，并将此位置信息发送到InfluxDB。我使用了Telegraf的HTTP插件来实现这一点。下一步是从JSON解析坐标信息，并将字符串转换为浮点数。这可以通过Telegraf的转换插件完成。最后，我需要将我的位置数据发送到我在AWS上运行的InfluxDB云实例。当然，这可以通过Telegraf的InfluxDB插件轻松完成。第一步完成！现在我们可以运行telegraf --config ./telegraf/iss.conf并开始收集ISS的位置。
现在我们已经开始收集一些数据，下一步是查询它。我决定使用ExpressJS构建一个API，并使用InfluxDB JS客户端查询我的InfluxDB实例。目标是构建一个React应用可以用来检索它需要用Giraffe可视化的ISS飞行路径的位置数据的API。
首先我们需要连接到InfluxDB，我们可以通过传递我们的URL和令牌到InfluxDB对象来实现。由于我们将使用客户端来运行查询，我们需要获取查询API对象。如果你想要获取桶信息，例如，你将需要获取桶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客户端的查询API对象来执行我们的查询（我们尚未定义）。我们将使用queryLines函数逐行获取我们的响应。生成的字符串将是一个Giraffe可以理解的csv响应。
太棒了！现在我们只需要一个Flux查询。我尝试了几个查询，试图看看哪个我认为最能突出ISS的运动。如果我简单地抓取过去几个小时的所有数据，Giraffe图可能太忙。如果我专注于尝试抓取一个完整轨道的数据，则在平坦地图上绘制圆形、连续线时会遇到奇怪的问题。所以我最终决定绘制从西向东的ISS当前轨道，这意味着我抓取了从0度经度到其当前位置的所有数据点。ISS每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()查询首先找到ISS的当前经度位置，这将是最近的记录。然后我们查询所有位置数据，将这些数据聚合到经度小于ISS当前位置的3分钟窗口中。我们使用Flux的实验性Geo包来塑造数据，并将位置数据作为轨迹返回。
现在我们进入有趣的部分——绘制图表！我只会介绍重点，所以请随意查看实现细节，可以在代码库中查看。基本上，我们有一个使用 InfluxData 的 Giraffe 可视化库的 React 应用程序。Giraffe 最近增加了地理绘图功能，可以绘制标记和轨迹（查看Storybook来尝试一下）。我们的 React 应用程序每隔大约 30 秒就会查询我们的 API，以获取最新的数据。我们将使用fromFlux函数将响应解析成 Giraffe 可以消费的表格。从 Storybook 中可以看出，有很多可调节的控件来调整地理绘图。一个重要的参数是tileServerConfiguration，它告诉 Giraffe 从哪里获取地图图像。我使用了OpenStreetMap，并为 Giraffe 提供了以下对象，以便它知道如何检索正确的地图瓦片。
const osmTileServerConfiguration = {
tileServerUrl: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
}到了这个阶段，所有部件都开始组合在一起了！我在 UI 中添加了一个复选框来添加标记作为可选层，并且还提供了查询自定义时间范围历史数据的选项。
这就是我们所拥有的——国际空间站（ISS）的位置随着它在地球上空旅行而实时更新！请随意查看源代码并亲自尝试。如果您发现其他产生有趣数据可视化的 Flux 查询，请告诉我。
正如 Sean 在他的帖子中提到的，这里展示的地理功能仍然是实验性的，但我们正在努力使其为生产做好准备。敬请期待这个领域的更多令人兴奋的更新（当然是有意为之的）！如果您正在开发像 Sean 一样的有趣 InfluxDB 项目，并且需要帮助，请通过我们的社区论坛或 Slack 联系我们。我们很乐意回答您的问题，并了解您正在用 InfluxDB 做什么。
