uniapp中关于mqtt的使用总结

最新推荐文章于 2024-07-16 11:10:43 发布

前端菜鸟啊辉

最新推荐文章于 2024-07-16 11:10:43 发布

阅读量8.9k

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/Mr_xiaopang19/article/details/124269777

版权

本文介绍了如何在项目中使用mqttjs库进行页面通信。首先通过yarn安装mqttjs并选择稳定版3.0.0。然后提供mqtt服务器地址，并确保支持ws层。配置连接选项包括clientId、username和password。在页面中引入mqttjs，根据H5或APP环境连接，并实现订阅、发布消息及错误处理。在页面挂载时调用连接方法完成初始化。

摘要由CSDN通过智能技术生成

最近写了一个项目，其中有个页面需要用到mqtt来通信，以下就是来自我的总结。

先下载mqttjs

yarn add mqtt mqtt@3.0.0

为什么是3.0版本，网上说高版本连接不稳定，那就用稳定版吧；

mqtt在线测试地址，自带一个可连接的mqtt地址；

先要一个mqtt的地址：

export const url = '124.**.***.67:8000/mqtt' //mqtt地址端口

记住要他们配置 broker 开 ws 层，终端是tcp，不然也连不通，/mqtt 是必须的，

mqtt的配置项

// 获取clientId  //h5是获取不到的，我这是只用于APP
// const clientId = plus.push.getClientInfo().clientid;


//配置项
export const options = {
	connectTimeout: 5000,
	clientId, //唯一ID 
	username, //账号 非必填 看你们设置没有
	password, //密码 非必填
	clean: true,
}

到使用mqtt的页面引用，

引入相关文件

import {
   url,
   options,
} from '@/utils/mqtt.js';
   var mqtt = require('mqtt/dist/mqtt.js')
   //申明一个全局变量
   var client;

这里最好用require引入。

创建一个方法

//发送信息
sendMessage(){
//this.switches 主题名称。buffer 发送的参数。可以是字符串 也可以是 Buffer；
    client.publish(this.switches, buffer, (e) => {
   			console.log(e)
   		})
},

connect() {
   	var that = this
                       //h5的连接是 'ws://' + url。
   	// #ifdef H5 
   	client = mqtt.connect('ws://' + url, options)
   	// #endif 
                       //app的连接是 'wx://' + url。
   	//#ifdef MP-WEIXIN||APP-PLUS
   	client = mqtt.connect('wx://' + url, options)
   	// #endif
   	client.on('connect', function() {
   		console.log('连接成功')
                               //that.switches 这是订阅主题名称 和接口地址差不多，是他们定义的，直接拿过来用就行，订阅成功后，就可以接收这个的信息了
   		client.subscribe(that.switches, function(err) {
   			if (!err) {
   				console.log('switches订阅成功')
   			}
   		});
   		client.subscribe(that.drive, function(err) {
   			if (!err) {
   				console.log('drive订阅成功')
   			}
   		});
   	}).on('reconnect', function(error) {
   		console.log('正在重连...', that.switches)
   	}).on('error', function(error) {
   		console.log('连接失败...', error)
   	}).on('end', function() {
   		console.log('连接断开')
   	}).on('message', function(topic, message) {
                       // 统一接受信息。 topic 是订阅的主题名称，message是监听信息的接收和发送都能接收
   		
   	})
   }

页面挂载完毕就调用