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

•2022年4月5日•5分钟

Mike Szczys是一名开发者关系工程师Golioth．他对微控制器的热爱始于21世纪初，源于他希望制造更多他正在制造的BEAM机器人。当他不阅读数据表时，他就在威斯康辛州麦迪逊市担任管弦乐队乐手。

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

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

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

开始使用WebSockets和Grafana

的新的WebSocket数据源插件已经是Grafana的一部分，并且可以使用普通的插件过程添加，我将在下面介绍。(我们也发表了Websockets演示显示了将数据从设备发送到用Grafana可视化的工作流程。)这个插件是开源的，你可以找到GitHub上的代码．

步骤1:添加WebSocket数据源插件

登录到Grafana或注册Grafana Cloud如果你还没有账户的话。
(可选)如果你被重定向到www.tubolov.com/orgs/，点击Grafana标题下的“登录”。
点击左边栏的齿轮图标并选择插件．
在搜索Grafana插件框中搜索WebSocket。
点击WebSocket API然后点击“通过Grafana.com安装”。
- 点击下一个屏幕的“安装插件”按钮。
返回到Grafana仪表板中的WebSocket插件屏幕。
刷新页面，您现在将看到一个Create a WebSocket API数据源按钮。

步骤2:获取WebSocket URL和API密钥

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

来在Golioth控制台生成一个API密钥，你需要知道你的WebSocket URL。API URL已显示，但我们想使用WebSocket版本:wss:// API .golioth。Io /v1/ws/(注意wss://前缀和ws/后缀)。将主机URL保存到更通用的端点，而不是指向您想要访问的特定数据块，这是一个好主意。这在设置面板时提供了更大的灵活性。

您可以在这里看到Path条目/项目/环境监控稍后当我们配置Grafana面板的路径设置时将使用。通过在配置中使用这种方法，可以将数据源用于连接多个项目或设备的端点。

有关这一步的更多帮助，您可以遵循我们的指南使用Grafana Cloud的Golioth IoT Websocket访问．否则，请参考特定平台的Webhook API文档。

步骤3:配置WebSocket数据源

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

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

点击“Save & test”按钮后，你会看到一条成功的消息。现在可以添加一个面板来可视化传入的数据。

步骤4:配置面板显示数据

使用左边栏中的+图标添加一个新面板。
从“Data source”菜单中，选择刚刚配置的WebSocket源。
在Path选项卡上的Path字段中添加目标端点。
- 如前所述，Golioth API键接口指示路径。我正在访问流数据，所以我也附加了它:/项目/环境监控/流
使用Fields选项卡从端点的JSON包中选择数据。
- 我已经格式化了我的字段来捕获一个数据和时间戳:.result.data.data.environment.temp美元
  .result.data.timestamp美元

这是一个小组的例子: