如何使用WebSockets在Grafana中实现实时物联网数据的可视化

后端之巅
1,071 阅读4分钟

Mike Szczys是Golioth的开发者关系工程师。他对微控制器的深爱开始于21世纪初，从他所建造的BEAM机器人的愿望中成长。当他不看数据表的时候，他在威斯康星州的麦迪逊作为一个管弦乐队的音乐家而忙碌。

在商业物联网开发平台Golioth，我们喜欢使用Grafana的力量来轻松地可视化来自物联网装置的数据，其中有几十、几百甚至几千个设备在报告。我们的平台创建了与现场所有设备的安全连接，不仅可以轻松收集数据，还可以提供多种方式将其与其他平台无缝连接。

WebSockets是Golioth提供实时数据的方式之一。为了绘制这些数据，我们编写了一个Grafana插件，可以连接到任何使用JSON格式的WebSocket数据源。

由于WebSockets无需轮询就能提供实时数据，所以当你使用新的WebSockets数据源插件时，你的Grafana面板会在新数据进入时自动更新。这使得实时监控变得很容易，无论你是在观察连续的数据流，还是想立即看到不经常到达的警报数据的结果：

WebSocket plugin for Grafana: Sample dashboard.

开始使用WebSockets和Grafana

新的WebSocket数据源插件已经是Grafana的一部分，可以使用正常的插件流程进行添加，我将在下面进行介绍。(我们还发布了一个Websockets演示，展示了从设备发送数据到用Grafana进行可视化的工作流程）。该插件是开源的，你可以在GitHub上找到代码。

第1步：添加WebSocket数据源插件

WebSocket plugin for Grafana: getting started.

  1. 登录Grafana，如果你还没有账户，就注册Grafana Cloud。
  2. (可选）如果你被重定向到grafana.com/orgs/，点击Grafana标题下的 "登录"。
  3. 点击左侧边栏的齿轮图标，选择插件。
  4. 在搜索Grafana插件框中搜索WebSocket。
  5. 点击WebSocket API瓦片，然后点击通过Grafana.com安装。
    • 点击下一个屏幕上的 "安装插件 "按钮。
  6. 返回到Grafana仪表板中的WebSocket插件界面。
  7. 刷新页面，现在你会看到一个创建WebSocket API数据源的按钮。

第2步：获取你的WebSocket URL和API密钥

WebSocket插件适用于向其他网站提供WebSocket输出的任何来源。我们将展示Golioth的流程，因为这是我们从平台到Grafana等网站的标准输出之一。如果你想在不生成任何数据的情况下看到整个过程，请查看上述Golioth博客上的演示，或者按照Golioth入门指南开始生成数据。

要在Golioth控制台生成一个API密钥，你需要知道你的WebSocket URL。API URL显示了，但我们要使用WebSocket版本：wss://api.golioth.io/v1/ws/（注意wss://前缀和ws/后缀）。把主机URL保持在一个更一般的端点，而不是指向你想访问的具体数据，这是一个好主意。这在设置你的面板时提供了更多的灵活性。

WebSocket plugin for Grafana: generate API key.

你可以在这里看到，当我们以后配置Grafana面板的路径设置时，将使用Path条目/projects/environment-monitor 。通过在配置中使用这种方法，你的数据源可以用于到达多个项目或设备的端点。

关于这一步的更多帮助，你可以遵循我们的Golioth物联网Websocket访问指南，使用Grafana云。否则，请查阅你的特定平台的Webhook API文件。

第3步：配置WebSocket数据源

一旦插件被选为数据源，请选择一个描述性名称：

WebSocket plugin for Grafana: configure WebSocket data source.

在主机字段中输入你的WebSocket URL。你还需要在Grafana数据源中为你的WebSocket服务所需的任何自定义头信息或查询参数添加头信息。因为Golioth使用API密钥来管理访问，你可以看到我已经添加了 "x-api-key "作为头文件，并将API密钥保存为值。

在点击 "保存和测试 "按钮后，你应该看到一个成功的消息。现在你已经准备好添加一个面板来可视化传入的数据了。

第4步：配置面板以显示数据

  1. 使用左侧边栏的 "+"图标来添加一个新的面板。
  2. 从 "数据源 "菜单中，选择你刚刚配置的WebSocket源。
  3. 在 "路径 "选项卡的 "路径 "字段中添加你的目标端点。
    • 如前所述，Golioth API密钥界面显示的是路径。我正在访问流数据，所以我也附加了这个。/projects/environment-monitor/stream
  4. 使用字段标签从端点的JSON数据包中选择数据。
    • 我对我的Fields进行了格式化，以捕获一个数据和时间戳。$.result.data.data.environment.temp
      $.result.data.timestamp

而这里是一个面板的例子：

WebSocket plugin for Grafana: Grafana dashboard.

当设置正确时，Grafana可以自动将你的数据映射为可视化格式。然而，编辑面板窗口顶部的表视图切换将对设置字段有极大帮助。

开始时，打开表视图，只把$ 到字段标签中。你应该看到每次收到WebSocket更新时都会出现完整的JSON数据包。记住，这是实时数据，所以必须发送一个新的数据包才能在这里出现。

你就完成了!

avatar
文章
阅读
粉丝