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月前
vue3组件通信(8种)
vue3组件通信(8种)
|
视频直播
【视频直播篇五】vue-cli3集成vue-aliplayer-v2
本文着重介绍vue-cli3集成vue-aliplayer-v2
576 0
|
1月前
|
JavaScript 前端开发 API
一个非常 nb 的 Vue 组件 (含Vue3版本)
一个非常 nb 的 Vue 组件 (含Vue3版本)
|
4月前
|
资源调度 JavaScript 前端开发
【vue】vue中的路由vue-router,vue-cli脚手架详细使用教程
【vue】vue中的路由vue-router,vue-cli脚手架详细使用教程
|
4月前
|
JavaScript API
vue组件通信
vue组件通信
33 3
|
4月前
|
JavaScript 前端开发 API
Vue 数据监听机制及 Vue 2.0 和 Vue 3.0 的比较
Vue 数据监听机制及 Vue 2.0 和 Vue 3.0 的比较
56 1
|
4月前
Vue3集成axios
Vue3集成axios
66 0
|
11月前
|
存储 JavaScript
vue常用组件通信方式及vue2和vue3写法对比(下)
vue常用组件通信方式及vue2和vue3写法对比(下)
89 0
|
11月前
|
JavaScript
vue常用组件通信方式及vue2和vue3写法对比(上)
vue常用组件通信方式及vue2和vue3写法对比
64 0
|
JavaScript 前端开发 IDE
Vue 3.3 发布
Vue 3.3 发布
77 0