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
相关文章
|
监控 物联网 API
【.NET+MQTT】.NET6 环境下实现MQTT通信,以及服务端、客户端的双边消息订阅与发布的代码演示
MQTT广泛应用于工业物联网、智能家居、各类智能制造或各类自动化场景等。MQTT是一个基于客户端-服务器的消息发布/订阅传输协议,在很多受限的环境下,比如说机器与机器通信、机器与物联网通信等。好了,科普的废话不多说,下面直接通过.NET环境来实现一套MQTT通信demo,实现服务端与客户端的双边消息发布与订阅的功能和演示。
2468 0
【.NET+MQTT】.NET6 环境下实现MQTT通信,以及服务端、客户端的双边消息订阅与发布的代码演示
|
5月前
|
JSON Java 编译器
Protobuf 是什么?一篇文章搞懂这个高性能序列化神器
Protobuf是Google开源的高效二进制序列化协议,体积小、速度快,支持跨语言、向后兼容。相比JSON,更适合RPC等高性能场景,广泛应用于微服务通信。通过`.proto`文件定义结构,自动生成代码,实现数据的快速序列化与反序列化。
2523 158
|
JavaScript 数据格式
vue里使用elementui的级联选择器el-cascader进行懒加载的怎么实现数据回显?
vue里使用elementui的级联选择器el-cascader进行懒加载的怎么实现数据回显?
2454 0
vue里使用elementui的级联选择器el-cascader进行懒加载的怎么实现数据回显?
|
11月前
|
容器
echarts pie 文字格式改为可换行
echarts pie 文字格式改为可换行
1022 0
|
JSON 资源调度 网络性能优化
vue3中使用mqtt数据传输(封装)
vue3中使用mqtt数据传输(封装)
913 4
|
小程序 前端开发 索引
微信小程序中的条件渲染和列表渲染,wx:if ,wx:elif,wx:else,wx:for,wx:key的使用,以及block标记和hidden属性的说明
这篇文章介绍了微信小程序中条件渲染和列表渲染的使用方法,包括wx:if、wx:elif、wx:else、wx:for、wx:key以及block标记和hidden属性的使用。
微信小程序中的条件渲染和列表渲染,wx:if ,wx:elif,wx:else,wx:for,wx:key的使用,以及block标记和hidden属性的说明
|
JavaScript 前端开发 数据可视化
Three.js第2篇,加载glb / gltf模型,Vue加载glb / gltf模型(如何在vue中使用three.js,vue使用threejs加载glb模型)
Three.js 是一个用于在 Web 上创建和显示 3D 图形的 JavaScript 库。它提供了丰富的功能和灵活的 API,使开发者可以轻松地在网页中创建各种 3D 场景、模型和动画效果。可以用来展示产品模型、建立交互式场景、游戏开发、数据可视化、教育和培训等等。这里记录一下如何在Vue项目中使用Three.js
5014 4
Three.js第2篇,加载glb / gltf模型,Vue加载glb / gltf模型(如何在vue中使用three.js,vue使用threejs加载glb模型)
|
物联网 C# Windows
看看如何使用 C# 代码让 MQTT 进行完美通信
看看如何使用 C# 代码让 MQTT 进行完美通信
2544 0
|
监控 安全 物联网
阿里云mqtt简介和使用流程
本文介绍了阿里云MQTT的准备工作、简介和使用流程。首先,用户需要注册阿里云账号并完成实名认证。接着,通过阿里云物联网平台创建产品和设备,获取连接所需的Broker Address、Port、Username和Password。然后,使用MQTT客户端(如MQTTX)配置这些信息进行连接,并激活设备。最后,创建并订阅/发布自定义Topic,实现设备间的通信。阿里云MQTT是一个适用于物联网设备的轻量级通信协议,提供高并发、高可靠性的服务,广泛应用于各种物联网场景。
阿里云mqtt简介和使用流程

热门文章

最新文章