分享axios+MQTT简单封装示例

MQTT（Message Queuing Telemetry Transport，消息队列遥测传输协议），是一种基于发布/订阅（publish/subscribe）模式的"轻量级"通讯协议，该协议构建于TCP/IP协议上，由IBM在1999年发布。MQTT最大优点在于，可以以极少的代码和有限的带宽，为连接远程设备提供实时可靠的消息服务。作为一种低开销、低带宽占用的即时通讯协议，使其在物联网、小型设备、移动应用等方面有较广泛的应用。

MQTT是一个基于客户端-服务器的消息发布/订阅传输协议。MQTT协议是轻量、简单、开放和易于实现的，这些特点使它适用范围非常广泛。在很多情况下，包括受限的环境中，如：机器与机器（M2M）通信和物联网（IoT）。其在，通过卫星链路通信传感器、偶尔拨号的医疗设备、智能家居、及一些小型化设备中已广泛使用。

由于物联网的环境是非常特别的，所以MQTT遵循以下设计原则：

（1）精简，不添加可有可无的功能；

（2）发布/订阅（Pub/Sub）模式，方便消息在传感器之间传递；

（3）允许用户动态创建主题，零运维成本；

（4）把传输量降到最低以提高传输效率；

（5）把低带宽、高延迟、不稳定的网络等因素考虑在内；

（6）支持连续的会话控制；

（7）理解客户端计算能力可能很低；

（8）提供服务质量管理；

（9）假设数据不可知，不强求传输数据的类型与格式，保持灵活性。

MQTT协议工作在低带宽、不可靠的网络的远程传感器和控制设备通讯而设计的协议，它具有以下主要的几项特性：

（1）使用发布/订阅消息模式，提供一对多的消息发布，解除应用程序耦合。

这一点很类似于XMPP，但是MQTT的信息冗余远小于XMPP，,因为XMPP使用XML格式文本来传递数据。

（2）对负载内容屏蔽的消息传输。

（3）使用TCP/IP提供网络连接。

主流的MQTT是基于TCP连接进行数据推送的，但是同样有基于UDP的版本，叫做MQTT-SN。这两种版本由于基于不同的连接方式，优缺点自然也就各有不同了。

（4）有三种消息发布服务质量：

"至多一次"，消息发布完全依赖底层TCP/IP网络。会发生消息丢失或重复。这一级别可用于如下情况，环境传感器数据，丢失一次读记录无所谓，因为不久后还会有第二次发送。这一种方式主要普通APP的推送，倘若你的智能设备在消息推送时未联网，推送过去没收到，再次联网也就收不到了。

"至少一次"，确保消息到达，但消息重复可能会发生。

"只有一次"，确保消息到达一次。在一些要求比较严格的计费系统中，可以使用此级别。在计费系统中，消息重复或丢失会导致不正确的结果。这种最高质量的消息发布服务还可以用于即时通讯类的APP的推送，确保用户收到且只会收到一次。

（5）小型传输，开销很小（固定长度的头部是2字节），协议交换最小化，以降低网络流量。

这就是为什么在介绍里说它非常适合"在物联网领域，传感器与服务器的通信，信息的收集"，要知道嵌入式设备的运算能力和带宽都相对薄弱，使用这种协议来传递消息再适合不过了。

（6）使用Last Will和Testament特性通知有关各方客户端异常中断的机制。

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

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

实现MQTT协议需要客户端和服务器端通讯完成，在通讯过程中，MQTT协议中有三种身份：发布者（Publish）、代理（Broker）（服务器）、订阅者（Subscribe）。其中，消息的发布者和订阅者都是客户端，消息代理是服务器，消息发布者可以同时是订阅者。

MQTT传输的消息分为：主题（Topic）和负载（payload）两部分：

（1）Topic，可以理解为消息的类型，订阅者订阅（Subscribe）后，就会收到该主题的消息内容（payload）；

（2）payload，可以理解为消息的内容，是指订阅者具体要使用的内容。

MQTT会构建底层网络传输：它将建立客户端到服务器的连接，提供两者之间的一个有序的、无损的、基于字节流的双向传输。

当应用数据通过MQTT网络发送时，MQTT会把与之相关的服务质量（QoS）和主题名（Topic）相关连。

一个使用MQTT协议的应用程序或者设备，它总是建立到服务器的网络连接。客户端可以：

（1）发布其他客户端可能会订阅的信息；

（2）订阅其它客户端发布的消息；

（3）退订或删除应用程序的消息；

（4）断开与服务器连接。

MQTT服务器以称为"消息代理"（Broker），可以是一个应用程序或一台设备。它是位于消息发布者和订阅者之间，它可以：

（1）接受来自客户的网络连接；

