前言
建议先阅读:
以前尝试在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()))})
转载请注明出处 ; )