相关推荐recommended
前端mqtt的详细使用(包含mqtt服务器部署,前端vue3使用mqtt连接、订阅主题、发布等)
作者:mmseoamin日期:2023-11-30

一、简述

​ 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版本每月有免费额度

      前端mqtt的详细使用(包含mqtt服务器部署,前端vue3使用mqtt连接、订阅主题、发布等),在这里插入图片描述,第1张

      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