（2）接受客户发布的应用信息；

（3）处理来自客户端的订阅和退订请求；

（4）向订阅的客户转发应用程序消息。

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

（1）订阅（Subscription）

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

（2）会话（Session）

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

（3）主题名（Topic Name）

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

（4）主题筛选器（Topic Filter）

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

（5）负载（Payload）

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

MQTT协议中定义了一些方法（也被称为动作），来于表示对确定资源所进行操作。这个资源可以代表预先存在的数据或动态生成数据，这取决于服务器的实现。通常来说，资源指服务器上的文件或输出。主要方法有：

（1）Connect。等待与服务器建立连接。

（2）Disconnect。等待MQTT客户端完成所做的工作，并与服务器断开TCP/IP会话。

（3）Subscribe。等待完成订阅。

（4）UnSubscribe。等待服务器取消客户端的一个或多个topics订阅。

（5）Publish。MQTT客户端发送消息请求，发送完成后返回应用程序线程。

在MQTT协议中，一个MQTT数据包由：固定头（Fixed header）、可变头（Variable header）、消息体（payload）三部分构成。MQTT数据包结构如下：

（1）固定头（Fixed header）。存在于所有MQTT数据包中，表示数据包类型及数据包的分组类标识。

（2）可变头（Variable header）。存在于部分MQTT数据包中，数据包类型决定了可变头是否存在及其具体内容。

（3）消息体（Payload）。存在于部分MQTT数据包中，表示客户端收到的具体内容。

固定头存在于所有MQTT数据包中，其结构如下：

MQTT数据包类型

位置：Byte 1中bits 7-4。相于一个4位的无符号值，类型、取值及描述如下：

标识位

位置：Byte 1中bits 3-0。在不使用标识位的消息类型中，标识位被作为保留位。如果收到无效的标志时，接收端必须关闭网络连接：

（1）DUP：发布消息的副本。用来在保证消息的可靠传输，如果设置为1，则在下面的变长中增加MessageId，并且需要回复确认，以保证消息传输完成，但不能用于检测消息重复发送。

（2）QoS：发布消息的服务质量，即：保证消息传递的次数

Ø00：最多一次，即：<=1

Ø01：至少一次，即：>=1

Ø10：一次，即：=1

Ø11：预留

（3）RETAIN： 发布保留标识，表示服务器要保留这次推送的信息，如果有新的订阅者出现，就把这消息推送给它，如果设有那么推送至当前订阅者后释放。

ws://broker.emqx.io:8083/mqtt

MQTT连接成功！

import Vue from "vue";
import Vuex from "vuex";
import axios from "axios";
import store from "@/store/store.js";
import router from "@/router/index";
import { Config } from "@/api.js";
// mqtt 相关
import mqtt from "@/store/mqtt.js";
Vue.use(Vuex);
axios.defaults.timeout = 60;

// console.log(process.env)
const baseUrl =
  process.env.NODE_ENV === "development"
    ? process.env.VUE_APP_BASE_API + "/api"
    : "http://" + window.location.host + "/api";
