如何在uniapp项目中使用mqtt
网络编程 2021-07-04 14:07www.168986.cn编程入门
本文给大家分享uniapp中引入mqtt的全过程,在uniapp项目根目录下分别运行安装mqtt和uuid的命令行,因为后面会用uuid生成mqtt的clientId,文中给大家介绍mqtt和uuid安装过程,感兴趣的朋友跟随长沙网络推广一起学习下吧
由于要取一些实时数据并在手机app上展示,就想到用mqtt进行即时通讯。
狼蚁网站SEO优化附上uniapp中引入mqtt的全过程:
一、uniapp插件市场的参考插件
二、具体引入过程
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 { ic: '' //要订阅的主题 } }, 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.ic, function(err) { if (!err) { console.log('订阅成功') } }) }).on('reconnect', function(error) { console.log('正在重连...', that.ic) }).on('error', function(error) { console.log('连接失败...', error) }).on('end', function() { console.log('连接断开') }).on('message', function(ic, message) { console.log('接收推送信息:', message.toString()) }) } } } </script>
3.运行结果
数据实时变化。
以上就是uniapp中使用mqtt的方法分享。
以上就是如何在uniapp项目中使用mqtt的详细内容,更多关于uniapp使用mqtt的资料请关注狼蚁SEO其它相关文章!
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程