前言

建議先閱讀：
在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())) })

轉載請注明出處 ; )

總結

以上是生活随笔為你收集整理的在VUE中利用MQTT协议实现即时通讯的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。