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版Serverless系列实例进行获取接入点、创建Topic、创建订阅组、收发消息、查看消息轨迹和仪表盘。
消息队列 MNS 入门课程
1、消息队列MNS简介 本节课介绍消息队列的MNS的基础概念 2、消息队列MNS特性 本节课介绍消息队列的MNS的主要特性 3、MNS的最佳实践及场景应用 本节课介绍消息队列的MNS的最佳实践及场景应用案例 4、手把手系列:消息队列MNS实操讲 本节课介绍消息队列的MNS的实际操作演示 5、动手实验:基于MNS,0基础轻松构建 Web Client 本节课带您一起基于MNS,0基础轻松构建 Web Client
相关文章
|
监控 物联网 Windows
MQTT常见问题之mqtt自动断开了连接如何解决
MQTT(Message Queuing Telemetry Transport)是一个轻量级的、基于发布/订阅模式的消息协议,广泛用于物联网(IoT)中设备间的通信。以下是MQTT使用过程中可能遇到的一些常见问题及其答案的汇总:
|
消息中间件 物联网
MQTT常见问题之mqtt 报 MqttException:客户机未连接如何解决
MQTT(Message Queuing Telemetry Transport)是一个轻量级的、基于发布/订阅模式的消息协议,广泛用于物联网(IoT)中设备间的通信。以下是MQTT使用过程中可能遇到的一些常见问题及其答案的汇总:
|
消息中间件 前端开发 网络性能优化
基于RabbitMQ的MQTT实现
基于RabbitMQ的MQTT实现
694 0
|
NoSQL Java Redis
小白版的springboot中集成mqtt服务(超级无敌详细),实现不了掐我头!!!
小白版的springboot中集成mqtt服务(超级无敌详细),实现不了掐我头!!!
|
消息中间件 Java 物联网
一文搞懂MQTT,如何在SpringBoot中使用MQTT实现消息的订阅和发布
之前介绍了RabbitMQ以及如何在SpringBoot项目中整合使用RabbitMQ,看过的朋友都说写的比较详细,希望再总结一下目前比较流行的MQTT。所以接下来,就来介绍什么MQTT?它在IoT中有着怎样的作用?如何在项目中使用MQTT?
18614 62
一文搞懂MQTT,如何在SpringBoot中使用MQTT实现消息的订阅和发布
|
10月前
|
JSON 资源调度 网络性能优化
vue3中使用mqtt数据传输(封装)
vue3中使用mqtt数据传输(封装)
487 4
|
11月前
ThreeJs通过射线获取自己的点击位置坐标
这篇文章详细说明了如何使用Three.js来绘制线条,包括创建线几何体、设置材质以及将线条添加到3D场景中的具体步骤。
392 1
ThreeJs通过射线获取自己的点击位置坐标
|
11月前
Threejs用切线实现模型沿着轨道行驶
这篇文章详细介绍了如何使用Three.js让一个模型沿着预定的曲线路径移动,并保持模型的方向始终沿着路径的切线方向,提供了实现这一效果的具体代码和步骤。
495 1
Threejs用切线实现模型沿着轨道行驶
|
传感器 网络协议 物联网
STM32+ESP8266+MQTT协议连接阿里云物联网平台
STM32+ESP8266+MQTT协议连接阿里云物联网平台
14386 4
STM32+ESP8266+MQTT协议连接阿里云物联网平台
|
11月前
|
前端开发
ThreeJs通过canvas和Sprite添加标签
这篇文章介绍了在Three.js中利用Canvas和Sprite实现动态文本标签的方法,使得标签可以跟随模型并在3D空间中始终保持面向摄像机。
471 0
ThreeJs通过canvas和Sprite添加标签