<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");
}
},
},
};