20、使用WebSockets实现浏览器与NodeMCU的实时数据交互

使用WebSockets实现浏览器与NodeMCU的实时数据交互

1. 引言

在某些场景下，我们希望通过互联网浏览器直接控制数据采集硬件，利用JavaScript将用户界面实现为交互式网页。这样，即使是连接到网络的智能手机也能实时控制数据采集和显示。然而，由于安全问题，普通套接字无法从浏览器访问。这时，我们可以使用WebSockets，它允许微控制器和浏览器之间交换基于文本的简单消息。

2. WebSockets与JSON消息

WebSockets使用JavaScript对象表示法（JSON）来格式化文本消息，所有数据都由键值对指定，并用花括号括起来。例如，从微控制器发送单个温度值的格式为 {"TEMP":"27.2"} ，还可以在同一消息中添加多个键值对，如 {"X":"17", "Y":"4"} ，或通过 {"DATA":"[17","4"]} 发送数组。

3. 硬件与系统概述

为了说明通信过程，我们使用连接了LM35温度传感器的NodeMCU微控制器。NodeMCU需要同时处理多项任务：提供网页的HTML文件、监听来自浏览器的请求以及定期测量温度。我们将使用Arduino IDE的库管理器安装 WebSockets 和 ArduinoJSON 库。

3.1 NodeMCU端代码实现

3.1.1 环境配置与变量声明

首先，我们定义网络凭证，添加对WiFi、Web服务器和WebSockets服务器的支持，以及用于解码JSON消息和SPIFF