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
相关文章
|
5月前
|
JavaScript 前端开发 API
一个非常 nb 的 Vue 组件 (含Vue3版本)
一个非常 nb 的 Vue 组件 (含Vue3版本)
|
8月前
|
资源调度 JavaScript 前端开发
「Vue3系列」Vue3简介及安装
Vue3是Vue.js框架的第三个主要版本,于2020年9月18日发布,代号为“One Piece”。Vue3在性能、体积、TypeScript支持、API设计等方面都有显著的提升和改变。
308 2
|
8月前
|
JavaScript 前端开发 API
Vue 数据监听机制及 Vue 2.0 和 Vue 3.0 的比较
Vue 数据监听机制及 Vue 2.0 和 Vue 3.0 的比较
82 1
|
8月前
Vue3集成axios
Vue3集成axios
99 0
|
JavaScript API
盘点Vue2和Vue3的10种组件通信方式(值得收藏)(上)
盘点Vue2和Vue3的10种组件通信方式(值得收藏)(上)
169 0
|
JavaScript API
Vue(Vue2+Vue3)——46.消息订阅与发布(pub/sub)
Vue(Vue2+Vue3)——46.消息订阅与发布(pub/sub)
|
JavaScript
Vue(Vue2+Vue3)——44.全局事件总线、45.TodoList案例_事件总线
Vue(Vue2+Vue3)——44.全局事件总线、45.TodoList案例_事件总线
|
JavaScript 前端开发 开发者
前端Vue入门-day04-用vue实现组件通信
前端Vue入门-day04-用vue实现组件通信
198 0
12-Vue之网络应用axios加vue
12-Vue之网络应用axios加vue
|
JavaScript
vue websocket组件封装
vue websocket组件封装
262 0