博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
在VUE中利用MQTT协议实现即时通讯
阅读量:6091 次
发布时间:2019-06-20

本文共 1420 字,大约阅读时间需要 4 分钟。

前言

建议先阅读:

以前尝试在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()))})

转载请注明出处 ; )

你可能感兴趣的文章
Telegraf+Influxdb+Grafana构建监控平台
查看>>
使用excel 展现数据库内容
查看>>
C#方法拓展
查看>>
MySql.Data.dll的版本
查看>>
Linux系统磁盘管理
查看>>
hdu 2191 (多重背包+二进制优化)
查看>>
home.php
查看>>
neo4j---删除关系和节点
查看>>
redis分布式锁redisson
查看>>
什么样的企业可以称之为初创企业?
查看>>
Python爬虫之BeautifulSoup
查看>>
《HTML 5与CSS 3权威指南(第3版·下册)》——第20章 使用选择器在页面中插入内容...
查看>>
如何判断自己适不适合做程序员?这几个特点了解一下
查看>>
newinstance()和new有什么区别
查看>>
android下载封装类
查看>>
[node] 用 node-webkit 开发桌面应用
查看>>
Nginx访问控制和虚拟主机
查看>>
report widget not working for external users
查看>>
windows phone 摄像头得到图片是旋转90°
查看>>
Linux--sed使用
查看>>