在VUE中利用MQTT协议实现即时通讯

前言

建议先阅读：
在Node.js下运用MQTT协议实现即时通讯及离线推送

以前尝试在vue中用上mqtt，了解到mqtt实质上是基于websocket进行数据通信，所以上文中在node下实现的服务端此时不能满足需求

代码

服务端: server.js

let http     = require('http')
, httpServer = http.createServer()
, mosca = require('mosca')

let settings = {
  port: 5112,
  persistence:{
      factory: mosca.persistence.Mongo,
    url: "mongodb://localhost:27017/mosca"
  }
}
let server = new mosca.Server(settings)

server.attachHttpServer(httpServer)
server.on('published', function(packet, client) {
  console.log('Published',  packet.payload.toString());
})
httpServer.listen(3003)
server.on('ready', function(){
  console.log('server is running at port 3003');  
})

服务端mosca的实例化并没有改动
而是将其为websocket形式进行适配

客户端: mqtt.js

let mqtt = require('mqtt')
let client = {}
export default {
  launch(id, callback) {
    client = mqtt('mqtt://ip', {
      port: 3003,
      clientId: id,
      clean: false
    })
    client.on('message', (topic, message) => {
      callback(topic, message)
    })
  },
  end() {
    client.end()
  },
  subscribe(topic) {
    client.subscribe(topic, {qos: 1})
    console.log('subscribe:', topic)
  },
  publish(topic, message) {
    client.publish(topic, JSON.stringify(message), {qos: 1})
  }
}

独立地对mqtt进行简单地封装，方便调用
值得注意的是此时的协议头仍为mqtt，
但mqtt源码会以ws形式进行通信

main.js:
再把mqtt绑到vue原型链上

import mqtt from './api/mqtt'
Vue.prototype.$mqtt = mqtt

现在便可在vue环境中对mqtt进行调用

this.$mqtt.launch(this.user._id, (topic, source) => {
    console.log('message: ', JSON.parse(source.toString()))
})

转载请注明出处 ; )