前端使用MQTT

介绍：

MQTT 协议的全称是 Message Queuing Telemetry Transport，翻译为消息队列传输探测，它是 ISO 标准下的一种基于发布 - 订阅模式的消息协议，它是基于 TCP/IP 协议簇的，它是为了改善网络设备硬件的性能和网络的性能来设计的。

 小结:MQTT有着发布跟订阅两种模式。

模式：假设我跟你还有B是wx好友关系，但是你跟B不是，那么有天我群发了一个"中秋节快乐"，这就是发布，你跟B接收到了消息，这就是订阅(个人想法，不喜勿喷)。

MQTT使用

方法一：

        npm i mqtt

/**
 *@author  ahuan
 *@data 2023/10/31 17:11
 **/
import mqtt from "mqtt";

class mqttHandle {
  static url; // mqtt地址
  static subscribe; // 订阅地址
  static client; // mqtt公共变量
  static sendSubscribe; // 发布的主题
  logs;
  // 接收初始化数据
  constructor(obj) {
    let {url, subscribe, sendSubscribe , logs} = obj;
    // 赋值
    this.subscribe = subscribe;
    this.sendSubscribe = sendSubscribe;
    this.url = url;
    this.logs = logs;
    this.initMQTT();
  }

  // 初始化mqtt
  initMQTT() {
    const options = {
      clean: true, // true 清除会话, false 保留会话
      //mqtt客户端的id
      clientId: "remove_" + Math.random().toString(16).substr(2, 8),
      connectTimeout: 4000, // 超时时间
    }
    this.client = mqtt.connect(this.url, options);
    // 连接失败回调函数
    this.client.on("error", (error) => {
      console.log(error)
    });
    // 连接成功回调函数
    this.client.on("reconnect", (error) => {
      console.log(error)
    });
    this.linkMQTT();
  }

  // 取消订阅
  unsubscribes() {
    this.client.unsubscribe(this.subscribe, (error) => {
      if (!error) {
        console.log(this.subscribe, "取消订阅成功");
      } else {
        console.log(this.subscribe, "取消订阅失败");
      }
    })
  }

  // 结束链接
  over() {
    if (this.client.end) {
      this.client.end();
    }
  }

  // 订阅主题
  linkMQTT() {
    this.client.on("connect", (error) => {
      this.client.subscribe(this.subscribe, (error) => {
        if (!error) {
          console.log("订阅成功")
        } else {
          console.log("订阅失败")
        }
      })
      this.getMessage();
    })
  }

  // 发布订阅信息
  setMessage(val) {
    this.client.publish(this.sendSubscribe, JSON.stringify(val));
  }

  // 接受订阅信息
  getMessage() {
    this.client.on("message", (topic, message) => {
      console.log("收到信息", this.uint8ArrayNewValue(message))
      message = this.uint8ArrayNewValue(message);
      this.logs.push(message);
    })
  }

  // 解码Uint8Array
  uint8ArrayNewValue(val) {
    return String.fromCharCode.apply(null, new Uint8Array(val));
  }
}

export default mqttHandle;

 MQTT的方法

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

属性	说明
keepalive	单位为秒，数值类型，默认为 60 秒，设置为 0 时禁止。用于解决半连接问题，在该时间内是否接收两次传输
clientId	默认为 ‘mqttjs_’ + Math.random().toString(16).substr(2, 8)，可自定义修改，字符串类型
username	认证用户名，如果 Broker 要求用户名认证的话，请设置该值
password	认证密码，如果 Broker 要求密码认证的话，请设置该值
timeout	连接超时时长，收到 CONNACK 前的等待时间，单位为毫秒，默认 30000 毫秒

方法二：

使用mqttws31.min.js 

'http://beefindtech.com/subservice/mqtt_new/mqttws31.min.js'

通过webpack引入mqttws31.js /在index.html中引入

 

/**
 *@author  ahuan
 *@data 2023/11/2 9:06
 **/
class MqttPaho {
  static hostname; // mqtt地址
  static subscribe; // 订阅地址
  static client; // mqtt公共变量
  static sendSubscribe; // 发布的主题
  static port;
  keepAlive = 60;
  timeout = 30;
  ssl = false;
  static clientId;
  cleanSession = true;
  qos = 0;
  state = false; // 是否连接成功
  header;
  logs;
  deviceStatus = false;  // 是否调用设备基本信息接口
  constructor(obj, f) {
    let {hostname, subscribe, sendSubscribe, port, logs, clientId} = obj;
    this.hostname = hostname;
    this.subscribe = subscribe;
    this.sendSubscribe = sendSubscribe;
    this.port = port;
    this.logs = logs;
    this.clientId = clientId + new Date().getTime();
    // 创建MQTT客户端实例
    this.client = new Paho.MQTT.Client(this.hostname, this.port, this.clientId);
    // 连接MQTT
    this.linkMQTT(f);
  }

  // 连接MQTT
  linkMQTT(f) {
    let that = this;
    let options = {
      invocationContext: {
        host: that.hostname,
        port: that.port,
        path: that.client.path,
        clientId: that.clientId
      },
      timeout: that.timeout,
      keepAliveInterval: that.keepAlive,
      cleanSession: that.cleanSession,
      useSSL: that.ssl,
      onSuccess: () => {
        that.onConnect(that, f);
      },
      onFailure: (error) => {
        alert("连接失败")
      }
    }
    that.client.connect(options);
    // 配置链接丢失事件监听
    that.client.onConnectionLost = that.onConnectionLost;
    // 配置消息回传事件
    that.client.onMessageArrived = (msg) => {
      that.onMessageArrived(that, msg)
    };
  }

  // 连接成功回调
  onConnect(that, f) {
    that.client.subscribe(that.subscribe, {
      qos: Number(that.qos)
    })
    if (f) {
      f();
    }
    that.state = true;
  }

  // 丢失连接回调
  onConnectionLost(responseObject) {
    if (responseObject.errorCode !== 0) {
      Message.error("连接丢失：" + responseObject.errorMessage);
      window.location.reload();
    }
  }

  // 收到消息的回调
  onMessageArrived(that, message) {
    console.log("收到回传消息" + message.payloadString);
    that.logs.push({
      topic: that.header,
      value: that.deviceStatus ? that.deviceInfo(message.payloadString) : message.payloadString
    });
  }


  // 发送消息
  setMessage(msg) {
    if (msg) {
      console.log('[mqtt send]' + msg);
      let message = new Paho.MQTT.Message(msg + ' 2>&1');
      console.log(this.sendSubscribe)
      console.log(this.subscribe)
      message.destinationName = this.sendSubscribe;
      this.header = this.sendSubscribe;
      this.client.send(message);
    }
  }

  // 取消订阅
  cancelYourSubscription() {
    this.client.unsubscribe(this.subscribe, function (error) {
      if (error) {
        console.log(error)
      } else {
        console.log('已取消订阅')
      }
    })

  }
}

export default MqttPaho;

有些变量是我业务中才需要用到的。logs用于接收mqtt订阅收到的信息，使用vue响应式变量可以直接触发页面更新。