实例:使用MQTT进行交互

JavaScript034

实例:使用MQTT进行交互,第1张

最近在着手研究使用网页控制硬件的交互过程,发现mqtt协议有很多种语言的封装,整个思路也很清晰,就是一个客户端进行发布和订阅+服务器中间代理的过程,于是开始学习使用MQTT框架搭建交互平台。

客户端使用了MQTT.js,服务器使用mosca(基于nodejs)。

QoS在MQTT中有(摘自 MQ 遥测传输 (MQTT) V3.1 协议规范 ):

MQTT.js只是支持了MQTT协议,并没有支持QoS,也就是说,只支持最低级别的“至多一次”(QoS0)。

在MQTT协议中,一个MQTT数据包由:固定头(Fixed header)、可变头(Variable header)、消息体(payload)三部分构成。

这里只了解消息体,固定头和可变头并不需要我们手动写。

payload消息体包含CONNECT、SUBSCRIBE、SUBACK、UNSUBSCRIBE四种类型的消息:

(1)Connect    与服务器建立连接。

(2)Disconnect    与服务器断开TCP/IP会话。

(3)Subscribe    订阅。

(4)UnSubscribe    取消订阅。

(5)Publish    发送消息请求,发送完成后返回应用程序线程。

二、实现(具体的API稍后呈现)

第一步:

参考此库官方说明:https://github.com/mqttjs/MQTT.js#browserify

npm install -g webpack // install webpack

cd node_modules/mqtt

npm install . // install dev dependencies

webpack mqtt.js ./my_mqtt.js --output-library-target commonjs2

第二步:

将生成的my_mqtt.js文件里所有的:

(function() { return this}())

替换为:

window

第三步:

在my_mqtt.js文件顶部加上代码:

var setImmediate = setTimeout

var clearImmediate = clearTimeout

var socketOpen = false

var socketMsgQueue = []

function sendSocketMessage(msg) {

console.log('send msg:', typeof msg)

console.log(msg)

if (socketOpen) {

wx.sendSocketMessage({

data: msg

})

} else {

socketMsgQueue.push(msg)

}

}

var document = {

URL: ''

}

var window = {

setTimeout: setTimeout,

clearTimeout: clearTimeout,

WebSocket: function (url) {

console.log('call window WebSocket', arguments)

var ws = {

send: sendSocketMessage,

close: wx.closeSocket,

onopen: null,

onmessage: null,

onclose: null,

onerror: null

}

wx.connectSocket({ url: url })

wx.onSocketOpen(function (res) {

console.log('收到onopen事件:', arguments)

socketOpen = true

for (var i = 0i <socketMsgQueue.lengthi++) {

sendSocketMessage(socketMsgQueue[i])

}

socketMsgQueue = []

ws.onopen &&ws.onopen.apply(ws, arguments)

})

wx.onSocketMessage(function (res) {

console.log('收到onmessage事件:', arguments)

console.log(res.data)

ws.onmessage &&ws.onmessage.apply(ws, arguments)

})

wx.onSocketClose(function () {

console.log('收到onclose事件:', arguments)

ws.onclose &&ws.onclose.apply(ws, arguments)

})

wx.onSocketError(function () {

console.log('收到onerror事件:', arguments)

ws.onerror &&ws.onerror.apply(ws, arguments)

})

return ws

}

}

//引入mqtt的js包

var mqtt=require('../../utils/mqtt.min.js')

var client=null

Page({

  /**

   * 页面的初始数据

   */

  data: {

  },

  onLoad() {

  this.connectmqtt()

  },

  connectmqtt:function(){

   var that=this

   const options={

     connectTimeout:4000,//连接延时

     clientId:"PonyRemoteControl"+Math.ceil(Math.random()*10),    //昵称

     port:8084,//端口

     username:'',

     password:''

   }

   client=mqtt.connect('wxs://mqtt.****.cc/mqtt',options)//连接mqtt

   client.on('connect',(e)=>{

     console.log('服务器连接成功')

     client.subscribe('EquipmentEnd_RemoteControlCar',{qos:0},function(err){

       if (!err) {

         console.log('订阅成功')

        }

     })

   })

   //信息监听事件

   client.on('message',function(topic,message){

     console.log('收到:'+message.toString())

   })

   client.on('reconnect',(error)=>{

     console.log('正在重连中',error)

   })

   client.on('error',(error)=>{

    console.log('连接失败',error)

  })

  }

})