您现在的位置是：首页 > 技术教程正文

前端mqtt的详细使用(包含mqtt服务器部署，前端vue3使用mqtt连接、订阅主题、发布等)

admin 阅读： 2024-03-27

后台-插件-广告管理-内容页头部广告（手机）

一、简述

MQTT（消息队列遥测传输协议），是一种基于发布/订阅（publish/subscribe）模式的通讯协议，该协议构建于TCP/IP协议上。MQTT最大优点在于，可以以极少的代码和有限的带宽，为连接远程设备提供实时可靠的消息服务。MQTT 协议的应用场景包括物联网、移动应用、车联网、智能家居、即时聊天等。

二、特性

使用发布/订阅消息模式。
对负载内容屏蔽的消息传输。
使用TCP/IP提供网络连接。
有三种消息发布服务质量：
1. “至多一次”，消息发布完全依赖底层TCP/IP网络。会发生消息丢失或重复。这一级别可用于如下情况，环境传感器数据，丢失一次读记录无所谓，因为不久后还会有第二次发送。这一种方式主要普通APP的推送，倘若你的智能设备在消息推送时未联网，推送过去没收到，再次联网也就收不到了。
2. “至少一次”，确保消息到达，但消息重复可能会发生。
3. “只有一次”，确保消息到达一次。在一些要求比较严格的计费系统中，可以使用此级别。在计费系统中，消息重复或丢失会导致不正确的结果。这种最高质量的消息发布服务还可以用于即时通讯类的APP的推送，确保用户收到且只会收到一次。
小型传输，开销很小（固定长度的头部是2字节），协议交换最小化，以降低网络流量。
使用Last Will和Testament特性通知有关各方客户端异常中断的机制。

Last Will：即遗言机制，用于通知同一主题下的其他设备发送遗言的设备已经断开了连接。

Testament：遗嘱机制，功能类似于Last Will。

三、MQTT协议中的订阅、主题、会话

1.订阅（Subscription）

订阅包含主题筛选器（Topic Filter）和最大服务质量（QoS）。订阅会与一个会话（Session）关联。一个会话可以包含多个订阅。每一个会话中的每个订阅都有一个不同的主题筛选器。

2.会话（Session）

每个客户端与服务器建立连接后就是一个会话，客户端和服务器之间有状态交互。会话存在于一个网络之间，也可能在客户端和服务器之间跨越多个连续的网络连接。

3.主题名（Topic Name）

连接到一个应用程序消息的标签，该标签与服务器的订阅相匹配。服务器会将消息发送给订阅所匹配标签的每个客户端。

4.主题筛选器（Topic Filter）

一个对主题名通配符筛选器，在订阅表达式中使用，表示订阅所匹配到的多个主题。

5.负载（Payload）

消息订阅者所具体接收的内容。

四、MQTT协议中的方法

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

五、前端使用mqtt

1. mqtt服务器的部署

使用 EMQX CLOUD 进行mqtt服务的部署

EMQX Cloud: 全托管的 MQTT 消息云服务

部署教程：https://www.bilibili.com/video/BV1Bx4y1K7hN/

使用Serverless版本每月有免费额度

在这里插入图片描述

2. 安装js的mqtt包

npm i mqtt

3. 前端代码

完整代码已上传至github
https://github.com/void00013/8.mqtt_vue3_test/tree/main
请自行下载依赖后运行

// Home.vue

// home.scss body { background-color: #f0f2f5; padding: 0; margin: 0; color: rgba(0, 0, 0, 0.65); font-size: 14px; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; } .emq-title { font-size: 16px; color: #333333; font-weight: bolder; margin-bottom: 15px; &.h3 { font-size: 14px; } &[size='small'] { font-size: 14px; } .sub-title { font-weight: normal; display: block; font-size: 12px; color: #8f9297; margin-top: 12px; } &.required-title { &:before { content: '*'; color: #f5222d; margin-right: 4px; } } } .el-select { width: 100%; } .subscribe-btn { margin-top: 42px !important; } .publish-btn { margin-bottom: 30px; }

4. EMQX官方示例

官方提供了vue、react、java、python等各种语言的代码案例，如有需要请自行查看
https://github.com/emqx/MQTT-Client-Examples/tree/master

标签:

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

在线投稿：投稿站长QQ：1888636

后台-插件-广告管理-内容页尾部广告（手机）