前端结合MQTT实现连接 订阅发送信息等操作 VUE3

本文主要是介绍前端结合MQTT实现连接 订阅发送信息等操作 VUE3,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

  MQTT客户端下载 使用测试 在我之前文章中 MQTT下载基础使用

下面记录一下前端使用的话的操作

1.安装

npm i mqtt

引入

import * as mqtt from "mqtt/dist/mqtt.min"; //VUE3
import mqtt from 'mqtt'   //VUE2

一、MQTT协议中的方法

Connect。等待与服务器建立连接。
Disconnect。等待MQTT客户端完成所做的工作,并与服务器断开TCP/IP会话。
Subscribe。等待完成订阅。
UnSubscribe。等待服务器取消客户端的一个或多个topics订阅。
Publish。MQTT客户端发送消息请求,发送完成后返回应用程序线程。
 

二,简单使用 基础使用(VUE2)

下面代码中, options 是客户端连接选项,以下是主要参数说明,其余参数详见https://www.npmjs.com/package/mqtt#connect。
keepalive:心跳时间,默认 60秒,设置 0 为禁用;
clientId: 客户端 ID ,默认通过 ‘mqttjs_’ + Math.random().toString(16).substr(2, 8) 随机生成;
username:连接用户名(如果有);
password:连接密码(如果有);
clean:true,设置为 false 以在离线时接收 QoS 1 和 2 消息;
reconnectPeriod:默认 1000 毫秒,两次重新连接之间的间隔,客户端 ID 重复、认证失败等客户端会重新连接;
connectTimeout:默认 30 * 1000毫秒,收到 CONNACK 之前等待的时间,即连接超时时间。

import mqtt from 'mqtt'// 连接选项
const options = {connectTimeout: 4000, // 超时时间// 认证信息clientId: 'emqx-connect-via-websocket',username: 'emqx-connect-via-websocket',password: 'emqx-connect-via-websocket',
}const client = mqtt.connect('wss://iot.actorcloud.io:8084/mqtt', options)client.on('reconnect', (error) => {console.log('正在重连:', error)
})client.on('error', (error) => {console.log('连接失败:', error)
})client.on('connect', (e) => {console.log('成功连接服务器')// 订阅一个主题client.subscribe('hello', { qos: 1 }, (error) => {if (!error) {cosnole.log('订阅成功')client.publish('hello', 'Hello EMQ', { qos: 1, rein: false }, (error) => {cosnole.log(error || '发布成功')})}})// 订阅多个主题client.subscribe(['hello', 'one/two/three/#', '#'], { qos: 1 },  onSubscribeSuccess)// 订阅不同 qos 的不同主题client.subscribe([{ hello: 1 }, { 'one/two/three': 2 }, { '#': 0 }], onSubscribeSuccess,)
})// 取消订阅
client.unubscribe(// topic, topic Array, topic Array-Onject'hello',onUnubscribeSuccess,
)// 监听接收消息事件
client.on('message', (topic, message) => {console.log('收到来自', topic, '的消息', message.toString())
})// 发布消息
if (!client.connected) {console.log('客户端未连接')return
}client.publish('hello', 'hello EMQ', (error) => {console.log(error || '消息发布成功')
})

三,项目中示例  (VUE3)

//项目中示例  这只是一个简单的链接 订阅 断开链接的案例

import * as mqtt from "mqtt/dist/mqtt.min";
import { onUnmounted, ref, reactive } from 'vue';
import { ElNotification } from 'element-plus'export default function useMqtt() {let client = ref({connected: false});const notifyPromise = ref(Promise.resolve())const qosList = [0, 1, 2];// 订阅const topic = ref('rscu/alertpush/participant/up')const qos = ref(1)// 链接地址const hostUrl = ref('101.37.163.199')const connection = reactive({// 指明协议类型protocol: "ws",host: hostUrl.value,// ws: 8083; wss: 8084//端口号port: 8083,endpoint: "/mqtt",// for more options, please refer to https://github.com/mqttjs/MQTT.js#mqttclientstreambuilder-optionsclean: true,connectTimeout: 30 * 1000, // msreconnectPeriod: 4000, // msclientId: "emqx_benYing_" + Math.random().toString(16).substring(2, 8),// 账号密码username: "admin",password: "root",});const messageValue = ref(false)// 订阅的信息const receiveNews = ref('')const time = ref(null)const startMqtt = () => {try {const { protocol, host, port, endpoint, ...options } = connection;const connectUrl = `${protocol}://${host}:${port}${endpoint}`;client.value = mqtt.connect(connectUrl, options);if (client.value.on) {// 连接client.value.on("connect", () => {console.log("连接成功 successful");});// 重连client.value.on("reconnect", handleOnReConnect);client.value.on("error", (error) => {console.log("重连失败 error:", error);});// 收到信息client.value.on("message", (topic, message) => {// receiveNews.value = receiveNews.value.concat(message.toString());let { phaseValue } = JSON.parse(message)phaseValue.forEach((value, index, array) => {notifyPromise.value = notifyPromise.value.then(() => {ElNotification({type: 'warning',title: '警告',message: value.msg,position: 'bottom-right',offset: 10})})})console.log(`收到信息 message: ${message} from topic: ${topic}`);});}} catch (error) {console.log("mqtt.connect error:", error);}};// 订阅const link = () => {let qosValue = qos.valueclient.value.subscribe(topic.value,{ qosValue },(error, granted) => {if (error) {console.log("订阅失败 error:", error);return;}console.log("订阅成功 successfully:", granted);});};// 取消订阅const UnSubscribe = () => {let qosValue = qos.valueclient.value.unsubscribe(topic.value, { qosValue }, (error) => {if (error) {console.log("取消订阅失败 error:", error);return;}console.log(`取消订阅成功 topic: ${topic}`);});};// 取消连接const destroyConnection = () => {if (client.value.connected) {try {client.value.end(false, () => {console.log("断开连接成功 successfully");});} catch (error) {console.log("断开连接失败 error:", error);}}};//发送信息  sendMsg //发送的信息const SendMessage =(topic, sendMsg)=> {let qosValue = qos.valueclient.value.publish(this.topic, JSON.stringify(sendMsg), {qosValue }, (err, a) => {if (!err) {console.log('发送信息成功');} else {console.log('发送信息失败');}})}const retryTimes = ref(0);const handleOnReConnect = () => {retryTimes.value += 1;if (retryTimes.value > 5) {try {client.value.end();initData();console.log("connection maxReconnectTimes limit, stop retry");} catch (error) {console.log("handleOnReConnect catch error:", error);}}};const initData = () => {client.value = {connected: false,};retryTimes.value = 0;};return {startMqtt,link,UnSubscribe,destroyConnection};
}

