一次性说完MQTT协议，web端如何使用？为什么需要 MQTT？物联网设备的痛点：网络不稳定,设备电量有限,硬件性能低

为什么需要 MQTT？

物联网设备的痛点：网络不稳定,设备电量有限,硬件性能低

传统协议（如HTTP）的缺点:数据包头大，浪费流量必须“一问一答” （设备需保持在线等待回复）频繁通信耗电高

MQTT协议

MQTT是一个基于客户端-服务器的消息发布/订阅传输协议。MQTT被广泛用于物联网(IoT:Internet of Things)领域，其中大量的设备需要进行实时通信和数据交换。

IBM公司的安迪·斯坦福-克拉克及Cirrus Link公司的阿兰·尼普于1999年撰写了该协议的第一个版本。

客户端(订阅端)：是指使用端，如手机app，网页端

服务端(发布端)：代理服务器，指的是中间服务器（中间商）

MQTT协议特点：

轻量级：设计非常轻量，数据量很小，带宽延迟低

简单：协议规范相对简单，易于实现和部署

异步通信：发布者发送消息后，不需要等待接收者的响应，可以继续执行其他操作。

可靠性：有三种不同的安全等级 QoS 0 QoS 1 QoS 2

适应性：适应不稳定，断开后自动重连

角色模型

分工

Subscriber订阅者:收消息的设备（比如手机APP）相当于买家

Publisher发布者:发消息的设备（比如温度传感器）相当于卖家

Topic（主题）：客户端可以订阅该主题的地址

MQTT代理是中间件:中间商，网店，类似“微信群主”，负责转发消息

主题

1.层级结构分类: home/kitchen/temperature（家庭/厨房/温度）

2.订阅时可用通配符: 单层通配（home/+/temperature 匹配 home/kitchen/temperature）多层通配（car/# 匹配所有以 car/ 开头的主题）

安全等级

QoS 0：发完不管（适合不重要数据，如环境噪音监测）

QoS 1：至少收到一次（适合关键数据，如火灾报警）

QoS 2：严格确保只收到一次（适合金融交易等场景）

工作流程

第一步：配置mqtt服务器

1.引入mqtt js文件提供两种方式

    <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>

    npm install mqtt --save

2.mqtt服务ip url:wss://

3.登录账号：username

4.登录密码：password

5.设备id：clientId

第二步：建立连接

    const mqttClient = mqtt.connect('wss://broker.example.com:8884/mqtt', {
        username: 'username',
        password: 'password',
        clientId:'clientId'
        })

第三步：订阅主题

    mqttClient.subscribe('home/+/temperature', { qos: 1 }, (err) => {
        if (!err) console.log('订阅成功')
        })

单层匹配：home/kitchen/temperature

匹配多层：home/# 包含所有子主题

第四步：接收消息

    mqttClient.on('message', (topic, message) => {
        console.log(`收到 [${topic}] 数据: ${message.toString()}`)
        // 更新网页DOM或图表
        })

第五步：发布消息

     document.getElementById('light-btn').addEventListener('click', () => {
        mqttClient.publish('home/living_room/light', 'ON', { qos: 1 })
        })

第六步：保持连接

    mqttClient.on('reconnect', () => {
        console.log('尝试重新连接...')
        })

第七：监听函数

    // 监听消息
        mqttClient.on('message', function (topic, message) {
        console.log("收到信息：" + message)
        update_Status(message.toString());
        });

   //失败重连
        mqttClient.on('error', (e) => {
        console.log("连接服务端失败：",e) }) 

     //报错
        mqttClient.on("error", (error) => {
        console.error("MQTT Error:", error);
        });

    //断开连接
        client.on("close", () => {
        console.log("MQTT connection closed");
        // 断开连接回调
        });

常见问题

必须使用 wss://（WebSocket Secure）协议

默认端口：8883 (WSS) 或 8083 (WS)

需要 Broker 开启 WebSocket 支持（如 EMQX、HiveMQ 等）

心跳机制：自动发送 PING 包（默认 60 秒）

启用 TLS 加密（防止数据被窃听）

设置客户端权限（限制可订阅/发布的主题）

使用 Token 鉴权（如 JWT 动态令牌）

连接报错：WebSocket connection failed 检查 Broker 的 WebSocket 端口是否开放

消息延迟高：降低 QoS 等级（从 2 改为 1）

移动端切换网络后断线：启用自动重连机制，设置 clean: false 保留会话

浏览器兼容性问题：使用 polyfill 库（如 mqttws31.js）

一次性说完MQTT协议，web端如何使用？