如何在uniapp项⽬中使⽤mqtt
⽬录
⼀、uniapp插件市场的参考插件
⼆、具体引⼊过程
1.安装mqtt和uuid
2.页⾯引⼊mqtt并调⽤
3.运⾏结果
由于要取⼀些实时数据并在⼿机app上展⽰，就想到⽤mqtt进⾏即时通讯。
下⾯附上uniapp中引⼊mqtt的全过程：
⼀、uniapp插件市场的参考插件
⼆、具体引⼊过程
1.安装mqtt和uuid
在uniapp项⽬根⽬录下分别运⾏安装mqtt和uuid的命令⾏，因为后⾯会⽤uuid⽣成mqtt的clientId，所以这边就⼀起安装了。npm install mqtt@3.0.0
npm install uuid
Ps.
①我这⾥和uniapp提供的插件安装的mqtt版本⼀样，我也尝试装了最新的版本，会报错，
②如果没有pakage.json，安装是会提⽰报错，但是不影响安装使⽤。如果想⽅便⼀点，下次拉代码直接安装的话，可以⾃⼰在项⽬根⽬录下加⼀个pakage.json⽂件，添加如下内容：
{
"name": "",
"version": "1.0.0",
"description": "",
"author": "",
"license": "MIT",
"dependencies": {
"mqtt": "^3.0.0",
"uuid": "^8.3.0"
},
"devDependencies": {},
"scripts": {}
}
2.页⾯引⼊mqtt并调⽤
①mqtt连接配置，放在/utils/mqtt.js⾥⾯，全局可⽤。
flutter uniapp 哪个好export const MQTT_IP = '192.168.9.128:8083/mqtt'//mqtt地址端⼝
const MQTT_USERNAME = 'public'//mqtt⽤户名
const MQTT_PASSWORD = 'public'//密码
export const MQTT_OPTIONS = {
connectTimeout: 5000,
clientId: '',
username: MQTT_USERNAME,
password: MQTT_PASSWORD,
clean: false
}
②vue页⾯引⽤mqtt
mqtt⾥⾯的clientId⽤uuid⽣成唯⼀标识码，防⽌不同页⾯订阅不同主题时数据出现粘连。
<script>
import { v4 } from 'uuid';
import {
MQTT_IP,
MQTT_OPTIONS
} from '@/utils/mqtt.js';
var mqtt = require('mqtt/dist/mqtt.js')
var client
export default {
data() {
return {
topic: '' //要订阅的主题
}
},
mounted() {t() //连接
},
methods: {
connect() {
MQTT_OPTIONS.clientId = v4()
var that = this
// #ifdef H5
client = t('ws://' + MQTT_IP, MQTT_OPTIONS)                // #endif
// #ifdef MP-WEIXIN||APP-PLUS
client = t('wx://' + MQTT_IP, MQTT_OPTIONS)                // #endif
<('connect', function() {
console.log('连接成功')
client.pic, function(err) {
if (!err) {
console.log('订阅成功')
}
})
}).on('reconnect', function(error) {
console.log('正在重连...', pic)
}).on('error', function(error) {
console.log('连接失败...', error)
}).on('end', function() {
console.log('连接断开')
}).on('message', function(topic, message) {
console.log('接收推送信息：', String())
})
}
}
}
</script>
3.运⾏结果
数据实时变化。
以上就是uniapp中使⽤mqtt的⽅法分享。
以上就是如何在uniapp项⽬中使⽤mqtt的详细内容，更多关于uniapp使⽤mqtt的资料请关注其它相关⽂章！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。