uniapp 全局变量(如何在uniapp项目中使用mqtt)
类别:编程学习 浏览量:701
时间:2022-04-02 10:11:11 uniapp 全局变量
如何在uniapp项目中使用mqtt目录
- 一、uniapp插件市场的参考插件
- 二、具体引入过程
- 1.安装mqtt和uuid
- 2.页面引入mqtt并调用
- 3.运行结果
由于要取一些实时数据并在手机app上展示,就想到用mqtt进行即时通讯。
下面附上uniapp中引入mqtt的全过程:
一、uniapp插件市场的参考插件https://ext.dcloud.net.cn/plugin?id=854
二、具体引入过程1.安装mqtt和uuid
在uniapp项目根目录下分别运行安装mqtt和uuid的命令行,因为后面会用uuid生成mqtt的clientId,所以这边就一起安装了。
npm install mqtt@3.0.0 npm install uuid
Ps.
①我这里和uniapp提供的插件安装的mqtt版本一样,我也尝试装了最新的版本,会报错,emmmmm...........
②如果没有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里面,全局可用。
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() {this.connect() //连接 }, methods: { connect() { MQTT_OPTIONS.clientId = v4() var that = this // #ifdef H5 client = mqtt.connect('ws://' + MQTT_IP, MQTT_OPTIONS) // #endif // #ifdef MP-WEIXIN||APP-PLUS client = mqtt.connect('wx://' + MQTT_IP, MQTT_OPTIONS) // #endif client.on('connect', function() { console.log('连接成功') client.subscribe(that.topic, function(err) { if (!err) { console.log('订阅成功') } }) }).on('reconnect', function(error) { console.log('正在重连...', that.topic) }).on('error', function(error) { console.log('连接失败...', error) }).on('end', function() { console.log('连接断开') }).on('message', function(topic, message) { console.log('接收推送信息:', message.toString()) }) } } } </script>
3.运行结果
数据实时变化。
以上就是uniapp中使用mqtt的方法分享。
以上就是如何在uniapp项目中使用mqtt的详细内容,更多关于uniapp使用mqtt的资料请关注开心学习网其它相关文章!
您可能感兴趣
- yii与uniapp交互(Yii框架的路由配置方法分析)
- uni app 小程序全局样式没法用(uniapp封装小程序雷达图组件的完整代码)
- uni app开发教程(uniapp+Html5端实现PC端适配)
- uniapp使用vue写页面(分析uniapp入门之nvue爬坑记)
- uni-app项目开发教程学习(分析uniapp如何动态获取接口域名)
- uniapp 全局变量(如何在uniapp项目中使用mqtt)
- uniapp 动态表单(详解uniapp无痛刷新token方法)
- 微信小程序可以用百度的echarts吗(uniapp在微信小程序中使用ECharts的方法)
- 王治郅菜鸟赛季已让八一带入正轨,大郅七大经典语录或是成功秘诀(王治郅菜鸟赛季已让八一带入正轨)
- 庆八一,重读经典红色语录,感悟互联网发展硬道理(重读经典红色语录)
- TVB新剧《黯夜守护者》将播,陈展鹏陈炜首次合作探讨人性(TVB新剧黯夜守护者将播)
- 新晋小花被称女版吴卓羲 将取代滕丽名成为TVB新一代御用女警(新晋小花被称女版吴卓羲)
- 艺人吴卓羲10年警察生涯,演足10年阿Sir,系咩玩法(艺人吴卓羲10年警察生涯)
- 菲律宾潜水(菲律宾潜水价格)
热门推荐
- 如何检查css 兼容性(CSS浏览器兼容性常见问题总结大全推荐)
- C#中ICollection介绍
- idea里面怎么配置tomcat(intellij idea 使用Tomcat部署的项目位置在哪)
- laravel查询限制输出设置(laravel validate 设置为中文的例子验证提示为中文)
- mysql有哪些约束(MySQL完整性约束的定义与实例教程)
- python scrapy 框架原理(一步步教你用python的scrapy编写一个爬虫)
- 禁止鼠标右键的JS代码
- python炫酷烟花源代码(python实现浪漫的烟花秀)
- centos linux开机不出现登录页面(在CentOS启动时自动加载内核模块overlayfs操作)
- php的字符串表达方法(php中字符串和整数比较的操作方法)