MqttDemo/pages/index/index.vue

<template>
  <view class="content">
    <view>
      <button type="primary" @click="connectOrDisconnect">
        {{ connectText }}
      </button>
      <!-- <button type="primary" @click="addDevice">添加设备</button> -->
    </view>
    <!-- <image class="logo" src="/static/logo.png"></image> -->
    <text class="title">发布消息</text>
    <view class="br"></view>
    <view class="text-area">
      <text>Topic</text>
      <input class="edittext" v-model="publishTopic" />
    </view>
    <view class="br"></view>
    <view class="text-area">
      <text>Payload</text>
      <textarea class="edittext" v-model="publishMsg" />
    </view>
    <view class="br"></view>
    <button @click="publish">publish</button>

    <text class="title">订阅主题</text>
    <view class="text-area">
      <!-- 订阅 -->
      <input class="edittext" v-model="subscribeTopic" />
    </view>
    <view class="br"></view>
    <button @click="subscribe">subscribe</button>
    <view class="br"></view>
    <text class="title">收到的Message</text>
    <view class="br"></view>
    <view v-for="(item, index) in subList" :key="index">
      <text>Topic：{{ item.topic }} ，Payload： {{ item.msg }}</text>
    </view>
    <view> </view>
  </view>
</template>

<script>
//import store from '@/store/index.js';//需要引入store
export default {
  data() {
    return {
      publishMsg: "",
      publishTopic: "",
      subscribeTopic: "",
    };
  },
  onLoad() {
    console.log("index.vue onload");
  },
  created() {
    console.log("index.vue created");
  },
  computed: {
    connectText() {
      return this.$store.getters["moduleMqtt/connected"] ? "断开" : "连接";
    },
    subList() {
      return this.$store.state.moduleMqtt.msgList;
    },
  },
  methods: {
    publish() {
      //发布
      let that = this;
      //发布消息
      that.$store
        .dispatch({
          type: "moduleMqtt/publish",
          topic: that.publishTopic,
          payload: that.publishMsg,
        })
        .then(
          () => {
            /* success */
          },
          (err) => {
            console.log(err);
            uni.showToast({
              title: "发布消息失败",
              duration: 2000,
              icon: "none",
            });
          }
        );
    },
    subscribe() {
      //订阅
      let that = this;
      //订阅消息
      that.$store.dispatch("moduleMqtt/subscribe", that.subscribeTopic).then(
        () => {
          uni.showToast({
            title: `订阅${that.subscribeTopic}主题成功`,
            duration: 2000,
            icon: "none",
          });
        },
        (err) => {
          uni.showToast({
            title: `订阅${that.subscribeTopic}主题失败`,
            duration: 2000,
            icon: "none",
          });
        }
      );
    },
    connectOrDisconnect() {
      //连接或者断开mqtt服务
      if (this.$store.getters["moduleMqtt/connected"] === false) {
        //连接mqtt服务器
        this.$store.commit("moduleMqtt/connect");
      } else {
        //断开连接
        this.$store.dispatch("moduleMqtt/disconnect");
      }
    },
    addDevice() {
      //添加设备
      this.$store.dispatch({
        type: "moduleMqtt/addDevice",
        clientId: "wx_18126447015",
        device: {
          name: "MW-M3",
          uuid: "89860474192070498495",
        },
      });
    },
    godoBle() {
      //添加设备
      // #ifdef MP-WEIXIN||APP-PLUS
      uni.navigateTo({
        url: "../ble/ScanBleDevice",
      });
      // #endif
      // #ifdef H5
      uni.navigateTo({
        url: "../ble/ConnectBleDevice",
      });
      // uni.showToast({
      // 	title:'H5页面不支持扫描设备',
      // 	icon:'none'
      // })
      // #endif
    },
  },
};
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  justify-content: center;
  margin: 20rpx;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.br {
  height: 10rpx;
}

.text-area {
  display: flex;
  /* justify-content: center; */
}

.title {
  font-size: 30rpx;
  color: #2c3e50;
  margin: 5rpx;
}

textarea {
  height: 50rpx;
}

.edittext {
  display: flex;
  border: 1rpx solid #333333;
}
</style>