axios.defaults.baseURL = baseUrl;
// http request 拦截器
axios.interceptors.request.use(
  (config) => {
    // 获取登录成功后存储到sessionStorage中的令牌
    const token = sessionStorage.getItem("userToken");
    //console.log(token)
    config.data = JSON.stringify(config.data);
    config.headers["Content-Type"] = "application/json"; // "application/x-www-form-urlencoded",
    // config.headers['']
    config.headers["X-Access-Token"] = token || undefined;
    // if (token) {
    //   config.params = { token: token };
    // }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// http response 拦截器
axios.interceptors.response.use(
  (response) => {
    if (response.data.errCode == 2) {
      this.$router.push({
        path: "/",
        querry: { redirect: this.$router.currentRoute.fullPath }, //从哪个页面跳转
      });
    }
    return response;
  },
  (error) => {
    // console.log(error.response);
    if (error.response.status == 401) {
      // console.log(23232323)
      sessionStorage.removeItem("userToken");
      sessionStorage.removeItem("userToken");
      sessionStorage.removeItem("userInfo");
      sessionStorage.removeItem("role");
      store.state.hasLogin = false;
      // 未登录
      // console.log(router)
      router.push({ name: "root" });
    }
    return Promise.reject(error);
  }
);

// 封装get方法,返回promise对象
export function get(url, params = {}) {
  return new Promise((resolve, reject) => {
    axios
      .get(url, {
        params: params,
      })
      .then((response) => {
        resolve(response.data);
      })
      .catch((err) => {
        reject(err);
      });
  });
}
// 封装post请求
export function post(request) {
  return new Promise((resolve, reject) => {
    axios.post(request.url, request.data).then(
      (response) => {
        resolve(response.data);
      },
      (err) => {
        reject(err);
      }
    );
  });
}
// 封装getAwait方法,返回async方法
export async function getAwait(url, params = {}) {
  let res = await axios.get(url, { params: params });
  res = res.data;
  return res;
}
// 封装getAwait方法,返回async方法
export async function postAwait(url, data = {}) {
  let res = await axios.post(url, data);
  res = res.data;
  return res;
}


const store = new Vuex.Store({
  state: {
    //全局变量定义处
    hasLogin: false, //用户是否登录
    userInfo: {}, //用于存放用户账户数据
  },
  mutations: {
    //全局方法定义处
    setLogin(state, status) {
      state.hasLogin = status;
    },
    setUserInfo(state, param) {
      state.userInfo = param;
    },
    setLogout(state) {},
    setConfig(state, data) {
      // console.log(data)
    },
    setFind(state, data) {
      // if(data[0]){
      //   try {
      //   } catch (error) {
      //     console.log(error)
      //   }
      // }
    },
  },
  actions: {
    setLogin(state, status) {
      state.hasLogin = status;
    },
    setUserInfo(state, param) {
      state.userInfo = param;
    },
    setLogout(state) {},
    getConfig({ commit }) {
    },
    // 获取配置信息
    getFind({ commit }) {
    },
  },
  modules: {
    mqtt,
  },
});

export default store;

const store = new Vuex.Store({
  state: {
    mattStatus: 1, // 1 = 连接中 2 = 连接成功 3 = 重新连接 4 = 已断开连接 5 = 已离线 6 = 无法连接
    clientMqtt: null, // 当前连接 mqtt 实体
    mittTopic: [], // 存放当前 mitt 订阅的名称（便于控制 mitt 销毁）
    topicHistory: [], // topic 订阅取消 操作日志 （仅存储最近100条记录；用于解决两个界面订阅、取消订阅重复的topic出现的数据不推送问题：取消订阅完成在订阅成功之前会取消这个topic所有的订阅即这个topic不会推送）
  },
  getters: {},
  mutations: {},
  actions: {},
});

export default store;

// mqtt 文档：https://github.com/mqttjs/MQTT.js#connect
// 针对 mqtt 进行深度封装
import mqtt from "mqtt";
const { connect, Store } = mqtt;

// mqtt 服务端 ip地址以及端口 例如： 0.0.0.0:0000
const host = globConfig && globConfig.VUE_APP_MQTT_IP;

// mqtt 订阅日志操作
function setMqttTopicHistory(data) {
  if (typeof data === "object") {
    if (store.state.topicHistory.length >= 100) {
      store.state.topicHistory.splice(0, 1);
    }
    store.state.topicHistory.push(data);
  } else {
    try {
      Array.from(store.state.topicHistory, (item) => {
        if (item.id === data) {
          item.status = "success";
          throw new Error("终止循环");
        }
      });
    } catch (err) {
      //
    }
  }
}

// 设置 promise 等待函数
function statusPromise(topic, type) {
  return new Promise((resolve) => {
    if (getLoading()) {
      sleep();
    } else {
      resolve();
    }
    // 设置递归函数等待  模拟 sleep
    function sleep() {
      setTimeout(() => {
        if (getLoading()) {
          sleep();
        } else {
          resolve();
        }
      }, 200);
    }
    // 获取正在操作中的topic日志
    function getLoading() {
      const temp = store.state.topicHistory.find((item) => {
        return (
          item.topic === topic &&
          item.type === type &&
          item.status === "loading"
        );
      });
      return temp;
    }
  });
}

// 连接 mqtt
export const connectMqtt = function () {
  return new Promise((resolve, reject) => {
    // 整个客户端只需要1个mqtt连接
    // 如果没有连接则新建连接
    if (!store.state.clientMqtt) {
      store.state.mattStatus = 1; // 连接中
      // 创建连接
      const client = connect(`mqtt://${host}/mqtt`);
      store.state.clientMqtt = client;
      // message.loading({ content: "实时通信正在连接中...", key: 1 });

      // 在成功（重新）连接时发出
      client.on("connect", (data) => {
        // console.log(data);
        setTimeout(() => {
          store.state.mattStatus = 2; // 连接成功
          // message.success({ content: "实时通信已连接成功！", key: 1 });
        }, 1000);
        console.log("mqtt 连接成功！");
        resolve();
      });

      // 重新连接开始时发出
      client.on("reconnect", (data) => {
        // message.loading({ content: "实时通信正在连接中...", key: 1 });
        store.state.mattStatus = 3; // 重新连接
        console.log("mqtt 开始重新连接...");
      });

      // 断开连接后发出
      client.on("close", (data) => {
        // 清理 store mqtt 实体
        store.state.mattStatus = 4; // 已断开连接
        store.state.clientMqtt = null;
        console.log("mqtt 已断开连接！");
        reject();
      });

      // 当客户端离线时发出
      client.on("offline", (data) => {
        console.log("mqtt 客户端已经离线！");
        store.state.mattStatus = 5; // 已离线
        // message.info("您当前的实时通信处于离线状态");
      });

      // 当客户端无法连接（即 connack rc != 0）或发生解析错误时发出
      client.on("error", (data) => {
        console.log("mqtt 无法连接！");
        store.state.mattStatus = 6; // 无法连接
        message.error("实时通信无法连接到服务器！");
        reject();
      });

      // 被调用时发出。如果将回调传递给，则一旦回调返回，就会发出此事件。mqtt.Client#end()mqtt.Client#end()
      client.on("end", (data) => {
        console.log("mqtt 主动 断开连接！");
      });

      // 当客户端收到发布数据包时发出
      // topic收到包的主题
      // message接收数据包的有效载荷
      // packet接收到的数据包，在 mqtt-packet中定义
      client.on("message", (topic, message, packet) => {
        // console.log(topic)
        const msg = JSON.parse(decodeURIComponent(message));
        // console.log(topic);
        // console.log(store.state.mittTopic);
        // console.log(msg);
        if (store.state.mittTopic.includes(topic)) {
          // 通过事件进行广播
          EvenBus.$emit(topic, msg);
        }
      });
    } else {
      resolve();
    }
  });
};

// 订阅 (如果未建立 mqtt 连接 回先进行创建 mqtt 连接)
// 此处设置等待在订阅之前有取消订阅中的操作 等待取消订阅服务器返回成功状态后再进行订阅
// 防止上一个界面取消订阅（同时操作相同 topic） 下一个界面订阅直接被取消订阅 导致接受不到订阅的数据
export const subscribe = async function (topic, callback) {
  const client = store.state.clientMqtt;
  if (client) {
    // 等待取消订阅回调完成
    await statusPromise(topic, "cancel");

    // 订阅日志操作
    const _id = uuidv4();
    setMqttTopicHistory({
      id: _id, // 唯一id
      type: "subscription", // 取消订阅还是订阅
      status: "loading", // 异步函数是否完成
      type_text: "开启订阅",
      topic: topic, // 操作的 topic
    });

    client.subscribe(topic, (err, granted) => {
      // 设置订阅日志完成状态
      setMqttTopicHistory(_id);

      callback && callback(err, granted);
      if (err) {
        console.error("topic 订阅失败：", granted);
      } else {
        console.log("topic 订阅成功：", granted);
        if (!store.state.mittTopic.includes(topic)) {
          store.state.mittTopic.push(topic);
        }
      }
    });
  } else {
    connectMqtt().then((res) => {
      subscribe(topic, callback);
    });
  }
};

// 取消订阅
export const unsubscribe = function (topic, callback) {
  const client = store.state.clientMqtt;
  if (client) {
    // 订阅日志操作
    const _id = uuidv4();
    setMqttTopicHistory({
      id: _id, // 唯一id
      type: "cancel", // 取消订阅还是订阅
      status: "loading", // 异步函数是否完成
      type_text: "取消订阅",
      topic: topic, // 操作的 topic
    });

    const _index = store.state.mittTopic.indexOf(topic);
    if (_index > -1) {
      store.state.mittTopic.splice(_index, 1);
    }
    // 取消订阅后 取消事件广播所有的监听（此处取消后在调用广播监听的地方则不需要取消监听广播）
    EvenBus.$off(topic);

    client.unsubscribe(topic, (err) => {
      // 设置订阅日志完成状态
      setMqttTopicHistory(_id);

      callback && callback(err);
      if (err) {
        console.error("topic 取消订阅订阅失败");
      } else {
        console.log("topic 取消订阅成功：");
      }
    });
  }
};

// 切换订阅
export const swichSubscribe = function (oldTopic, newTopic) {
  // 先取消订阅
  unsubscribe(oldTopic);
  // 再重新订阅
  subscribe(newTopic);
};

// 发送消息
export const publish = function () {};

// 关闭客户端
export const end = function () {
  const client = store.state.clientMqtt;
  if (client) {
    client.end(true);
    // 关闭事件广播的监听 并清理 store 内缓存
    const mittTopic = store.state.mittTopic;
    mittTopic.forEach((item) => {
      EvenBus.$off(item);
    });
    store.state.mittTopic = [];
  }
};

参见：

MQTTX：全功能 MQTT 客户端工具
MQTT 协议入门：基础知识和快速教程 | EMQ