四,项目中tcp协议的坑

项目中 后端返回给我链接地址是 tcp://101.37.163.199:1883  但是我测试半天都链接不上

最后搜索才发现 要替换成       ws://101.37.163.199:8083/mqtt 才能调试链接通

五,经典研究案例 ,大家要是上面研究差不多 或者研究半解 可以去仓库拉下代码 下载包本地运行一下这个项目(他这个是参考MQTTX客户端的一个项目 在这上面可以配置配置项 订阅并发布信息)

仓库地址 : MQTTdemo

这篇关于前端结合MQTT实现连接 订阅发送信息等操作 VUE3的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/577606

相关文章

c++ 类成员变量默认初始值的实现

《c++类成员变量默认初始值的实现》本文主要介绍了c++类成员变量默认初始值,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录C++类成员变量初始化c++类的变量的初始化在C++中,如果使用类成员变量时未给定其初始值,那么它将被

Java通过驱动包(jar包)连接MySQL数据库的步骤总结及验证方式

《Java通过驱动包(jar包)连接MySQL数据库的步骤总结及验证方式》本文详细介绍如何使用Java通过JDBC连接MySQL数据库,包括下载驱动、配置Eclipse环境、检测数据库连接等关键步骤,... 目录一、下载驱动包二、放jar包三、检测数据库连接JavaJava 如何使用 JDBC 连接 mys

Qt使用QSqlDatabase连接MySQL实现增删改查功能

《Qt使用QSqlDatabase连接MySQL实现增删改查功能》这篇文章主要为大家详细介绍了Qt如何使用QSqlDatabase连接MySQL实现增删改查功能,文中的示例代码讲解详细,感兴趣的小伙伴... 目录一、创建数据表二、连接mysql数据库三、封装成一个完整的轻量级 ORM 风格类3.1 表结构

基于Python实现一个图片拆分工具

《基于Python实现一个图片拆分工具》这篇文章主要为大家详细介绍了如何基于Python实现一个图片拆分工具,可以根据需要的行数和列数进行拆分,感兴趣的小伙伴可以跟随小编一起学习一下... 简单介绍先自己选择输入的图片,默认是输出到项目文件夹中,可以自己选择其他的文件夹,选择需要拆分的行数和列数,可以通过

Python中将嵌套列表扁平化的多种实现方法

《Python中将嵌套列表扁平化的多种实现方法》在Python编程中,我们常常会遇到需要将嵌套列表(即列表中包含列表)转换为一个一维的扁平列表的需求,本文将给大家介绍了多种实现这一目标的方法,需要的朋... 目录python中将嵌套列表扁平化的方法技术背景实现步骤1. 使用嵌套列表推导式2. 使用itert

Java操作Word文档的全面指南

《Java操作Word文档的全面指南》在Java开发中,操作Word文档是常见的业务需求,广泛应用于合同生成、报表输出、通知发布、法律文书生成、病历模板填写等场景,本文将全面介绍Java操作Word文... 目录简介段落页头与页脚页码表格图片批注文本框目录图表简介Word编程最重要的类是org.apach

Python使用pip工具实现包自动更新的多种方法

《Python使用pip工具实现包自动更新的多种方法》本文深入探讨了使用Python的pip工具实现包自动更新的各种方法和技术,我们将从基础概念开始,逐步介绍手动更新方法、自动化脚本编写、结合CI/C... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

在Linux中改变echo输出颜色的实现方法

《在Linux中改变echo输出颜色的实现方法》在Linux系统的命令行环境下,为了使输出信息更加清晰、突出,便于用户快速识别和区分不同类型的信息,常常需要改变echo命令的输出颜色,所以本文给大家介... 目python录在linux中改变echo输出颜色的方法技术背景实现步骤使用ANSI转义码使用tpu

Python使用python-can实现合并BLF文件

《Python使用python-can实现合并BLF文件》python-can库是Python生态中专注于CAN总线通信与数据处理的强大工具,本文将使用python-can为BLF文件合并提供高效灵活... 目录一、python-can 库:CAN 数据处理的利器二、BLF 文件合并核心代码解析1. 基础合

Python使用OpenCV实现获取视频时长的小工具

《Python使用OpenCV实现获取视频时长的小工具》在处理视频数据时,获取视频的时长是一项常见且基础的需求,本文将详细介绍如何使用Python和OpenCV获取视频时长,并对每一行代码进行深入解析... 目录一、代码实现二、代码解析1. 导入 OpenCV 库2. 定义获取视频时长的函数3. 打开视频文