# 十一、通过在 IBM 云中创建服务器端应用来可视化数据

在本章中，我们将使用 Node-RED 创建一个服务器应用来可视化已经从物联网边缘设备发送的数据。 对于服务器端应用，我想在这里使用 IBM Cloud。 通过本章中的教程，您将掌握如何在服务器应用上可视化传感器数据。

让我们从以下几个话题开始:

*   准备一个公共 MQTT 代理服务
*   在边缘设备上从 Node-RED 发布数据
*   在云端 Node-RED 上订阅和可视化数据

本章结束时，您将掌握如何在云平台上可视化传感器数据。

## 技术要求

要在本章取得进展，你需要具备以下条件:

*   IBM 云帐户:[https://cloud.ibm.com/](https://cloud.ibm.com/)
*   一个 clouddmqtt 账户:[https://cloudmqtt.com/](https://cloudmqtt.com/)
*   本章使用的代码可在**第十一章**文件夹[https://github.com/PacktPublishing/-Practical-Node-RED-Programming](https://github.com/PacktPublishing/-Practical-Node-RED-Programming)中找到。

## 准备公共 MQTT 代理服务

回想上一章，[第十章](10.md#十处理树莓派的传感器数据)，*处理树莓派*上的传感器数据。 我们将与边缘设备(树莓派)相连的温湿度传感器的数据发送到云端，并确认云侧可以观测到数据。

在前一章中，我们检查了如何使用名为**mosquito 的服务操作 MQTT 代理到**。 这是为了将数据从边缘设备发送到 MQTT 代理。

然而，这是一个机制，所有事情都在树莓派上本地完成。 本质上，在尝试实现物联网机制时，MQTT 代理应该位于公共位置，并且可以通过 internet 从任何地方访问。

您可以在公共云中托管自己的**mosquito to**MQTT 代理，但这会在设置和维护它方面增加一些额外的复杂性。 有许多可用的公共 MQTT 服务可以使启动变得更容易。

在本章中，我们将为 MQTT 代理使用一个名为**clouddmqtt**的服务，但是您可以用您喜欢的服务替换 MQTT 代理部分。 您还可以在 IaaS 上发布自己的 MQTT 代理，例如**mosquito 到**，而不是使用 SaaS:

![Figure 11.1 – CloudMQTT overview  ](img/Figure_11.1_B16353.jpg)

图 11.1 - clouddmqtt 概述

重要提示: MQTT 代理是一个服务器，它接收来自发布者的消息并将其发送给订阅者。在 PubSub 中传递消息的服务器称为 MQTT 代理。

PubSub 是*Publisher*和*Subscriber*的合成词:

 a)出版商是传递信息的人。

 b)订阅者是订阅消息的人。

 您可以将其看作是接收来自客户机的消息并将其分发给客户机的服务器。
 
 MQTT 与普通套接字通信的不同之处在于它是在一对多的基础上进行通信的。 换句话说，它具有一种将一个客户机的消息分发给许多人的机制。 这个系统使我们能够同时实时地向许多人传递信息。

现在我们将学习如何准备**clouddmqtt**。 如前所述，**CloudMQTT**是作为 SaaS 发布的 MQTT 代理。 如果不使用**clouddmqtt**，而希望使用另一个 SaaS MQTT 代理或在 IaaS 上发布 MQTT 代理，则可以跳过此步骤。 但是，使用 MQTT 代理的基本配置信息保持不变，因此我相信这一步将帮助您配置任何 MQTT 代理。

执行以下步骤在**CloudMQTT**上创建 MQTT 代理服务:

1.  Log in to **CloudMQTT** at [https://cloudmqtt.com/](https://cloudmqtt.com/).

    访问网站时，点击窗口右上方的**登录**按钮:

    ![Figure 11.2 – CloudMQTT website ](img/Figure_11.2_B16353.jpg)

    图 11.2 - CloudMQTT 网站

    如果您已经有了您的 clouddmqtt 帐户，通过输入您的电子邮件地址和密码登录您的帐户:

    ![Figure 11.3 – Logging in to CloudMQTT ](img/Figure_11.3_B16353.jpg)

    图 11.3 -登录 clouddmqtt

    如果您还没有账号，请通过窗口底部的**注册**按钮创建一个新账号:

    ![Figure 11.4 – Creating your account ](img/Figure_11.4_B16353.jpg)

    图 11.4 -创建您的帐户

2. 创建实例:

    登录之后，点击窗口右上角的**创建新实例（Create New Instance）**按钮。

    ![Figure 11.5 – Creating a new instance ](img/Figure_11.5_B16353.jpg)

    图 11.5 -创建一个新实例

3.  选择名称和付款方案:

    这是你的 **MQTT 代理服务** 名称，你可以自定义任意名称。我这里使用的是 **Packt MQTT Broker**。

    遗憾的是，免费套餐 **Cute Cat（可爱猫咪）** 现已不可用。因此我们将选择最便宜的套餐 **Humble Hedgehog（谦逊刺猬）**，该套餐费用为 **5 美元/月**。

    是否使用这项付费服务由你决定。如果你想避免产生费用，需要寻找其他免费的 MQTT 代理服务。

    选择好名称与付费套餐后，点击 **Select Region（选择区域）** 按钮：

    ![Figure 11.6 – Selecting a name and payment plan ](img/Figure_11.6_B16353.jpg)

    图 11.6 -选择名称和支付计划

4.  选择区域和数据中心:

    该服务运行在**AWS**上。 因此，您可以选择数据中心所在的区域。 您可以选择任何地区。 这里我们使用的是**US-East-1**。

5.  选择完成后，点击**查看（Review）**按钮：

    ![Figure 11.7 – Selecting a region and data center ](img/Figure_11.7_B16353.jpg)

    图 11.7 -选择区域和数据中心

6.  接下来，完成 MQTT 代理实例的创建:

    请检查付款方案、服务名称、服务提供商以及数据中心区域。
    确认无误后，点击**创建实例（Create instance）**按钮，完成该实例的创建。

![Figure 11.8 – Finalizing MQTT broker instance creation ](img/Figure_11.8_B16353.jpg)

图 11.8 -完成 MQTT 代理实例创建

## 在边缘设备上从 Node-RED 发布数据

### 简体中文翻译：

在本节中，我们将对树莓派（Raspberry Pi）进行配置。首先，启动树莓派并打开 Node-RED 流程编辑器。
该 Node-RED 流程编辑器中应仍保留[**第10章 在树莓派上处理传感器数据**](10.md#十处理树莓派的传感器数据)中实现的、用于向服务器发送传感器数据的流程。
如果你已删除该流程，或尚未创建，请参照[**第10章 在树莓派上处理传感器数据**](10.md#十处理树莓派的传感器数据)重新操作。

双击构成该流程的 **mqtt out 节点**，打开设置窗口。
上一次我们使用了 Mosquitto，而本次将连接至 CloudMQTT。

执行以下步骤配置树莓派上的 Node-RED 连接到 clouddmqtt:

1.  访问你在 [*第十章*](10.md#从树莓派上的传感器模块获取传感器数据), *从树莓派上的传感器模块获取传感器数据 Handling Sensor Data on the Raspberry Pi* 中创建的流程。

    在本章中，我们只使用带有**mqtt out**节点的流，因为这个场景仅用于向树莓派发送数据:

    ![Figure 11.9 – Accessing the flow we created in the previous chapter ](img/Image86736.jpg)

    图 11.9 -访问我们在前一章中创建的流

2.  编辑 **mqtt out** 节点：

    现在我们需要编辑连接配置。 双击**mqtt out**节点打开设置窗口:

    ![Figure 11.10 – Opening the settings window of the mqtt out node ](img/Figure_11.10_B16353.jpg)

    图 11.10 -打开 mqtt out 节点的设置窗口

    设置连接到 clouddmqtt 的配置。

    设置**Topic**、**Qos**、**保持**值如下:

    *   **Topic**:**pack**
    *   **Qos**:**1**
    *   **Retain**:**true**

3.  点击**服务器（Server）**右侧的**编辑（Edit）**按钮（铅笔图标），打开凭证属性窗口。

    ![Figure 11.11 – Clicking the Edit button to open the Properties settings  ](img/Figure_11.11_B16353.jpg)

    图 11.11 -单击 Edit 按钮打开属性设置

4.  在服务器设置面板上，选择**Connection**选项卡，按如下方式填写每个属性:
    *   **Server**:**driver.cloudmqtt.com**
    *   **Port**: **18913**

        不应该更改**Connection**选项卡中的其他属性，必须保持其默认值。

        **Connection**选项卡设置参考如下截图:

![Figure 11.12 – MQTT broker server settings ](img/Figure_11.12_B16353.jpg)

图 11.12 - MQTT 代理服务器设置

5.  接下来，选择**Security**选项卡到编辑配置以连接 MQTT 代理，并按如下方式填写每个属性:
    *   **用户名**:您从 CloudMQTT 获得的用户。
    *   **Password**: The password that you got from CloudMQTT.

        **Security**选项卡设置参考如下截图:

![Figure 11.13 – MQTT broker user and password settings ](img/Figure_11.13_B16353.jpg)

图 11.13 - MQTT 代理用户和密码设置

您可以在 clouddmqtt 管理菜单中检查这些属性。 这个菜单可以通过 clouddmqtt 仪表板的 Instances 列表来访问:[https://customer.cloudmqtt.com/instance](https://customer.cloudmqtt.com/instance)

![Figure 11.14 – CloudMQTT Instances list ](img/Figure_11.14_B16353.jpg)

图 11.14 - clouddmqtt 实例列表

这就完成了树莓派一侧的设置。 接下来，让我们设置 Node-RED 流编辑器，以便在云端使用 Node-RED 获取(订阅)数据。

## 在云端 Node-RED 上订阅和可视化数据

在本节中，我们将学习如何在云端使用 Node‑RED 对接收到的数据进行可视化展示。
这会用到我们在[**第六章 在云端部署 Node‑RED**](06.md#六云中实现的-node-red)中学过的一个仪表板节点，不过这次我们将选择**仪表盘（Gauge）**界面，让展示效果更美观一些。

这次使用的云端 Node-RED 运行在 IBM Cloud (PaaS)上，但是之前创建服务作为 MQTT 代理的 CloudMQTT 是一种不同于 IBM Cloud 的云服务。

在本章中，我们将了解存在 MQTT 代理，以便可以从不同的地方访问它，发布者(数据发布者)和订阅者(数据接收者)都可以使用它，而不需要知道它在哪里。

### IBM 云上准备 Node-RED

现在，让我们通过执行以下步骤创建一个连接到 CloudMQTT 的 Node-RED 流。 这里，我们将在 IBM 云上使用 Node-RED。 请注意，它是不是树莓派上的 Node-RED:

1.  打开 Node-RED 流编辑器，登录到 IBM Cloud，并调用已经从仪表板创建的 Node-RED 服务。
2.  在控制面板的**资源摘要（Resource summary）**卡片中，点击**查看全部（View all）**或**Cloud Foundry 服务（Cloud Foundry services）**。
点击任一选项，都会进入你在 IBM Cloud 上创建的资源列表。

    ![Figure 11.15 – Opening the resource list ](img/Figure_11.15_B16353.jpg)

    图 11.15 -打开资源列表

如果您还没有在 IBM 云上创建 Node-RED 服务，请参考[*第六章*](06.md#在云上运行-node-red)，*在云中实现 Node-RED 服务*，在继续之前创建一个。

3.  在**资源列表（Resource list）**界面中显示的 **Cloud Foundry 应用（Cloud Foundry apps）** 下方，点击你创建的 **Node-RED 服务**，以打开 **Node-RED 流程编辑器**

    ![Figure 11.16 – Selecting the Node-RED service you created ](img/Figure_11.16_B16353.jpg)

    图 11.16 -选择您创建的 Node-RED 服务

4.  然后，点击 **访问应用地址（Visit App URL）** 以打开 Node-RED 流程编辑器:

    ![Figure 11.17 – Clicking Visit App URL ](img/Figure_11.17_B16353.jpg)

    图 11.17 -单击 Visit App URL

5.  当显示 Node‑RED 流程编辑器的顶部界面时，点击 **前往你的 Node‑RED 流程编辑器（Go to your Node‑RED flow editor）** 按钮，打开 Node‑RED 流程编辑器:

    ![Figure 11.18 – Clicking the Go to your Node-RED flow editor button ](img/Figure_11.18_B16353.jpg)

    图 11.18 -单击 Go to your Node-RED 流编辑器按钮

6.  创建一个流程来实现数据可视化:

    当你在 IBM Cloud 上打开 Node‑RED 流程编辑器后，请按照以下步骤创建流程：
    放置 **mqtt in** 节点、**json** 节点、两个 **change** 节点，并在每个 change 节点后放置 **gauge** 节点。
    如果你需要查看该流程的调试日志，请在任意节点后添加 **debug** 节点。在本示例中，分别在 **mqtt in** 节点和第一个 **change** 节点后放置了两个 debug 节点。

    你已经安装了包含 gauge 节点在内的仪表板节点。如果尚未安装，请返回[第六章 在云端部署 Node‑RED ](06.md#为用例-2-制作流程可视化数据)中**为用例2——数据可视化创建流程**的教程，按照说明安装仪表板节点。

    ![Figure 11.19 – Making a flow  ](img/Figure_11.19_B16353.jpg)

    图 11.19 -形成流

7. 编辑 **mqtt in** 节点。双击 **mqtt in** 节点打开设置窗口，按以下值设置 **Topic**、**Qos** 和 **Output**：

- **Topic**: packt
- **Qos**: 1
- **Output**: auto-detect (string or buffer) 自动检测（字符串或缓冲区）

8.  点击**服务器（Server）**右侧的**编辑（Edit）**按钮（铅笔图标），打开凭证属性:

    ![Figure 11.20 – Clicking the Edit button to open the Properties settings ](img/Figure_11.20_B16353.jpg)

    图 11.20 -单击 Edit 按钮打开属性设置

9. 在服务器设置面板中，选择**连接（Connection）**选项卡，并按以下值填写各项属性：
- **服务器（Server）**：driver.cloudmqtt.com
- **端口（Port）**：18913

连接选项卡中的其他属性**请勿修改**，必须保持默认值。
你可以参考下面的截图进行连接选项卡的设置。

![Figure 11.21 – MQTT broker server settings ](img/Figure_11.21_B16353.jpg)

图 11.21 - MQTT 代理服务器设置

10. 接下来，选择**安全（Security）**选项卡，编辑用于连接 MQTT 服务器的配置，并按以下值填写各项属性：

- **用户名（Username）**：你从 CloudMQTT 获取的用户。
- **密码（Password）**：你从 CloudMQTT 获取的密码。

你可以参考下面的截图进行安全选项卡的设置。

![Figure 11.22 – MQTT broker user and password settings ](img/Figure_11.22_B16353.jpg)

图 11.22 - MQTT 代理用户和密码设置

您可能已经注意到，这些属性与您为 Raspberry Pi node - red 上的**mqtt 输出**节点设置的值相同。 如有必要，请参考 clouddmqtt 仪表板。

11. 现在编辑 **json** 节点。双击 **json** 节点打开设置窗口，在**操作（Action）**中选择**在 JSON 字符串与对象之间转换（Convert between JSON String & Object）**，并在**属性（Property）**中设置为 **msg.payload**:

    ![Figure 11.23 – Setting the json node properties ](img/Figure_11.23_B16353.jpg)

    图 11.23 -设置 json 节点属性

12. 编辑 **change** 节点的设置。双击第一个 change 节点打开设置窗口，然后在**规则（Rules）**区域下方的对应输入框中设置为 `msg.payload.temperature`。完成后点击 **Done（完成）** 按钮关闭设置窗口。

    ![Figure 11.24 – Setting the properties of the first change node ](img/Figure_11.24_B16353.jpg)

    图 11.24 -设置第一个更改节点的属性

13. 同样，编辑第二个 change 节点的设置。双击第二个 change 节点打开设置窗口，在**规则（Rules）**区域的对应输入框中设置为 `msg.payload.humidity`，然后点击 **Done（完成）** 按钮关闭设置窗口。

    ![Figure 11.25 – Setting the properties of the second change node ](img/Figure_11.25_B16353.jpg)

    图 11.25 -设置第二个变更节点的属性

14. 编辑第一个 **gauge** 节点的设置。双击第一个 gauge 节点打开设置窗口，然后点击 **Group**（分组）右侧的 **Edit**（编辑）按钮（铅笔图标）以打开属性设置：

    ![Figure 11.26 – Clicking the Edit button to open the Properties settings ](img/Figure_11.26_B16353.jpg)

    图 11.26 -单击 Edit 按钮打开 Properties 设置

15. 在仪表板的分组设置面板中，按以下值填写各项属性：

- **名称（Name）**：Raspberry Pi Sensor data（树莓派传感器数据）

* 此处填写任意名称均可，该名称将显示在我们即将创建的图表网页上。

其他属性请勿修改，必须保持默认值。你可以参考下面的截图：

![Figure 11.27 – Setting the group name ](img/Figure_11.27_B16353.jpg)

图 11.27 -设置组名

16. 返回仪表（gauge）节点设置的主面板，并按以下值填写各项属性：

- **类型（Type）**：Gauge（仪表）
- **标签（Label）**：Temperature（温度）
- **单位（Units）**：°C（若你更倾向使用华氏度，请填写 °F）
- **范围（Range）**：-15 ~ 50（若使用华氏度，请相应调整范围）

其他属性请勿修改，保持默认值即可。你可以参考下面的截图进行设置。

![Figure 11.28 – Setting the gauge node properties ](img/Figure_11.28_B16353.jpg)

图 11.28 -设置度量节点属性

17. 编辑第二个仪表（gauge）节点的设置。双击第二个 gauge 节点打开设置窗口，然后选择上一步中你创建的**相同分组名称**。按以下值填写各项属性：

- **类型（Type）**：Gauge（仪表）
- **标签（Label）**：Humidity（湿度）
- **单位（Units）**：%
- **范围（Range）**：0～10

  其余属性请勿修改，保持默认值即可。你可以参考下面的截图进行设置:

![Figure 11.29 – Setting the gauge node properties ](img/Figure_11.29_B16353.jpg)

图 11.29 -设置规范节点属性

请确保在 Node-RED 上部署流。

这就完成了 IBM Cloud 上的 Node-RED 配置。 这意味着该流已经使用主题**包**订阅了 clouddmqtt 服务(等待数据)。 接下来，是发布和订阅数据的时候了。

### IBM 云中数据的可视化

在设备的边缘，在树莓派上，我们准备将传感器数据与主题**包**一起发布到 clouddmqtt。 在云计算方面，流已经包含了 clouddmqtt 服务的**包**主题。

对于树莓派，执行以下步骤来发布您的数据:

1.  从你的树莓派发布数据:

    在树莓派上访问 Node-RED 流编辑器。 点击**inject**节点的按钮，运行此流，发布树林温湿度传感器数据:

    ![Figure 11.30 – Running the flow for publishing data ](img/Figure_11.30_B16353.jpg)

    图 11.30 -运行发布数据的流

2.  在 IBM Cloud 上检查数据是否已接收:

    您将能够通过 CloudMQTT 接收(订阅)数据。 您可以在 IBM Cloud 上 Node-RED 流编辑器的**debug**选项卡上检查:

    ![Figure 11.31 – Checking the subscribing of the data ](img/Figure_11.31_B16353.jpg)

    图 11.31 -检查数据的订阅

3.  3. 通过 IBM Cloud 中 Node‑RED 流程编辑器上的图表选项卡打开图表网页，然后点击打开按钮（斜向箭头图标）将其打开：

![Figure 11.32 – Opening the chart web page ](img/Figure_11.32_B16353.jpg)

图 11.32 -打开图表网页

你会看到网页测量图表显示的数据:

![Figure 11.33 – The chart web page is displayed ](img/Figure_11.33_B16353.jpg)

图 11.33 -显示图表网页

恭喜你! 现在您知道了如何观察服务器上树莓派发送的数据，并将其可视化为一个图表。

如果您希望流配置文件在您的 Node-RED 上创建流，您可以在这里获取:[https://github.com/PacktPublishing/-Practical-Node-RED-Programming/blob/master/Chapter11/getting-sensordata-with-iotplatform.json](https://github.com/PacktPublishing/-Practical-Node-RED-Programming/blob/master/Chapter11/getting-sensordata-with-iotplatform.json)。

## 小结

在本章中，我们体验了如何接收从边缘设备发送的传感器数据并在服务器端可视化它。

在本章中，我们在 IBM Cloud 上使用了 CloudMQTT 和 Node-RED。 Node-RED 可以运行在任何云平台和本地，您可以尝试在任何环境中创建这种应用。 这就是为什么记住这个模式肯定会对您未来开发其他云物联网平台有帮助。

在下一章中，我们将看看使用 Node-RED 创建聊天机器人应用的实际操作场景。 这将向您介绍一种使用 Node-RED 的新方法。