vue,mtqq消息传输

<template>
  <div>
    <el-button
      type="text"
      @click="sendMsg"
      style="font-size: 12px"
      icon="el-icon-upload2"
    >
      发送
    </el-button>
    <el-button
      type="text"
      @click="returnMsg"
      style="font-size: 12px"
      icon="el-icon-upload2"
    >
      返回
    </el-button>
  </div>
</template>

<script>
import mqtt from "@/utils/mqtt";
export default {
  mixins: [mqtt],
  components: {},
  data() {
    return {
      fileList: [],
    };
  },
  props: {},
  computed: {
    mqttRefreshAttachmentFieldTopic() {
      return `user/${this.userId}/ygg_view/tag_view_file_view_unzip_file`;
    },
  },
  created() {},
  methods: {
    sendMsg() {
      this.initMqtt();
      this.mqttConnectSuccess();
    },
    returnMsg() {
      let prex = this.mqttRefreshAttachmentFieldTopic;
      if (prex) {
        this.publishMsg(prex, {
          action: "refresh_attachment_field",
          att: {
            filedId: "2222",
          },
        });
      }
    },

    initMqtt() {
      this.onPrintNotify();
      this.doConnect(this.mqttRefreshAttachmentFieldTopic);
    },

    destroyed() {
      this.unSubscribe(this.mqttRefreshAttachmentFieldTopic);
    },

    mqttConnectSuccess() {
      this.doSubscribe(this.mqttRefreshAttachmentFieldTopic);
    },
    onMqttMessage(topic, message) {
      let obj = JSON.parse(message);
      let data = obj.body.data;
      if (topic != this.mqttRefreshAttachmentFieldTopic) {
        return;
      }
      if (data.action === "refresh_attachment_field") {
        this.onReadyPrintNotify();
      }
    },
    onPrintNotify() {
      this.$notify({
        title: "上传压缩包中...",
        message:
          "您可以进行其他操作，上传在后台进行。上传完成后，您会在消息里收到完成提醒。",
        iconClass: "el-icon-refresh",
        duration: 5000,
      });
    },
    onReadyPrintNotify() {
      this.$notify({
        title: "成功提示",
        message: "上传压缩包完成",
        duration: 0,
        type: "success",
      });
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-button {
    font-size: 12px;
  }
}
.upload-container {
  display: none;
}
</style>

mqtt.js

import { mapState, mapMutations, mapGetters } from "vuex";
import { uuid } from "@/zgg-core/utils";

export default {
  computed: {
    ...mapState("mqtt", ["mqttClient"]),
    ...mapGetters(["currentUser"]),
  },
  created() {
    this.mqttUuid = uuid();
  },
  destroyed() {
    this.deleteMqttMessage(this.mqttUuid);
  },
  methods: {
    ...mapMutations("mqtt", [
      "mqttConnect",
      "setMqttMessage",
      "deleteMqttMessage",
    ]),
    doConnect(topic) {
      this.setMqttMessage({
        uuid: this.mqttUuid,
        callback: this.onMqttMessage,
      });
      if (this.mqttClient) {
        this.doSubscribe(topic);
        // console.log(this.mqttClient.off)
        // this.mqttClient.on("message", this.onMqttMessage);
      } else {
        this.mqttConnect({
          mqttConnectSuccess: this.mqttConnectSuccess,
          // onMqttMessage: this.onMqttMessage,
          userId: this.currentUser.id,
        });
      }
    },
    unSubscribe(topic, callback) {
      if (typeof topic !== "string") {
        return;
      }

      let client = this.mqttClient;
      client.unsubscribe(
        topic,

        (err, a) => {
          if (!err) {
            client.off("message", this.onMqttMessage);
            console.log("取消订阅", topic);
            if (typeof callback === "function") {
              callback();
            }
          }
        }
      );
    },
    doSubscribe: function (topic) {
      if (typeof topic !== "string") {
        return;
      }

      let client = this.mqttClient;
      this.unSubscribe(topic, () => {
        client.subscribe(
          topic,
          {
            qos: 0,
          },
          (err, a) => {
            if (!err) {
              // client.on('message', this.onMqttMessage)
              console.log("订阅成功", topic);
            }
          }
        );
      });
    },
    publishMsg(topic, msg) {
      try {
        this.mqttClient.publish(topic, JSON.stringify({ body: { data: msg } }));
        // alert(topic + "," + JSON.stringify(msg))
      } catch (error) {
        alert("publis error");
      }
    },
  },
};