MQTT 物联网通信实战（Web端可视化）

实验目的

验证开发板通过 MQTT 协议接入物联网平台的能力，并结合 Web 前端技术，实现高频数据（正弦波）的云端上报与网页端实时可视化展示。

源码获取

源码可通过以下链接获取
通过网盘分享的文件：mqtt-demos.tar.gz
链接: https://pan.baidu.com/s/1JowZavg_WwTZFgvtPZuJYg
提取码: YZJS

前置环境搭建

本实验需在 Ubuntu 虚拟机上搭建本地 MQTT Broker（服务器）。

1. 安装服务：sudo apt install mosquitto
2. 配置 WebSocket 支持：修改 /etc/mosquitto/conf.d/default.conf，添加 listener 1883 0.0.0.0、allow_anonymous true、listener 8083、protocol websockets。
3. 重启服务：sudo systemctl restart mosquitto。

交叉编译说明

(注：本实验依赖 ARM 版本的 libmosquitto 库，需预先交叉编译并放入源码目录)
执行编译命令：

make clean
make CC=arm-linux-gnueabihf-gcc CFLAGS="-I." LDFLAGS="-L." LIBS="-lmosquitto -lm"

测试步骤

1.启动服务端：确保 Ubuntu 端的 mosquitto 服务正常运行（1883 和 8083 端口处于 LISTEN 状态）。

2.运行开发板程序：将程序和 libmosquitto.so.1 传至板子，将库放入 /usr/lib/ 后运行：

./mqtt_sinewave_pub -h 192.168.5.2 -p 1883

3.运行 Web 客户端：

在 Windows 端打开资料包提供的 index.html（建议使用本地 http 服务打开）。

输入服务器 IP 192.168.5.2 和 WebSocket 端口 8083，点击【连接】。

预期现象

开发板端：终端持续打印 send message count: X。
Web 端：状态显示绿色“已连接”，图表区域动态绘制出持续波动的正弦曲线。