vue中使用mqtt

简介: vue中使用mqtt

先定义mqtt需要用到的参数



// mqtt连接参数
const mqttState = {
    url: 'http://xxx.xxx.xx:xxxx',
    clean: true,
    connectTimeout: 3000,
    reconnectPeriod: 0,
    client: "",
    arr: []
}
复制代码


  • url: mqtt的请求路径
  • clean:连接完成后,是否清理连接痕迹

这里有一个坑,注意要clear掉,不然在qos0的时候,会在emq上有很多痕迹的,日积月累,带来的负荷也不小


网络异常,图片无法展示
|


  • connectTimeout: 连接等待时间 单位ms
  • reconnectPeriod: 设置为0,则不会超时重连,主要看具体的业务需求


网络异常,图片无法展示
|


连接mqtt



mqttState.client = mqtt.connect(mqttState.url, {
    'clean': mqttState.clean,
    'connectTimeout': mqttState.connectTimeout,
    'reconnectPeriod': mqttState.reconnectPeriod,
    'clientId': `mqtt_${Math.random().toString(16).slice(3)}`,
    'username': 'XXX',
    'password': 'SSSS'
})
mqttState.client.on('connect', (r, e) => {
    console.log('连接成功')
})
复制代码


  • client_id最好使用随机数,不然会找到曾经的topic,就会串号了。

至此,基本mqtt就已经连接成功了。


一些具体的用法和事例


API



由于公司跟iot硬件相关联系紧密,所以这种长短连接接触不少,很多内容涉及公司机密,不便透露,有问题可以找我沟通,我遇到过或者解决过的,都会倾囊相助的。

相关实践学习
消息队列RocketMQ版:基础消息收发功能体验
本实验场景介绍消息队列RocketMQ版的基础消息收发功能,涵盖实例创建、Topic、Group资源创建以及消息收发体验等基础功能模块。
消息队列 MNS 入门课程
1、消息队列MNS简介 本节课介绍消息队列的MNS的基础概念 2、消息队列MNS特性 本节课介绍消息队列的MNS的主要特性 3、MNS的最佳实践及场景应用 本节课介绍消息队列的MNS的最佳实践及场景应用案例 4、手把手系列:消息队列MNS实操讲 本节课介绍消息队列的MNS的实际操作演示 5、动手实验:基于MNS,0基础轻松构建 Web Client 本节课带您一起基于MNS,0基础轻松构建 Web Client
相关文章
|
4月前
|
JavaScript 前端开发 API
一个非常 nb 的 Vue 组件 (含Vue3版本)
一个非常 nb 的 Vue 组件 (含Vue3版本)
|
7月前
|
资源调度 JavaScript 前端开发
【vue】vue中的路由vue-router,vue-cli脚手架详细使用教程
【vue】vue中的路由vue-router,vue-cli脚手架详细使用教程
136 3
|
7月前
|
JavaScript 前端开发 API
Vue 数据监听机制及 Vue 2.0 和 Vue 3.0 的比较
Vue 数据监听机制及 Vue 2.0 和 Vue 3.0 的比较
76 1
|
JSON JavaScript 前端开发
Vue系列教程(12)- 异步通信(Axios)
Vue系列教程(12)- 异步通信(Axios)
67 0
|
JavaScript API
Vue(Vue2+Vue3)——46.消息订阅与发布(pub/sub)
Vue(Vue2+Vue3)——46.消息订阅与发布(pub/sub)
|
JavaScript API
盘点Vue2和Vue3的10种组件通信方式(值得收藏)(上)
盘点Vue2和Vue3的10种组件通信方式(值得收藏)(上)
167 0
|
JavaScript 前端开发 IDE
Vue3.3 正式发布!
Vue3.3 正式发布!
285 1
|
JavaScript 前端开发 开发者
前端Vue入门-day04-用vue实现组件通信
前端Vue入门-day04-用vue实现组件通信
193 0
|
JavaScript API
盘点Vue2和Vue3的10种组件通信方式(值得收藏)(下)
盘点Vue2和Vue3的10种组件通信方式(值得收藏)(下)
138 0
|
JavaScript IDE 测试技术
Vue2.x-03使用vue-cli搭建Vue开发环境
Vue2.x-03使用vue-cli搭建Vue开发环境
105 0

热门文章

最新文章