前端页面通过Mqtt的websockets方式接收后台主动推送的消息

---

前言

在物联网行业快速发展的今天，mqtt在其中起到了非常关键的作用，在有些场合需要前端能及时收到后台主动发过来的信息，这时使用websockets方式就是一个很好的选择。本文就记录了前端在集成mqtt的过程中，如何进行wesockets模块的使用，并给出关键代码进行演示。

本文测试环境CentOS 7.6。

利用mosquitto的C语言客户端进行编程，通过cJSON或protobuff对消息内容进行格式化传输，并与前端JavaScript进行完全交互系列文章：

第一篇：Mosquitto打开Websockets模块并在Linux下的编译及安装使用
第二篇：cJSON模块在Mqtt代理mosquitto中的使用
第三篇：前端页面通过Mqtt的websockets方式接收后台主动推送的消息

---

一、websocket是什么？

WebSocket是一种在单个TCP连接上进行全双工通信的协议。它使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。幸运的是mqtt的代理网关天生就具备了这种能力，只需要使用者启用该功能即可。

二、使用步骤

1.引入mqtt的前端js版本库

本文使用的是JavaScript版本的MQTT.js，实现了Mqtt协议客户端的功能，可以在浏览器 和 Node.js 环境中使用。由于JavaScript的单线程特性，MQTT.js 是全异步MQTT客户端，支持 MQTT 与 MQTT over WebSocket。qmdr

前端使用者可以通过如下的官方网址或本人提供的压缩版本的js库.

• git clone https://github.com/mqttjs/MQTT.js
• 下载mqtt.min.js

2.前端js代码演示

• 前端接收后台主动推送消息的关键代码逻辑

Global_MQTTCLIENT = null
//websocket服务器地址
var MQTT_SRV_ADDR = 'ws://127.0.0.1:1884/mqtt'
//mqtt连接参数配置
var GLOBAL_OPTIONS = {
    connectTimeout: 30000, // 超时时间
    // 认证信息 按自己需求填写
    clientId: 'web_' + Math.random().toString(16).substr(2, 16),
    username: 'admin',
    password: 'public',
    protocolVersion: 4,
}
//连接mqtt服务器
Global_MQTTCLIENT = mqtt.connect(MQTT_SRV_ADDR, GLOBAL_OPTIONS)
//重连回调
Global_MQTTCLIENT.on('reconnect', (error) => {
        console.log('正在重连MQTT服务器:', error)
 })
 //错误回调
Global_MQTTCLIENT.on('error', (error) => {
        console.log('连接MQTT服务器失败:', error)
        Global_MQTTCLIENT.end()
 })
 //连接回调
Global_MQTTCLIENT.on('connect', (e) => {
        console.log('成功连接MQTT服务器')
        //订阅一个或多个主题
        var subsary = []
        subsary.push('test/control/senddata')
        //订阅消息主题
        Global_MQTTCLIENT.subscribe(subsary, { qos: 0 }, function (err) {
          if (!err) {
            console.log(GLOBAL_OPTIONS.clientId + '订阅成功!')
          } else {
            console.log(GLOBAL_OPTIONS.clientId + '订阅失败!')
          }
        })
})
//断开mqtt服务器的回调
Global_MQTTCLIENT.on('close', function () {
        console.log(GLOBAL_OPTIONS.clientId + ' 断开MQTT服务器的连接!')
})
//订阅消息的接收回调
Global_MQTTCLIENT.on('message', function (topic, message, packet) {          
       if (packet.topic.indexOf('senddata') > 0) {
       	 //接收json格式消息的处理逻辑
          var str = String.fromCharCode.apply(null, packet.payload)
          var jsonobj = JSON.parse(str)          
            var tmpary = {}
            var lname = jsonobj[0].name
            var lsuclass = jsonobj[0].class
            var lscore = jsonobj[0].score             
            }
          //_self.MqttClient.end()
})

• 前端发送json数据的逻辑

var tmpIds = {}
tmpIds.name = '张毅'
tmpIds.class = '一班'
tmpIds.score= 98
Global_MQTTCLIENT.publish(
         'test/control/class',
           JSON.stringify(tmpIds),
           {
             qos: 0,
             retain: false,
           }
 )

---

总结

本文介绍了前端再使用mqtt的websockets方式时，如何与后端的mqtt代理进行JSON格式消息内容的传递，因此一个完整的通过mqtt进行消息的订阅和发布的逻辑已经介绍完成。

如果您对物联网相关方面技术感兴趣，可进群交流，QQ群:541826239